/*
style.css
*/

/* ---------- Tokens & base ---------- */
:root{
  --bg:#75bcff; --card:#fff; --ink:#111; --muted:#666; --brand:#ff6a00; --line:#ececec;
}
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--ink);

  background: hsla(209, 100%, 73%, .5);
}


/*
#BLUE COLOR PALLETE
*/

:root {
  /*white*/

  --clr-white: hsla(0, 100%, 100%, 1);
  --clr-white-8: hsla(0, 100%, 100%, .8);
  --clr-white-6: hsla(0, 100%, 100%, .6);
  --clr-white-4: hsla(0, 100%, 100%, .4);
  --clr-white-2: hsla(0, 100%, 100%, .2);
  
  /*black*/
  --clr-black: hsla(0, 0%, 0%, 1);
  --clr-black-8: hsla(0, 0%, 0%, .8);
  --clr-black-6: hsla(0, 0%, 0%, .6);
  --clr-black-4: hsla(0, 0%, 0%, .4);
  --clr-black-2: hsla(0, 0%, 0%, .2);




  /*blue*/
  --clr-blue-dark-1: #174066;
  --clr-blue-dark-2: #11304c ;
  --clr-blue-dark-3: #0b2033  ;
  --clr-blue: #3aa0ff;
  --clr-blue-light-1: #3aa0ff;
  --clr-blue-light-2: #75bcff ; /* hsla(209, 100%, 73%, 1) */
  --clr-blue-light-2: hsla(209, 100%, 73%, .5) ; /* hsla(209, 100%, 73%, 1) */
  
  --clr-blue-light-3: #d7ecff ;
}


/*
*/

:root {
  /*
  HEADER-CLR-ROOT
  */
  --header-bar--bg-clr: var(--clr-blue-light-2);
  --nav-toggle--bg-clr: var(--clr-blue);

  /*
  STEPS-CLR-ROOT
  */
  --steps--bg-clr: var(--clr-blue-light-2);
  --service-car--bg-clr: var(--clr-white-4);
  --service-car--border-clr: var(--clr-white-8);
  --svc-foot--border-clr: var(--clr-white-6);

  /*
  MODAL-CLR-ROOT
  */
  --ms-modal--bg-clr: var(--clr-white);
  --date-time-modal--bg-clr: var(--clr-white);
  
}
/**
==========================================================================
PAYOUT PADING CONTROL
==========================================================================
**/

:root
{
  --container--mxwidth: 1200px;
  --container--gap: 16px;
  --container--pad-r: 16px;
  --container--grid-template: 1fr 368px;
}

@media screen and (max-width: 900px)  {
  :root 
  {
    --container--grid-template: 1fr;
  }
}

@media screen and (min-width: 501px) and(max-width: 768px) 
{
  :root {
    --container--pad-r: .75rem;
  }
}

@media screen and (max-width: 500px)
{
  :root {
    --container--pad-r: .5rem;
  }
}


/* ---------- App header ---------- */
.brand{
  display:flex;
  gap:12px;
  align-items:center;
  padding:0;
  background:var(--card);
  border-radius: 3rem;
  background: transparent;
  background-color: transparent;
}
.brand .logo{
  width:40px;
  height:40px;
  background:var(--brand);
  color:#fff;
  display:grid; place-items:center; border-radius:50%; font-weight:700;
}

/* ---------- Page layout ---------- */
.container {
  display:grid;
  grid-template-columns: var(--container--grid-template);
  gap:var(--container--gap);
  padding:var(--container--pad-r);
  max-width:var(--container--mxwidth);
  margin:0 auto;
}

.container > .steps
{
  padding: 16px;

  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  padding:16px;

  /* [bestpractice] Không biến cả Step 1 thành vùng cuộn; chỉ thanh categories mới cuộn. */
  min-width: 0;           /* ✨ cực quan trọng trong Grid để con được tràn/scroll */

  background: var(--salmon);
  padding: .5rem;

  background: transparent;
  background-color: var(--steps--bg-clr);
}












