/* ============================================================
   GỌI ÉN — CSS CHO HEADER MẶC ĐỊNH CỦA FLATSOME
   Bản 1.0 · 01/09/2026 · màu chính #006360

   Tệp này KHÔNG tạo ra header. Nó chỉ tô lại cái header mà
   Flatsome Header Builder đã dựng: LOGO · Main Menu · Button 2 · Button 1.

   Vì Flatsome ghi một số thuộc tính thẳng vào thẻ style trong <head>
   (chiều cao, màu nền, cỡ chữ menu), một số dòng dưới đây buộc phải
   dùng !important. Chỗ nào cần thì có ghi chú ngay bên cạnh.

   BA VIỆC NÊN LÀM TRONG CUSTOMIZER TRƯỚC (đỡ phải đè bằng CSS):
     Header > Main  : Height 74, Sticky Height 64, Background = trong suốt
     Typography     : Font chính Manrope
     Header > Nav   : Nav Style = "Simple", bỏ hiệu ứng gạch chân mặc định
   ============================================================ */

:root{
  --g-brand:#006360;
  --g-brand-2:#00847E;
  --g-brand-3:#00423F;
  --g-mint:#5FDCC4;
  --g-ink:#12211F;
  --g-ink-2:#3C4C4A;
  --g-gold:#FFC53D;
  --g-gold-2:#F0A81C;
  --g-gold-ink:#3E2D06;
}

/* ------------------------------------------------------------
   1. NỀN HEADER — mặt kính sáng
   Flatsome vẽ nền bằng lớp .header-bg-color nằm dưới cùng,
   nên phải tô vào lớp đó chứ không phải vào #header.
   ------------------------------------------------------------ */

#header .header-main{
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}

#header .header-main .header-bg-color,
#header .header-wrapper .header-bg-color{
  background:linear-gradient(180deg, rgba(233,244,243,.88) 0%, rgba(255,255,255,.78) 100%) !important;
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
}

#header .header-main{
  border-bottom:1px solid rgba(0,99,96,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92), 0 12px 34px -22px rgba(0,42,40,.45);
}

/* vệt sáng mảnh ở mép dưới, giống các khối kính trong trang */
#header .header-main::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;z-index:2;
  background:linear-gradient(90deg, transparent, rgba(0,99,96,.30), transparent);
}
#header .header-main{position:relative}

/* khi cuộn xuống, header dính lại thì đặc hơn một chút cho dễ đọc */
#header.has-sticky .stuck .header-main .header-bg-color,
.header-wrapper.stuck .header-bg-color{
  background:linear-gradient(180deg, rgba(240,248,247,.95) 0%, rgba(255,255,255,.90) 100%) !important;
}
.header-wrapper.stuck .header-main{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 10px 28px -18px rgba(0,42,40,.40);
}

/* bỏ đường kẻ mặc định của hai hàng trên và dưới nếu để trống */
#header .header-top,
#header .header-bottom{border:0}

/* ------------------------------------------------------------
   2. LOGO
   Dùng ảnh thì chỉ cần khống chế chiều cao.
   Dùng logo chữ (Customizer bỏ trống ảnh) thì phần dưới tô màu chữ.
   ------------------------------------------------------------ */

#logo img{max-height:42px;width:auto}
.header-wrapper.stuck #logo img{max-height:36px}

#logo a{
  color:var(--g-brand);
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-weight:800;letter-spacing:-.025em;font-size:23px;line-height:1.1;
}
#logo a:hover{color:var(--g-brand-3)}

/* ------------------------------------------------------------
   3. MENU CHÍNH — desktop
   ------------------------------------------------------------ */

#header .header-nav > li > a,
#header .nav > li > a{
  color:var(--g-ink-2);
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;
  padding:9px 13px;border-radius:10px;border:1px solid transparent;
  transition:color .18s ease, background .18s ease, border-color .18s ease;
}

#header .header-nav > li > a:hover,
#header .nav > li > a:hover{
  color:var(--g-brand);
  background:rgba(255,255,255,.72);
  border-color:rgba(0,99,96,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}

/* mục đang mở */
#header .nav > li.current-menu-item > a,
#header .nav > li.current-menu-parent > a,
#header .nav > li.current-menu-ancestor > a,
#header .nav > li.active > a{
  color:var(--g-brand);font-weight:700;
  background:linear-gradient(180deg, rgba(0,99,96,.13), rgba(0,99,96,.07));
  border-color:rgba(0,99,96,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}

/* Flatsome vẽ một gạch chân chạy dưới mục menu — tắt đi vì đã có nền pill */
#header .nav > li > a:before,
#header .nav-line-bottom > li > a:before,
#header .nav-line-grow > li > a:before,
#header .nav-line > li > a:before{display:none !important}

/* mũi tên của mục có menu con */
#header .nav > li.menu-item-has-children > a:after{
  color:currentColor;opacity:.55;margin-left:6px;
}

/* khoảng cách giữa các mục, đè lên nav-spacing-* của Flatsome */
#header .header-nav > li{margin:0 1px !important}

/* ------------------------------------------------------------
   4. MENU CON (dropdown)
   ------------------------------------------------------------ */

#header .nav-dropdown{
  padding:8px;border:1px solid rgba(0,99,96,.14);border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88));
  -webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 24px 56px -22px rgba(0,42,40,.42);
  min-width:220px;
}
#header .nav-dropdown > li > a{
  color:var(--g-ink-2);font-size:14.5px;font-weight:600;
  padding:10px 12px;border-radius:10px;border:0;
}
#header .nav-dropdown > li > a:hover{color:var(--g-brand);background:rgba(0,99,96,.08)}
#header .nav-dropdown li.current-menu-item > a{color:var(--g-brand);background:rgba(0,99,96,.10)}
#header .nav-dropdown-default > li{border:0}
#header .nav-dropdown:before,
#header .nav-dropdown:after{display:none}

