/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.0
 Text Domain:  bricks
*/



/* =========================================
   Version 1.0 - CSS Global Tối Ưu + Font + Responsive
   Quản lý toàn bộ menu + header layout + typography
   Breakpoint Bricks:
   - Mobile/Tablet: <= 991px
   - Desktop: >= 992px
   - Large Desktop: >= 1400px
   ========================================= */

/* =========================
   Font-face
   ========================= */
@font-face {
  font-family: 'Be Vietnam Pro';
  src: url('/wp-content/uploads/2025/09/BeVietnamPro-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  src: url('/wp-content/uploads/2025/09/BeVietnamPro-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  src: url('/wp-content/uploads/2025/09/BeVietnamPro-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/wp-content/uploads/2025/09/Inter18pt-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/wp-content/uploads/2025/09/Inter18pt-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/wp-content/uploads/2025/09/Inter18pt-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* =========================
   Font mặc định theo ngôn ngữ
   ========================= */
:lang(vi) {
  font-family: 'Be Vietnam Pro', sans-serif;
}
:lang(en) {
  font-family: 'Inter', sans-serif;
}

/* =========================
   Typography Global
   ========================= */
html {
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: #002366; /* text mặc định */
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.5em;
  color: #002366;
}

h1 { font-size: clamp(28px, 5vw, 42px); }
h2 { font-size: clamp(24px, 4vw, 32px); }
h3 { font-size: clamp(20px, 3vw, 26px); }
h4 { font-size: clamp(18px, 2.5vw, 22px); }
h5 { font-size: clamp(16px, 2vw, 18px); }
h6 { font-size: clamp(14px, 1.8vw, 16px); }

p {
  margin-bottom: 1em;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
}

a {
  color: #002366;
  text-decoration: none;
  transition: color .3s ease, text-decoration .3s ease;
}
a:hover {
  color: #c3b091;
}

/* =========================
   Biến toàn cục
   ========================= */
:root {
  --menu-color: #c3b091;          /* vàng nâu mặc định */
  --menu-active: #ffffff;         /* trắng khi hover/active */
  --submenu-bg: #002366;          /* nền xanh navy */
  --submenu-hover-bg: rgba(255, 255, 255, 0.1);
}


@media (max-width: 991px) { 
  
                     .brx-toggle-div {
                        display: inline-flex;
                    }

                     .brxe-toggle {
                        display: inline-flex;
                    }

                    [data-script-id="ohnlip"] .brx-nav-nested-items {
                        opacity: 0;
                        visibility: hidden;
                        gap: 0;
                        position: fixed;
                        z-index: 1001;
                        top: 0;
                        right: 0;
                        bottom: 0;
                        left: 0;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex-direction: column;
                        background-color: #002366;
                        overflow-y: scroll;
                        flex-wrap: nowrap;
                    }

                    .brx-open .brx-nav-nested-items {
                        opacity: 1;
                        visibility: visible;
                    }

  #brxe-f2ffff { order: 1; } /* Search */
  #brxe-223637 { order: 2; } /* Flag */
  .brxe-nav-nested { order: 3; } /* Toggle 3 gạch */
  
  
}


/* Logo luôn trái */
.div-logo {
  margin-right: auto;
}

/* Nhóm bên phải */
.div-right {
  display: flex;
  align-items: center;
  gap: 5px;
}
.brxe-polylang-language-switcher .lang-item {
    width: 20px;
    height: auto;
    display: inline-block;
    transition: transform .3s ease;
    margin-right: 17px;
}




  /* =========================
     Menu cha (cấp 1, không có submenu)
     ========================= */
  .main-nav > ul > li > a.brxe-text-link,
  .main-nav > ul > li > a[id^="brxe-"] {
    color: var(--menu-color) !important;
    font-size: 15px;
    font-weight: 500;
    padding: 15px 20px;
    background: transparent !important;
    transition: color .3s ease;
  }
  .main-nav > ul > li > a:hover,
  .main-nav > ul > li > a[id^="brxe-"]:hover,
  .main-nav > ul > li.current-menu-item > a,
  .main-nav > ul > li.current-menu-ancestor > a,
  .main-nav > ul > li > a[aria-current="page"] {
    color: var(--menu-active) !important;
    font-weight: 500 !important;
  }

  /* =========================
     Menu Lĩnh vực (có submenu)
     ========================= */
  .main-nav li.menu-item-linhvuc > .brx-submenu-toggle > a {
    color: var(--menu-color) !important;
    font-size: 15px;
    font-weight: 500;
    padding: 15px 20px;
    background: transparent !important;
    transition: color .3s ease;
  }
  .main-nav li.menu-item-linhvuc:hover > .brx-submenu-toggle > a,
  .main-nav li.menu-item-linhvuc:hover > .brx-submenu-toggle > button,
  .main-nav li.menu-item-linhvuc:hover .brx-submenu-toggle svg,
  .main-nav li.menu-item-linhvuc:hover .brx-submenu-toggle svg *,
  .main-nav li.menu-item-linhvuc.current-menu-ancestor > .brx-submenu-toggle > a,
  .main-nav li.menu-item-linhvuc.current-menu-item > .brx-submenu-toggle > a,
  .main-nav li.menu-item-linhvuc .brx-submenu-toggle[aria-current="true"] > a,
  .main-nav li.menu-item-linhvuc .brx-submenu-toggle.aria-current > a,
  .main-nav li.menu-item-linhvuc .brx-submenu-toggle.aria-current a,
  .main-nav li.menu-item-linhvuc .brx-submenu-toggle.aria-current button,
  .main-nav li.menu-item-linhvuc .brx-submenu-toggle.aria-current svg,
  .main-nav li.menu-item-linhvuc .brx-submenu-toggle.aria-current svg * {
    color: var(--menu-active) !important;
    stroke: var(--menu-active) !important;
  }

  /* Icon dropdown cho Lĩnh vực */
  .main-nav li.menu-item-linhvuc .brx-submenu-toggle svg,
  .main-nav li.menu-item-linhvuc .brx-submenu-toggle svg * {
    stroke: var(--menu-color) !important;
    fill: none !important;
    transition: stroke .3s ease;
  }
  .main-nav li.menu-item-linhvuc .brx-submenu-toggle:hover svg,
  .main-nav li.menu-item-linhvuc .brx-submenu-toggle:hover svg *,
  .main-nav li.menu-item-linhvuc.current-menu-ancestor .brx-submenu-toggle svg,
  .main-nav li.menu-item-linhvuc.current-menu-item .brx-submenu-toggle svg,
  .main-nav li.menu-item-linhvuc .brx-submenu-toggle[aria-current="true"] svg,
  .main-nav li.menu-item-linhvuc .brx-submenu-toggle.aria-current svg {
    stroke: var(--menu-active) !important;
  }

  /* =========================
     Submenu (cấp 2+)
     ========================= */
  .main-nav ul.sub-menu,
  .main-nav > ul > li.brxe-dropdown > .brx-submenu-toggle + ul {
    background: var(--submenu-bg) !important;
    border-top: 0px solid var(--menu-color) !important;
    margin: 7px 0 0 0 !important;
    padding: 10px 0 !important;
    min-width: 220px;
  }
  .main-nav ul.sub-menu li a,
  .main-nav > ul > li.brxe-dropdown > .brx-submenu-toggle + ul li a {
    color: var(--menu-color) !important;
    font-size: 15px;
    font-weight: 400;
    padding: 3px 15px;
    background: transparent !important;
    border: none !important;
    transition: color .3s ease;
  }
  .main-nav ul.sub-menu li a:hover,
  .main-nav > ul > li.brxe-dropdown > .brx-submenu-toggle + ul li a:hover,
  .main-nav ul.sub-menu li.current-menu-item > a,
  .main-nav ul.sub-menu li > a[aria-current="page"] {
    color: var(--menu-active) !important;
    background: var(--submenu-hover-bg);
    font-weight: 400;
  }

  /* =========================
     Dropdown button + icon
     ========================= */
  .main-nav > ul > li.brxe-dropdown .brx-submenu-toggle > button {
    color: var(--menu-color) !important;
    background: transparent !important;
    border: none !important;
    font-size: 15px;
    cursor: pointer;
    margin-left: -20px; /* thu nút dropdown */
    transition: color .3s ease;
  }
  .main-nav > ul > li.brxe-dropdown .brx-submenu-toggle > button:hover,
  .main-nav > ul > li.brxe-dropdown.current-menu-ancestor .brx-submenu-toggle > button,
  .main-nav > ul > li.brxe-dropdown.current-menu-item .brx-submenu-toggle > button {
    color: var(--menu-active) !important;
  }
  .main-nav > ul > li.brxe-dropdown .brx-submenu-toggle svg,
  .main-nav > ul > li.brxe-dropdown .brx-submenu-toggle svg * {
    stroke: var(--menu-color) !important;
    fill: none !important;
    transition: stroke .3s ease;
  }
  .main-nav > ul > li.brxe-dropdown:hover .brx-submenu-toggle svg,
  .main-nav > ul > li.brxe-dropdown:hover .brx-submenu-toggle svg * {
    stroke: var(--menu-active) !important;
  }

  /* =========================
     Language switcher
     ========================= */
  .brxe-polylang-language-switcher .lang-item a {
    padding: 0;
  }
  .brxe-polylang-language-switcher .lang-item a img {
    width: 20px;
    height: auto;
    display: inline-block;
    transition: transform .3s ease;
  }
  .brxe-polylang-language-switcher .lang-item a img:hover {
    transform: scale(1.2);
  }
}


/* =========================================
   LARGE DESKTOP (>=1400px)
   ========================================= */
@media screen and (min-width: 1400px) {
  body {
    font-size: 20px;
  }
  section {
    padding: 100px 0;
  }
  .container {
    max-width: 1360px;
    margin: 0 auto;
  }
  h1 { font-size: clamp(36px, 3vw, 54px); }
  h2 { font-size: clamp(30px, 2.5vw, 42px); }
  h3 { font-size: clamp(24px, 2vw, 32px); }
}




/* ========== MENU CONTAINER ========== */
/* M1 mặc định */
#custom-menu {
  position: fixed;
  top: 70px; /* chừa header/logo */
  left: 0;
  width: 100%;
  height: calc(100% - 70px);
  background: #002366; /* nền xanh giữ nguyên */
  z-index: 9999;
  overflow: hidden;
  padding: 20px 20px 20px 80px; /* lùi nội dung 70px */
  box-sizing: border-box;
  display: none;
}

#custom-menu.active {
  display: block;
}