.summary{
  background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px;
  position:sticky; top:16px; height:fit-content;
}
h1,h2,h3{ margin:8px 0 16px; }
h2{ font-size:20px; }
.muted{ color:var(--muted); font-size:13px; }

/* =============================================================================
   STEP 1 — CATEGORIES TABS (Horizontal scroll — CSS only)
   - Wrapper .tabs-scroller là phần cuộn
   - .tabs là flex hàng ngang, không xuống dòng
   ========================================================================== */
/* =============================================================================
   Step 1 Tabs — Canonical Horizontal Scroll (CSS-only, non-flex)
   Wrapper (.tabs-scroller) làm phần cuộn; .tabs chỉ là vỏ, .tab inline-block.
   Dùng white-space:nowrap + inline-block để đảm bảo overflow trên mọi trình duyệt.
   ============================================================================ */

.steps .tabs-scroller{
  display:block;
  width:100%;
  max-width:100%;

  /* BẮT BUỘC: cuộn ngang & không wrap (đặt !important để tránh bị CSS khác ghi đè) */
  overflow-x:auto !important;
  overflow-y:hidden !important;
  white-space:nowrap !important;

  -webkit-overflow-scrolling: touch;  /* inertial scroll iOS */
  touch-action: pan-x;
  scrollbar-width: none;               /* ẩn scrollbar Firefox */
  overscroll-behavior-x: contain;
  margin:0 0 8px;
  padding-bottom:0;
}
.steps .tabs-scroller::-webkit-scrollbar{ display:none; } /* ẩn scrollbar WebKit */

/* .tabs co theo nội dung để tạo overflow trong wrapper */
.steps .tabs{
  display:inline-block;                /* shrink-wrap content width */
  padding-bottom:8px;
  text-align: center;
  /* KHÔNG set overflow ở đây */
}

/* Mỗi .tab là inline-block để nằm trên một hàng, dễ tính toán overflow */
.steps .tab{
  display:inline-block;                /* quan trọng */
  vertical-align:top;
  margin-right:8px;

  white-space:nowrap;
  padding: .5rem 1rem .65rem;

  border-radius: 3rem;
  border:1px solid var(--line);
  cursor:pointer;

  background-color: #545454;
  background-color: hsla(0, 0%, 33%, .8);

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

}


.steps .tab:last-child{ margin-right:0; }

.steps .tab.active{
  color: white;
}