/* ------------------------------------------------------------
   5. HAI NÚT BÊN PHẢI
   Button 1 = nút chính, nền xanh đặc  (đặt "Đồng hành cùng Én" ở đây)
   Button 2 = nút phụ, viền mảnh       (ví dụ "Tải ứng dụng")
   Nếu anh muốn ngược lại thì đổi số 1 và 2 trong hai khối dưới đây.
   ------------------------------------------------------------ */

#header li.header-button-1 > a.button,
#header li.header-button-1 > a{
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  height:auto;min-height:0;line-height:1.2;
  padding:11px 19px !important;          /* Flatsome ghi padding vào style trong <head> */
  border-radius:12px !important;
  font-size:14.5px;font-weight:800;letter-spacing:0;text-transform:none;
  color:#fff !important;
  border:1px solid rgba(0,66,63,.85) !important;
  background:linear-gradient(180deg,#00817B 0%,#006360 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30), 0 10px 22px -10px rgba(0,99,96,.70);
  transition:transform .12s ease, box-shadow .18s ease, background .18s ease;
  margin:0;
}
#header li.header-button-1 > a:hover{
  background:linear-gradient(180deg,#00938C 0%,#00716D 100%) !important;color:#fff !important;
}
#header li.header-button-1 > a:active{transform:translateY(1px)}

#header li.header-button-2 > a.button,
#header li.header-button-2 > a{
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  height:auto;min-height:0;line-height:1.2;
  padding:11px 17px !important;
  border-radius:12px !important;
  font-size:14.5px;font-weight:700;letter-spacing:0;text-transform:none;
  color:var(--g-brand) !important;
  border:1px solid rgba(0,99,96,.22) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.70)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 8px 20px -12px rgba(0,42,40,.28);
  transition:transform .12s ease, border-color .18s ease, background .18s ease;
  margin:0;
}
#header li.header-button-2 > a:hover{
  color:var(--g-brand-3) !important;border-color:var(--g-brand) !important;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.84)) !important;
}
#header li.header-button-2 > a:active{transform:translateY(1px)}

#header li.header-button-1,
#header li.header-button-2{margin-left:9px}

/* nếu muốn nút chính dùng màu phụ vàng thì bỏ chú thích khối này
#header li.header-button-1 > a{
  color:var(--g-gold-ink) !important;
  border-color:rgba(120,86,8,.32) !important;
  background:linear-gradient(180deg,var(--g-gold) 0%,var(--g-gold-2) 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 12px 26px -12px rgba(255,175,20,.60);
}
#header li.header-button-1 > a:hover{
  color:var(--g-gold-ink) !important;filter:brightness(1.06);
  background:linear-gradient(180deg,var(--g-gold) 0%,var(--g-gold-2) 100%) !important;
}
*/

/* ------------------------------------------------------------
   6. MÀN HÌNH HẸP — nút ba gạch và menu trượt
   ------------------------------------------------------------ */

/* nút ba gạch */
#header .mobile-nav .nav-icon > a,
#header li.nav-icon > a{
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  color:var(--g-brand);
  border:1px solid rgba(0,99,96,.20);
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.66));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 4px 12px -6px rgba(0,42,40,.3);
}
#header li.nav-icon > a .icon-menu{font-size:19px}

/* bảng menu trượt ra */
.off-canvas-left .mfp-content,
.off-canvas-right .mfp-content,
#main-menu.mfp-content{
  background:linear-gradient(160deg,#002A28 0%,#00504D 56%,#003432 100%);
}
#main-menu .sidebar-menu,
.off-canvas .sidebar-menu{padding:18px 14px}

#main-menu .nav-sidebar > li > a,
.off-canvas .nav-sidebar > li > a,
#main-menu .nav-vertical > li > a{
  color:rgba(255,255,255,.86);
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px;font-weight:700;text-transform:none;letter-spacing:0;
  padding:13px 14px;border-radius:12px;border:0;
}
#main-menu .nav-sidebar > li > a:hover,
.off-canvas .nav-sidebar > li > a:hover{color:#fff;background:rgba(255,255,255,.09)}

#main-menu .nav-sidebar > li.current-menu-item > a,
#main-menu .nav-sidebar > li.current-menu-parent > a,
.off-canvas .nav-sidebar > li.current-menu-item > a{
  color:var(--g-mint);
  background:linear-gradient(180deg, rgba(95,220,196,.16), rgba(95,220,196,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}

#main-menu .nav-sidebar > li,
.off-canvas .nav-sidebar > li{border-bottom:1px solid rgba(255,255,255,.08)}
#main-menu .nav-sidebar > li:last-child{border-bottom:0}

/* nút đóng của bảng trượt */
.off-canvas .mfp-close,
#main-menu .mfp-close{color:rgba(255,255,255,.75);opacity:1}
.off-canvas .mfp-close:hover{color:#fff}

/* hai nút nếu được kéo vào hàng mobile */
@media (max-width:849px){
  #header li.header-button-1 > a,
  #header li.header-button-2 > a{padding:9px 15px !important;font-size:13.5px}
  #logo img{max-height:36px}
  #logo a{font-size:20px}
}

/* ------------------------------------------------------------
   7. MÁY KHÔNG HỖ TRỢ LÀM NHOÈ NỀN
   ------------------------------------------------------------ */
@supports not ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){
  #header .header-main .header-bg-color,
  #header .header-wrapper .header-bg-color{background:#EDF6F5 !important}
  #header .nav-dropdown{background:#fff}
}