/* ========== MAIN MENU LIST ========== */
#custom-nav > ul {
  transition: all 0.4s ease;
  transform: translateX(0);
  opacity: 1;
  position: relative;
  z-index: 2;
}

/* Khi submenu mở -> menu chính trượt sang phải & mờ dần */
#custom-nav > ul.hide {
  transform: translateX(8%);   /* chỉ trượt nhẹ */
  opacity: 0;                  /* mờ dần */
  pointer-events: none;        /* không cho click */
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease-out; /* hiệu ứng mượt */
}

/* Menu items */
#custom-menu ul {
  list-style: none;
  margin: 20px 0 0 0;
  padding: 0;
}

#custom-menu ul li {
  opacity: 0;
  transform: translateY(-20px);
  margin: 15px 0;
  animation: menuFadeIn 0.5s ease forwards;
}

#custom-menu ul li:nth-child(1) { animation-delay: 0.1s; }
#custom-menu ul li:nth-child(2) { animation-delay: 0.2s; }
#custom-menu ul li:nth-child(3) { animation-delay: 0.3s; }
#custom-menu ul li:nth-child(4) { animation-delay: 0.4s; }
#custom-menu ul li:nth-child(5) { animation-delay: 0.5s; }
#custom-menu ul li:nth-child(6) { animation-delay: 0.6s; }