.steps .tab.active
{
  background: transparent;
  background-color: var(--black-6);
  background-color: var(--clr-blue-light-2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 2px groove var(--white-2);
}




















/* Ép overflow rõ ràng trên màn hình nhỏ */
@media (max-width: 900px){ .steps .tab { min-width:160px; } }
@media (max-width: 600px){ .steps .tab { min-width:180px; } }

/* (Tùy chọn test desktop rộng: bật tạm để đảm bảo overflow)
.steps .tab { min-width: 240px; }
*/






/* Panels */
.tab-panels .panel{ display:none; }
.tab-panels .panel.active{ display:block; }

/* ---------- Service list (cards) ---------- */
/* .service-card{
  display:flex; gap:12px; padding:12px; border-bottom:1px solid var(--line);
}
.service-card:last-child{ border-bottom:0; }
.service-card .thumb{
  width:64px; height:64px; border-radius:8px; object-fit:cover; border:1px solid var(--line);
}
.service-info{ flex:1; }
.service-actions{ display:flex; align-items:center; gap:8px; }
.qty{ display:flex; align-items:center; gap:6px; }
.qty,
.qty button
{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  text-align: center;
}
.qty button{ width:2rem; height:2rem; } */

/* ---------- Forms (Step 2 & 3) ---------- */
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
label{ display:block; font-size:14px; color:var(--muted); margin-bottom:4px; }
input, select, textarea{
  width:100%; border:1px solid var(--line); border-radius:8px; padding:10px 12px; background:#fff;
}
.hint{ color:var(--muted); margin-top:6px; }
.phone-field{ display:flex; gap:8px; align-items:center; }
.full{ grid-column:1/-1; }

/* ---------- Summary card ---------- */
.cart-list{
  display:grid; gap:8px; border:1px dashed var(--line); padding:8px; border-radius:8px; min-height:48px;
}
.cart-row{ display:flex; justify-content:space-between; align-items:center; }
.totals{ margin-top:8px; display:grid; gap:6px; }
.totals div{ display:flex; justify-content:space-between; }
.totals .grand{ font-weight:700; border-top:1px solid var(--line); padding-top:6px; }

/* ---------- Navigation ---------- */
.nav{ display:flex; gap:8px; margin-top:12px; }
button{
  padding:10px 12px; border-radius:8px; border:1px solid var(--line); background:#f8f8f8; cursor:pointer;
}
button.primary{ background:var(--brand); color:#fff; border-color:var(--brand); }

/* ---------- Step visibility ---------- */
.step{ display:none; }
.step.active{ display:block; }

/* ---------- Messages ---------- */
.msg{ margin-top:8px; color:var(--brand); min-height:20px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .container{ grid-template-columns: 1fr; }
  .summary{ position:static; }
}



/* v1.1.4 — Step 3 guards: disabled button + invalid fields */

/* Ensure any [hidden] is truly hidden, regardless of other rules */
[hidden] { display: none !important; }

button[disabled]{
  opacity:.5;
  cursor:not-allowed;
  filter:saturate(0.5);
}
input.invalid, select.invalid, textarea.invalid{
  border-color:#ff6a00; /* brand */
  box-shadow:0 0 0 2px rgba(255,106,0,.08);
}
.small-error{
  color:#ff6a00;
  font-size:12px;
  margin-top:4px;
}

/* === UI-Update 02: Category banner (cover) ========================= */
.cat-cover-wrap .cat-cover
{
  border-radius: 1rem;
}




/* ======================= v1.3.0 PATCH — Step 3 UI ======================= */
/*
==================================================
CODING- 🟠🍄🟠
#update-step-3
@2025-10-06
(!) chỉ thêm phần này thôi, nên không thêm file mới
==================================================
*/
.choice-line{
  display:flex; gap:20px; flex-wrap:wrap; align-items:center;
}
.choice-line label{
  display:flex; align-items:center; gap:8px; margin:0; cursor:pointer;
}
.choice-grid{
  display:flex; gap:16px; flex-wrap:wrap;
}
.choice-grid label{
  display:flex; align-items:center; gap:8px; margin:0; cursor:pointer;
}
.choice-line input[type="radio"],
.choice-grid input[type="checkbox"]{
  width:18px; height:18px;
}
.grid-2 > .full + .full{ margin-top:4px; }





/* 
//==================================================
// CODING-1 🟠🍄🟠 |  #update-V4 | @2025-10-07
//==================================================
*/
/* ====================================================================== */
/* v1.4.0 PATCH — Mobile Summary (<=768px) + Booking Summary modal        */
/* ====================================================================== */

:root
{
  /*
  z-index control for mobile-sumary and modal
  */
  --mobile-summary--index: 1203;
  --ms-overlay--index: 1200;
  --ms-modal--index: 1201;

  /*
  border-radius: 
  */
  --rad-075: .75rem;
  --mobile-banner--rad: var(--rad-075);
  --mobile-cta--rad: var(--mobile-banner--rad);

  /*
  ms-modal variable
  */
  --ms-modal--width: min(640px, 96vw);
  --ms-modal--min-height: 688px/*340px*/;
  --ms-modal--bottom: 0/* 0 | .5rem| 340px*/;

  /*
  <!-- Thanh CTA: TOTAL (click mở modal) + nút điều hướng -->
  */
  --mobile-cta--pad: .5rem;
  --mobile-cta--gap: .5rem;

  --mobile-total--pad: .25rem .75rem;

  /*
  mobile-sumary variable
  */
  --mobile-summary--height: 6.8rem; /* hoặc 108px nếu muốn chính xác */

  /*
  -- Fonts Size + Font Weight:
  */
  --total-amount--fs: 1rem;
  --total-amount--fw: 700;
  --total-amount--clr: #3aa0ff;

  /*
  mobile-actions
  (!) này là các nút hành động nhé. Và nó là ID
  */
  --mobile-actions--gap: .5rem; /*flex, chứa các nút bên dưới*/

  --mobile-prev--fs: 1rem;
  --mobile-prev--fw: 700;
  --mobile-prew--clr: white;

  --mobile-next--fs: 1rem;
  --mobile-next--fw: 700;
  --mobile-next--clr: white;

  --mobile-book--fs: 1rem;
  --mobile-book--fw: 700;
  --mobile-book--clr: white;

}

/* (không hiện thị <aside class="summary"> ở max-width 768px) */
@media screen and (max-width: 768px) 
{
  .summary
  {
    display: none!important;

  }
}
.summary 
/* (không hiển thị trên desktop) */
.mobile-summary{ display:none; } /* desktop ẩn hẳn */


/* (không hiện thị ms-modal ở min-width 769px)
(!) chỉ là dữ phòng, bình thường cũng sẽ không hiện thị, 
Tuy nhiên, nếu USER dùng DEV Tool, Họ từ mobile => Desktop ==> Phần này bị lỗi
==> chủ động ẩn để an toàn
*/
@media screen and (min-width: 769px)
{
  .modal-overlay,
  .ms-modal
  {
    display: none;
  }
}


@media (max-width:768px){
  .mobile-summary{
    position:fixed; left:0; right:0; bottom:0;
    z-index: var(--mobile-summary--index); /* cao hơn Step 2 modal (1001) */
    display:block;
    pointer-events:none; /* con bên trong tự bật */

    padding: 1rem 1rem .5rem; /*tránh bị tràn viền ++ đưa sát xuống dưới đáy 1 chút (!) cách đáy .5rem*/
  }
  .mobile-summary *{ pointer-events:auto; }

  .mobile-banner{
    /* Banner cảnh báo/thông tin (ẩn khi không cần)*/
    margin: .5rem auto 0;

    background:#ffb172; color:#111; padding:.75rem 1rem;
    border-top:1px solid rgba(0,0,0,.06);
    border-bottom:1px solid rgba(0,0,0,.06);

    border-radius: var(--mobile-banner--rad);
  }

  .mobile-banner{
    /* Banner cảnh báo/thông tin (ẩn khi không cần)*/
    /* margin: .5rem auto 0; */

    color:#111;
    padding:.25rem .5rem .35rem;
    
    
    background: hsla(27, 100%, 72%, .5);
    background: hsla(25, 100%, 50%, .3);

    
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);

    border-top:1px solid rgb(0 0 0 / 22%);
    border-bottom: 2px solid hsla(0, 100%, 100%, .6);

    border-top: 2px solid hsla(25, 100%, 50%, .5);

    text-align: center;
    border-radius: 1.5rem;
    overflow: hidden;
    width: 80%;
    min-width: 280px;
    max-width: 380px;
    
    margin: 0 auto;

    font-size: .9rem;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
  }











  .mobile-total{
    flex:1;
    border-radius:12px;
    border:1px solid #2b2b2b;
    background:#2a2a2a;
    color:#fff;
    text-align:left;
    padding:var(--mobile-total--pad);
  }

  .total-label .bubble{
    display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%;
    background:#3a3a3a; border:1px solid #4a4a4a; font-size:12px;
  }

  
}

/* ===== Booking Summary modal (mobile) ===== */
.ms-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  z-index:var(--ms-overlay--index);
}

/* Container modal: bám đáy, giới hạn theo viewport */
.ms-modal{
  z-index: var(--ms-modal--index);

  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  
  width:var(--ms-modal--width);
  
  /* v1.4.1 PATCH — đảm bảo phù hợp mọi thiết bị, không “cao hơn” 75vh */
  max-height:75vh; 
  min-height: min(var(--ms-modal--min-height), 75vh); /* giữ min nhưng không vượt 75vh */

  border-radius:16px 16px 0 0;
  overflow:hidden;
  
  margin-bottom: var(--ms-modal--bottom);

  background: transparent;
  background-color: var(--ms-modal--bg-clr);
  box-shadow:0 -16px 60px rgba(0,0,0,.4); display:flex; flex-direction:column;
}

.ms-modal[hidden], .ms-overlay[hidden]{ display:none !important; }

/* Header modal */
.ms-head { 
  display:flex; justify-content:space-between; align-items:center; 
  padding:14px 16px; border-bottom:1px solid var(--line); 
  background: transparent;
  background-color: transparent;
}
.ms-close{ border:none; background:transparent; font-size:22px; padding:6px; cursor:pointer; }

/* Thân modal (cột): CHO PHÉP co để items có thể scroll */
.ms-body{ 
  padding:14px 16px; 
  display:flex; flex-direction:column; gap:12px; 
  height:100%; 
  min-height:0;              /* v1.4.1 PATCH — QUAN TRỌNG: cho child co/scroll */
  background: transparent;
  background-color: transparent;
}