#custom-menu ul li a {
  color: #c3b091; /* màu chữ */
  font-size: 22px;
  text-decoration: none;
  display: inline-block;
}

/* Hiệu ứng hiện từng item */
@keyframes menuFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes menuFadeOut {
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* ========== FIX DROPDOWN ICON (sát chữ, cách 15px) ========== */
#custom-menu .has-submenu {
  display: flex;
  align-items: center;
}

#custom-menu .has-submenu > a {
  display: inline-block;
  margin-right: 15px; /* khoảng cách chữ và icon */
}

#custom-menu .has-submenu .dropdown-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

#custom-menu .has-submenu .dropdown-icon svg {
  width: 14px;
  height: 14px;
  fill: #c3b091;
}


/* ========== SUBMENU M2 (LINH VỰC) ========== */

/* Submenu mặc định */
#mobile-submenu-linhvuc {
  position: absolute;
  top: 50px; /* chừa header/logo */
  left: 0;
  width: 100%;
  height: calc(100% - 70px);
  padding-left: 80px;
  box-sizing: border-box;
  display: none;        /* mặc định ẩn */
  opacity: 0;
  transform: translateX(100%);
  z-index: 9999;
}

/* Khi active → xuất hiện */
#mobile-submenu-linhvuc.active {
  display: block;
  animation: submenuSlideIn 0.45s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

/* Khi back → ẩn submenu */
#mobile-submenu-linhvuc.hide {
  animation: submenuSlideOut 0.35s ease forwards;
  animation-delay: 0.4s; /* chờ icon xoay xong mới ẩn */
}

/* Keyframes submenu */
@keyframes submenuSlideIn {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes submenuSlideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(30px);
  }
}

/* ========== NÚT BACK ========== */

/* Mũi tên mặc định */
#mobile-submenu-linhvuc .mobile-back-btn svg {
  margin-right: 8px;
  width: 22px;
  height: 22px;
  stroke: #c3b091;
  opacity: 1;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

/* Khi click back → xoay 90° + mờ dần */
#mobile-submenu-linhvuc .mobile-back-btn a.rotate-exit > svg {
  transform: rotate(90deg);
  opacity: 0;
}

/* (optional) Khi mở lại submenu → xoay ngược về 0° */
#mobile-submenu-linhvuc .mobile-back-btn svg.rotate-enter {
  transform: rotate(0deg);
  opacity: 1;
  transition: transform 0.4s ease, opacity 0.4s ease;
}


/* ========== DANH SÁCH ITEM ========== */
#mobile-submenu-linhvuc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#mobile-submenu-linhvuc ul li {
  margin: 15px 0;
}

#mobile-submenu-linhvuc ul li a {
  color: #c3b091;
  font-size: 22px;
  text-decoration: none;
  display: block;
  transition: color 0.2s ease;
}

#mobile-submenu-linhvuc ul li a:hover {
  color: #fff;
}


/* ========== GIÃN FONT M1 & M2 ========== */
#custom-menu ul li a,
#mobile-submenu-linhvuc ul li a {
  font-size: 20px;   /* đồng bộ font mobile */
  line-height: 2.2;  /* giãn dòng dễ đọc */
}