/* Danh sách items: chiếm phần còn lại, là scroll container */
.ms-items{
  flex:1 1 auto;            /* v1.4.1 PATCH — cho phép co và chiếm phần còn lại */
  min-height:0;             /* v1.4.1 PATCH — bắt buộc trong layout flex để cho scroll */
  overflow-y:auto; 
  overscroll-behavior: contain; 
  -webkit-overflow-scrolling: touch; 
  touch-action: pan-y;

  display:grid; gap:12px;
  padding-right:4px;        /* tránh “kẹt” scrollbar; tuỳ chỉnh 0→8px tuỳ UI */
}

/* Item */
.ms-item{
  border:1px solid var(--line); border-radius:12px; padding:12px;
  display:flex; align-items:center; gap:12px; background:#fff;
}
.ms-item .ms-info{ flex:1; }
.ms-item .ms-title{ font-weight:600; margin-bottom:4px; }
.ms-item .ms-price{ color:var(--muted); font-size:13px; }

/* Qty control */
.ms-qty{ display:flex; align-items:center; gap:8px; }
.ms-qty button{ width:32px; height:32px; border-radius:8px; }

/* Totals (luôn nhìn thấy, cố định dưới phần body) */
.ms-totals{ 
  border-top:1px solid var(--line); 
  padding-top:8px; 
  display:grid; gap:6px;
  background: var(--card);

  /* Để chắc chắn nhìn thấy, không bị che bởi mobile-summary*/
  margin-bottom: var(--mobile-summary--height); 
}
.ms-totals div{ display:flex; justify-content:space-between; }
.ms-totals .grand{ font-weight:700; }

/* (Optional) khi body bị lock scroll bởi JS: tắt bounce nền */
body.ms-scroll-locked{
  overscroll-behavior: none;
}
/*
//==================================================
// ENDING-1 🟠🍄🟠 |  #update-V4 | @2025-10-07
//==================================================
*/

/* v1.4.4 — Always hide mobile-banner when Booking Summary modal is open */
.ms-open #mobile-banner { display: none !important; }


/*
//==================================================
// CODING-1 🟠🍄🟠 |  #update-V5.1 | @2025-10-08
//==================================================
// V1.5.0 — Header Menu (sticky) + Important Information Bar
// - Semantic, responsive, hover/active states, CTA pinned to the right
// - Works with keyboard & screen readers
*/
:root{
  --header-z: 1300;                 /* cao hơn nội dung, thấp hơn overlay modal */
  --header-pad-x: 16px;
  --header-pad-y: 10px;
  --nav-gap: 10px;
  --nav-radius: 2rem;               /* yêu cầu: border-radius 2rem cho nav items */
  --info-bg: ##ffb172;
  --info-ink: #111;
}

/* Sticky header */
.site-header{
  position: sticky;
  top: 0;
  z-index: var(--header-z);
  border: none;

  background-color: transparent;
  background: transparent;
}

/* Main nav bar */
.nav{
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  padding: var(--header-pad-y) var(--header-pad-x);
  max-width: 1200px;
  margin: 0 auto;
}

/* Logo area */
.nav-logo{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}
#nav-logo-img{
  width: 36px; height: 36px; border-radius: 999px; object-fit: contain;
}

/* Nav list (scrollable row on small screens) */
.nav-list{
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nav-list::-webkit-scrollbar{ display:none; }

/* Nav items */
.nav-list .nav-link{
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--nav-radius);
  text-decoration: none;
  color: inherit;
  background: #f6f6f6;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.nav-list .nav-link:hover,
.nav-list .nav-link:focus{
  background: #eee;
  outline: none;
}
.nav-list .nav-link.active,
.nav-list .nav-link[aria-current="page"]{
  background: #111;
  color: #fff;
}

/* CTA pinned to the right */
.nav-cta{
  margin-left: auto;                /* luôn nằm cuối bên phải */
  padding: 10px 16px;
  border-radius: var(--nav-radius);
  background: var(--brand);
  border: 1px solid var(--brand);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

/* Important Information Bar */
.info-bar{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 12px;
  background: var(--info-bg);
  color: var(--info-ink);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
  font-size: 14px;
  line-height: 1.35;

}
.info-bar > span{
  max-width: 1200px;                /* giữ text gọn trong layout */
  margin: 0 auto;
  display: inline-block;
}

/* Small screens */
@media (max-width: 600px){
  .nav{ gap: 8px; }
  .nav-cta{ padding: 9px 14px; }
}
/*
//==================================================
// ENDING-1 🟠🍄🟠 |  #update-V4 | @2025-10-08
//==================================================
*/




/*
//==================================================
// CODING-1 🟠🍄🟠 |  #update-V5.1 | @2025-10-09
//==================================================
*/
/* =============================================================================
   FosLaundry styles (v1.5.0)
   CHANGELOG
   - v1.5.0: Header Menu (sticky, SEO <nav>), dropdown (☰/✕), overlay blur,
             min/max width via CSS vars, brand-left & toggle-right (mobile),
             Important Info Bar (config on/off).
   - v1.1.3..v1.4.x: (giữ nguyên) Tabs/Steps/Modal/mobile-summary...
   ========================================================================== */

/* ---------- Tokens & base (giữ nguyên phần trước đó) ---------- */
:root{
  /* --bg:#fafafa; --card:#fff; --ink:#111; --muted:#666; --brand:#ff6a00; --line:#ececec; */

  --light-pink: hsla(0, 100%, 87%, 1);
  --header-bar--bg-clr: var(--light-pink);


  /* v1.5.0 — dropdown width range */
  --nav-dd-min: 260px;
  --nav-dd-max: 300px;

  /* z-index */
  /* --site-header-z: 1204;
  --nav-overlay-z: 1300;
  --nav-dropdown-z:1301; */

  --site-header-z: 1400;  /* ↑ header cao hơn overlay */
  --nav-overlay-z: 1200;  /* ↓ overlay thấp hơn header */
  --nav-dropdown-z: 1401; /* dropdown trên header một chút */
}

/* SR-only utility */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ======================= v1.5.0 — Sticky Header ======================= */
.site-header{
  position:sticky; top:0; z-index:var(--site-header-z);
  padding: 1rem;
}
.header-bar{
  max-width:1200px;
  margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  position:relative;
}
.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.brand-logo{
  width:36px; height:36px; object-fit:contain; display:block;
}
.brand-name{ font-weight:700; font-size:18px; white-space:nowrap; }

/* Nav inline (desktop) */
.primary-nav{ display:none; }
.nav-inline{
  display:flex; align-items:center; gap:16px; list-style:none; margin:0; padding:0;
}
.nav-inline a{
  display:inline-block; padding:8px 12px; border-radius:999px;
  text-decoration:none; color:var(--ink);
}
.nav-inline a:hover{ background:#f4f4f4; }

/* Toggle (mobile) — luôn nổi bật, border-radius: 2rem */
.header-bar .nav-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:50px; height:30px;
  
  padding:0 14px; gap:8px;
  border-radius: 3rem;
  
  color:#fff;
  cursor:pointer;

  border: 2px solid var(--white-4);
  background: var(--nav-toggle--bg-clr);
  background-color: var(--nav-toggle--bg-clr);
}
.nav-toggle .icon-close{ display:none; font-size:20px; line-height:1; }
.nav-toggle .icon-burger{ display:inline-block; font-size:18px; line-height:1; }
.nav-toggle[aria-expanded="true"] .icon-burger{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-close{ display:inline-block; }

/* Dropdown + Overlay (mobile) */
.nav-overlay{
  position:fixed; inset:0; background:hsla(0,0%,0%,.4);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  z-index:var(--nav-overlay-z);
}
.nav-dropdown{
  position:absolute;
  right:16px;
  top:calc(100% + 8px);
  
  width:clamp(var(--nav-dd-min), 28vw, var(--nav-dd-max));
  background:#fff; border:1px solid var(--line);
  border-radius:1rem;
  box-shadow:0 14px 48px rgba(0,0,0,.15);
  z-index:var(--nav-dropdown-z); overflow:hidden;
}
.nav-dropdown[hidden], .nav-overlay[hidden]{ display:none !important; }

.nav-list{ list-style:none; margin:0; padding:8px; }
.nav-list li a{
  display:block; padding:12px 16px; border-radius:1.5rem; text-decoration:none; color:var(--ink);
}
.nav-list li a:hover{ background:#f6f6f6; }

/* Info Bar */
.info-bar{
  display:block;
  margin: .5rem auto;
  padding:8px 16px; border-top:1px solid var(--line);
  border-radius: 4px;
}
.info-bar p{
  max-width:1200px; margin:0 auto; text-align:center; line-height:1.4;
  color:#4a3b2a;
}

/* ====== Responsive ====== */
@media (min-width: 769px){
  .primary-nav{ display:block; }
  .nav-toggle{ display:none; }
  /* Desktop không dùng dropdown/overlay */
  .nav-overlay, .nav-dropdown{ display:none !important; }
}

/*
//==================================================
// ENDING-1 🟠🍄🟠 |  #update-V5 | @2025-10-09
//==================================================
*/


/* ==================== v1.5.1 — Header sticky refinements ====================
✅ Vấn đề 1 — Cố định .header-bar (info-bar không cố định)
================================================================================
*/

/* 1) site-header trở lại static để info-bar cuộn theo nội dung */
.site-header{
  position: static; /* override v1.5.0 sticky */
}

/* 2) chỉ sticky riêng header-bar */
.header-bar{
  position: sticky;
  top: 0;
  z-index: calc(var(--site-header-z) + 2); /* trên overlay */
}


/* v1.5.1 — ensure no background scroll while nav open
Patch CSS nhỏ để đảm bảo không trôi nền khi khoá
*/
body.nav-scroll-locked{
  overscroll-behavior: none;
}

/*
✅ Vấn đề 4 — Vị trí & layout của nav-dropdown
v1.5.1 — vertical list inside dropdown (avoid horizontal flex rules elsewhere) */
.nav-dropdown .nav-list{
  display: block;              /* dọc */
  max-height: min(60vh, 480px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-dropdown .nav-list li{ display:block; }
.nav-dropdown .nav-list li + li{ margin-top: 4px; }



/* ==================== v1.5.2 — Fix sticky header-bar ====================
v1.5.2 — Fix “Cố định .header-bar, info-bar cuộn bình thường”
*/
/* Ý tưởng:
   - .header-bar: cố định (fixed) trên cùng, full-width, z-index cao.
   - .site-header: chèn khoảng trống bằng padding-top = chiều cao .header-bar (CSS var).
   - info-bar vẫn là phần nội dung bên trong site-header nên cuộn bình thường.
*/

/* Chèn khoảng trống dưới header-bar để không đè nội dung */
.site-header{
  position: relative;                  /* đảm bảo padding-top có hiệu lực */
  padding-top: var(--header-bar-h, 0px);
}

/* Cố định riêng thanh header-bar (logo/brand/nav/toggle) */
.header-bar{
  position: fixed;
  top: 0;
  top: .25rem; /*? BUỘC CÓ, VÌ LÀ FIXED */
  
  left: 0;
  right: 0;

  max-width: 95vw;
  z-index: calc(var(--site-header-z, 1400) + 2);

  background: var(--header-bar--bg-clr);
  background-color: var(--header-bar--bg-clr);
  border-radius: 3rem;
  padding: .5rem .75rem;

  /* giữ layout đẹp + canh giữa */

  /* phần .header-bar đã có max-width:1200px; margin:auto trong file của bạn
     nên thêm left/right:0 ở trên sẽ giúp canh giữa khi fixed. */
}

/* Đảm bảo overlay không đè lên header-bar (đã làm ở V5.1, giữ lại) */
:root{
  --site-header-z: 1400;
  --nav-overlay-z: 1200;
  --nav-dropdown-z: 1401;
}


/*
//==================================================
// CODING-1 🟠🍄🟠 |  #update-V6.1 | @2025-10-10
//==================================================
*/
/* =======================================================================
   v1.6.1 — Sticky Category Tabs (under header)
   - Chỉ “dính” phần thanh categories, không dính cả Step 1.
   - Vẫn giữ horizontal scroll (.tabs-scroller) như cũ.
   - Đặt z-index thấp hơn header-bar để không che menu.
   -----------------------------------------------------------------------
   Tinh chỉnh nhanh:
   --tabs-sticky-top: khoảng cách so với mép trên viewport (mặc định 8px).
   Bạn muốn sát header hơn thì giảm xuống 4px hoặc 0px.
   ======================================================================= */

:root{
  --tabs-sticky-top: 60px;       /* “nằm phía dưới header-bar một chút” */
  --tabs-sticky-z:  1202;       /* < header (1400+) ; > nội dung thường */
}

/* Wrapper “dính” – chỉ dùng cho thanh tabs */
.sticky-category-tabs-scroller{
  position: sticky;
  top: var(--tabs-sticky-top);
  z-index: var(--tabs-sticky-z);
  background: var(--card);
  padding: 6px 0 4px;            /* tạo nền trắng dưới khi dính */
  margin: 0 0 8px;               /* khoảng cách dưới thanh tabs */
  /* Bo nhẹ & bóng khi đang dính (thêm class .is-stuck bằng JS) */
  border-radius: 12px;
}

/* Hiệu ứng khi đang dính: nhìn “nổi” một chút */
.sticky-category-tabs-scroller.is-stuck{
  padding: 0; /*Loại bỏ padding khi stuck*/
  
  /* chuyển sang trạng thái transparent khi stuck */
  background-color: transparent;
  background: transparent;
}

.steps .sticky-category-tabs-scroller.is-stuck > .tabs-scroller 
{
  background-color: red; 
  margin: 0;
  /* chuyển sang trạng thái transparent khi stuck */
  background-color: transparent;
  background: transparent;
}

.steps .sticky-category-tabs-scroller.is-stuck  .tabs
{
  padding-bottom: 0; /*loại bỏ padding bottom khi stuck*/
}

/* Giữ nguyên cơ chế cuộn ngang cũ ở .tabs-scroller */
/*
//==================================================
// ENDING-1 🟠🍄🟠 |  #update-V6.1 | @2025-10-10
//==================================================
*/

.header-bar{
    background: transparent;
    background-color: var(--clr-blue-light-2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px groove var(--white-2);
}



/*
//==================================================
// CODING-1 🟠🍄🟠 |  #update-V6.4 | @2025-10-13
//==================================================
// V1.6.4 — Modal head (icon + text)
*/
.modal-head h3,
.modal-subtitle {
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-head h3 img.modal-icon,
.modal-subtitle img.modal-icon {
  width: 40px;
  height: 40px;
  aspect-ratio: 1/1;
  object-fit: contain;
  display: inline-block;
}