/* ==========================================================================
   FOXY M.D COSMETICS & CLINIC
   Thiết kế: bám hệ hình của bản Canva Nam An (kem – hồng phấn – nâu vàng,
   serif cổ điển, khung bo "cánh hoa", dải ruy-băng & sóng).
   Cấu trúc trang: theo yêu cầu riêng của Foxy.
   ========================================================================== */

/* ============ FONT CHÍNH CHUẨN BỆNH VIỆN THẨM MỸ NAM AN ============ */
@font-face {
  font-family: 'Beautique-Display';
  src: url('../fonts/Beautique-Display/BeautiqueDisplay-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Beautique-Display';
  src: url('../fonts/Beautique-Display/BeautiqueDisplay-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Beautique-Display';
  src: url('../fonts/Beautique-Display/BeautiqueDisplay-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  /* BẢNG MÀU THƯƠNG HIỆU (user chốt 10/8):
     kem #FFF3DC · champagne #F6E2B6 · gold ấm #D4AF37 · vàng đỏ đậm #8B4513 · navy #0A2463
     LUẬT NỀN (user 10/8): nền = KEM NHẠT chủ đạo, luôn GRADIENT — không đổ đơn sắc.
     --brown giữ TÊN cũ (cả file đang tham chiếu) nhưng giá trị = gold đậm hơn
     #D4AF37 một nấc để chữ/nút trên nền sáng còn đọc được. */
  --brown:        #B8912A;
  --brown-dark:   #8B4513;
  --brown-deep:   #0A2463;
  --tan:          #D4AF37;
  --tan-soft:     #FFF3DC;
  --tan-line:     #EBD9A9;
  --gold-ring:    #D4AF37;

  /* Nền — kem RẤT nhạt gần trắng (user chỉnh 10/8: "kem nhạt hơn nữa gần màu trắng"),
     kem brand #FFF3DC chỉ là điểm rơi ĐẬM NHẤT cuối gradient */
  --blush:        #FFF3DC;
  --blush-2:      #FFFAF0;
  --cream:        #FFF8E9;
  --white:        #FFFFFF;

  /* Chữ */
  --ink:          #0A2463;
  --body:         #6B6350;
  --muted:        #9C927B;
  --line:         #F0E5C9;

  --font-display: "Beautique-Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif:        "Beautique-Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sans:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-pill: 999px;
  --r-petal: clamp(48px, 9vw, 130px);

  --shadow-sm: 0 2px 10px rgba(139,69,19,.06);
  --shadow-md: 0 12px 34px rgba(139,69,19,.10);
  --shadow-lg: 0 26px 64px rgba(139,69,19,.14);

  --wrap: 1200px;
  --gut: clamp(16px, 4vw, 40px);
  --header-h: 80px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  overflow-x: clip;
}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--sans); font-size:16px; font-weight:400; line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x: clip;
  max-width: 100vw;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:500; line-height:1.24; margin:0 0 .5em; color:var(--ink); }
h1{ font-size:clamp(2.1rem, 4.4vw, 3.5rem); }
h2{ font-size:clamp(1.65rem, 3.1vw, 2.5rem); }
h3{ font-size:clamp(1.1rem, 1.8vw, 1.42rem); }
p{ margin:0 0 1em; color:var(--body); font-weight:300; }
ul{ margin:0; padding:0; list-style:none; }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block: clamp(52px, 8vw, 100px); overflow-x: clip; }
.section--tight{ padding-block: clamp(36px, 5vw, 66px); }
/* LUẬT NỀN: kem RẤT nhạt gần trắng + gradient, không đơn sắc (user 10/8) */
.section--cream{ background:linear-gradient(180deg, #FFFFFF 0%, #FFFAF0 55%, #FFF5E4 100%); }
.section--white{ background:linear-gradient(180deg, #FFFFFF 0%, #FFFDF8 100%); }
.section--blush{ background:linear-gradient(180deg, #FFFBF2 0%, #FFF3DC 100%); }

.eyebrow{
  display:inline-block; font-size:.7rem; letter-spacing:.28em; text-transform:uppercase;
  font-weight:500; color:var(--brown); margin-bottom:.85rem;
}
.section-head{ text-align:center; max-width:720px; margin:0 auto clamp(30px,5vw,56px); }
.section-head h2{ margin-bottom:.3em; }
.section-head p{ font-size:1rem; }
.lead{ font-size:1.05rem; color:var(--body); }
.text-gold, .text-royal{ color:var(--brown); }

/* Tiêu đề 2 dòng kiểu Nam An: dòng 2 nghiêng, màu nâu vàng */
.title-2{ margin-bottom:.45em; }
.title-2 em{ display:block; font-style:italic; color:var(--brown); font-size:.86em; margin-top:.1em; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:.9em 2.1em; border-radius:var(--r-pill); font-weight:500; font-size:.92rem;
  letter-spacing:.02em; transition:.22s ease; white-space:nowrap; text-align:center;
}
.btn--gold, .btn--royal{ background:linear-gradient(135deg,#D4AF37 0%,#B8912A 100%); color:#fff; box-shadow:0 8px 20px rgba(184,145,42,.3); }
.btn--gold:hover, .btn--royal:hover{ background:var(--brown-dark); transform:translateY(-2px); }
.btn--ghost{ border:1px solid var(--brown); color:var(--brown); }
.btn--ghost:hover{ background:var(--brown); color:#fff; }
.btn--line{ border:1px solid var(--tan-line); color:var(--brown-deep); background:#fff; }
.btn--line:hover{ border-color:var(--brown); color:var(--brown); }
.btn--sm{ padding:.62em 1.4em; font-size:.82rem; }
.btn--block{ width:100%; }

/* Nút tròn + nhãn (kiểu ▶ "Giới thiệu…" của Nam An) */
.playlink{ display:inline-flex; align-items:center; gap:.9rem; }
.playlink__ring{
  width:52px; height:52px; border-radius:50%; border:1px solid var(--tan-line);
  display:grid; place-items:center; color:var(--brown); background:#fff; transition:.22s; flex:0 0 auto;
}
.playlink:hover .playlink__ring{ background:var(--brown); color:#fff; border-color:var(--brown); }
.playlink span{ font-size:.92rem; color:var(--ink); font-weight:400; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.header{
  position:sticky; top:0; z-index:200; background:rgba(255,253,248,.95);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
  transition:box-shadow .3s ease, background .3s ease;
}
.header.is-scrolled{
  background:rgba(255,253,248,.86);
  box-shadow:0 10px 30px -18px rgba(139,69,19,.5);
}
.header__inner{ min-height:var(--header-h); display:flex; align-items:center; gap:clamp(12px,2vw,26px); }
.brand{ display:flex; align-items:center; gap:.65rem; flex:0 0 auto; }
.brand__mark{
  width:40px; height:40px; border-radius:50% 50% 50% 12px; flex:0 0 auto;
  background:linear-gradient(140deg,var(--tan) 0%, var(--brown) 100%);
  display:grid; place-items:center; color:#fff; font-family:var(--serif); font-size:1.1rem;
  box-shadow:0 5px 14px rgba(212,175,55,.4);
}
.brand__name{ font-family:var(--serif); font-size:1.35rem; letter-spacing:.1em; color:var(--ink); line-height:1; }
.brand__tag{ display:block; font-size:.54rem; letter-spacing:.3em; color:var(--brown); text-transform:uppercase; margin-top:5px; }

.nav{ margin-left:auto; }
.nav__list{ display:flex; align-items:center; gap:clamp(2px,.6vw,6px); }
.nav__link{
  display:block; padding:.6em .95em; border-radius:var(--r-pill);
  font-size:.88rem; font-weight:400; color:var(--body); transition:.18s;
}
.nav__link:hover{ color:var(--brown-deep); background:var(--tan-soft); }
.nav__link.is-active{ background:var(--brown); color:#fff; }
.header__cta{ display:flex; align-items:center; gap:.5rem; flex:0 0 auto; }
.icon-btn{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--brown-deep); background:#fff; transition:.18s;
}
.icon-btn:hover{ border-color:var(--brown); color:var(--brown); }
.nav-toggle{ display:none; }

/* ============ HEADER MOBILE & DRAWER CHUẨN BỆNH VIỆN THẨM MỸ NAM AN ============ */
.header-search{ display:none; }
.mobile-drawer{ display:none; }

@media (max-width: 1080px){
  /* Header Mobile 1 hàng ngang: Logo bên trái -> Tìm dịch vụ -> ĐẶT LỊCH -> 3 thanh */
  .header{
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 2px 12px rgba(74, 50, 34, 0.08) !important;
  }
  .header__inner{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-height: 58px !important;
    padding: 6px 12px !important;
    position: relative !important;
  }

  /* 1. Logo Foxy M.D bên TRÁI */
  .brand{
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    order: 1 !important;
  }
  .brand__logo{
    height: 38px !important;
    max-width: 95px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
  }
  .brand__tag{ display:none !important; }

  /* 2. Ô Tìm dịch vụ ở GIỮA — thu gọn thanh thoát */
  .header-search{
    display: block !important;
    flex: 0 1 115px !important;
    max-width: 115px !important;
    min-width: 75px !important;
    position: relative !important;
    order: 2 !important;
  }
  .header-search__box{
    display: flex !important;
    align-items: center !important;
    background: #FAF6EF !important;
    border: 1px solid #E6D9C5 !important;
    border-radius: 99px !important;
    height: 32px !important;
    padding: 0 6px 0 8px !important;
    transition: all .2s ease !important;
  }
  .header-search__box:focus-within{
    background: #FFFFFF !important;
    border-color: #AB8D6B !important;
    box-shadow: 0 0 0 2px rgba(171, 141, 107, 0.2) !important;
  }
  .header-search__icon{
    width: 12px !important;
    height: 12px !important;
    color: #8A6D4D !important;
    flex-shrink: 0 !important;
    margin-right: 4px !important;
  }
  .header-search__input{
    border: none !important;
    background: transparent !important;
    outline: none !important;
    font-size: 0.72rem !important;
    color: #38281B !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .header-search__input::placeholder{
    color: #8C7B6B !important;
    font-size: 0.72rem !important;
  }
  .header-search__clear{
    border: none !important;
    background: none !important;
    color: #9C8B7B !important;
    font-size: 0.95rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 0 2px !important;
  }
  .header-search__results{
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: -20px !important;
    right: -60px !important;
    background: #FFFFFF !important;
    border: 1px solid #EFE5D5 !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 36px rgba(74, 50, 34, 0.16) !important;
    max-height: 280px !important;
    overflow-y: auto !important;
    z-index: 10005 !important;
  }

  /* Ẩn Navigation ngang trên mobile */
  .nav{ display:none !important; }

  /* 3. Cụm NGÔN NGỮ + 3 Thanh bên PHẢI (Ẩn nút Đặt lịch trên mobile header) */
  .header__cta{
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    order: 3 !important;
  }
  /* Hiện chuyển đổi ngôn ngữ Anh - Việt trên mobile */
  .header__cta .lang{
    display: inline-flex !important;
    align-items: center !important;
    background: #FAF6EF !important;
    border: 1px solid #E6D9C5 !important;
    border-radius: 99px !important;
    padding: 2px 4px !important;
    height: 32px !important;
    gap: 2px !important;
    box-sizing: border-box !important;
  }
  .header__cta .lang__a{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2px 6px !important;
    border-radius: 99px !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    color: #6E5A47 !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    transition: all .2s ease !important;
  }
  .header__cta .lang__a.is-on{
    background: #AB8D6B !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
  }

  /* Ẩn nút Đặt lịch trên header mobile theo yêu cầu */
  .header__book-btn{
    display: none !important;
  }

  /* Nút 3 Thanh Hamburger tròn chuẩn Nam An */
  .nav-toggle{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #FAF6EF !important;
    border: 1px solid #E6D9C5 !important;
    color: #4A3222 !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: all .2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .nav-toggle:hover,
  .nav-toggle:active{
    background: #F3ECE0 !important;
    border-color: #AB8D6B !important;
  }
  .nav-toggle.is-open{
    background: #AB8D6B !important;
    color: #FFFFFF !important;
    border-color: #AB8D6B !important;
  }
  .nav-toggle svg{
    width: 20px !important;
    height: 20px !important;
  }

  /* ============ MOBILE MENU DRAWER 2 CỘT ============ */
  .mobile-drawer{
    position: fixed !important;
    top: 58px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: calc(100vh - 58px) !important;
    height: calc(100dvh - 58px) !important;
    z-index: 9998 !important;
    display: none;
  }
  .mobile-drawer.is-open{
    display: flex !important;
    flex-direction: column !important;
    animation: drawerFadeIn .25s ease both;
  }
  @keyframes drawerFadeIn{ from{ opacity: 0; } to{ opacity: 1; } }

  .mobile-drawer__backdrop{
    position: absolute !important;
    inset: 0 !important;
    background: rgba(30, 20, 10, 0.45) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
  }
  .mobile-drawer__body{
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    background: #FFFFFF !important;
    overflow: hidden !important;
    box-shadow: 0 20px 40px rgba(74, 50, 34, 0.25) !important;
  }

  /* CỘT TRÁI: Navigation Tabs */
  .mobile-drawer__tabs{
    width: 28% !important;
    min-width: 90px !important;
    max-width: 110px !important;
    background: #FAF6EF !important;
    border-right: 1px solid #EFE5D5 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    padding: 6px 0 30px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .drawer-tab{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 11px 4px !important;
    text-decoration: none !important;
    color: #6E5A47 !important;
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    text-align: center !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    transition: all .2s ease !important;
    position: relative !important;
    gap: 3px !important;
    border-bottom: 1px solid rgba(239, 229, 213, 0.6) !important;
  }
  .drawer-tab__icon{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    color: #8A6D4D !important;
    margin-bottom: 2px !important;
  }
  .drawer-tab__icon svg{
    width: 18px !important;
    height: 18px !important;
    stroke: #8A6D4D !important;
    stroke-width: 1.8 !important;
    transition: all .2s ease !important;
  }
  .drawer-tab:hover .drawer-tab__icon svg,
  .drawer-tab.is-active .drawer-tab__icon svg{
    stroke: #6E4F33 !important;
    transform: scale(1.08) !important;
  }
  .drawer-tab__label{
    display: block !important;
    line-height: 1.2 !important;
  }
  .drawer-tab__arrow{
    display: none !important;
  }
  .drawer-tab::after{
    content: "›" !important;
    position: absolute !important;
    right: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 0.95rem !important;
    color: #AB8D6B !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .15s ease !important;
  }
  .drawer-tab.is-active::after{
    opacity: 1 !important;
  }
  .drawer-tab:hover,
  .drawer-tab.is-active{
    background: #FFFFFF !important;
    color: #8A6D4D !important;
    font-weight: 700 !important;
    border-left: 3px solid #AB8D6B !important;
    margin-right: -1px !important;
  }

  /* CỘT PHẢI: Danh sách Phễu lớn Dịch vụ */
  .mobile-drawer__content{
    flex: 1 1 auto !important;
    height: 100% !important;
    overflow-y: auto !important;
    background: #FFFFFF !important;
    padding: 16px 16px 50px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .drawer-cat{
    margin-bottom: 18px !important;
  }
  .drawer-cat__title{
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #AB8D6B !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
    padding-bottom: 4px !important;
    border-bottom: 1px solid #F0E6D6 !important;
  }
  .drawer-cat__list{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .drawer-cat__list li{
    margin: 0 !important;
  }
  .drawer-cat__list a{
    display: block !important;
    padding: 8px 0 !important;
    font-size: 0.86rem !important;
    color: #2D251E !important;
    text-decoration: none !important;
    border-bottom: 1px dashed #F5EDE1 !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
    transition: color .2s ease !important;
  }
  .drawer-cat__list a:hover,
  .drawer-cat__list a:active{
    color: #AB8D6B !important;
    padding-left: 4px !important;
  }
}

@media (max-width: 420px){
  .header__inner{
    padding: 4px 8px !important;
    gap: 5px !important;
  }
  .brand__logo{
    height: 32px !important;
    max-width: 78px !important;
  }
  .header-search{
    flex: 0 1 105px !important;
    max-width: 105px !important;
    min-width: 70px !important;
  }
  .header-search__box{
    height: 30px !important;
    padding: 0 5px 0 6px !important;
  }
  .header-search__input,
  .header-search__input::placeholder{
    font-size: 0.68rem !important;
  }
  .header__cta .lang{
    height: 30px !important;
    padding: 1px 3px !important;
  }
  .header__cta .lang__a{
    padding: 2px 4px !important;
    font-size: 0.65rem !important;
  }
  .nav-toggle{
    width: 30px !important;
    height: 30px !important;
  }
  .mobile-drawer__tabs{
    width: 30% !important;
    min-width: 82px !important;
  }
}

/* ==========================================================================
   HERO — nền hồng phấn, chữ trái, GALLERY trong khung cánh hoa bên phải
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
  /* Nam An giữ nền kem ĐỀU tới tận đáy rồi mới cắt bằng sóng trắng — nền cũ tự
     nhạt dần về #FFFFFF nên đường cong không thể hiện ra. Bỏ nấc trắng cuối. */
  background:
    radial-gradient(90% 80% at 84% 14%, rgba(248,231,190,.5) 0%, rgba(248,231,190,0) 58%),
    linear-gradient(168deg, #FFFFFF 0%, #FFFCF4 48%, #FFF3DC 100%);
}
/* ĐƯỜNG CONG ĐÁY HERO — đo pixel từ ảnh nền hero của Nam An (test12222.png 1920×1080):
   mép trắng cao nhất tại x≈800 (y=672), thấp nhất ở mép phải (y=774) → biên độ 102px.
   Sóng LỆCH (đỉnh ở 42% chiều ngang), không đối xứng — khác hẳn ellipse 50% 50% cũ. */
.hero__curve{
  position:absolute; z-index:1; left:0; right:0; bottom:-1px;
  /* Nam An: biên độ 102px trên ảnh 1920 rộng, cover vào section → ≈5.5% bề ngang */
  width:100%; height:clamp(40px,5.5vw,92px); display:block;
  fill:var(--white); pointer-events:none;
}
.hero__inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns: 1fr .92fr; gap:clamp(24px,4vw,60px);
  /* đáy phải chừa chỗ cho sóng trắng (cao tới 104px) rồi mới tới nội dung */
  align-items:center; padding-block: clamp(40px,6vw,78px) clamp(86px,12vw,186px);
}
@media (max-width: 940px){ .hero__inner{ grid-template-columns:1fr; } }

.hero__card h1{ margin-bottom:.42em; }
.hero__card p{ font-size:1.03rem; max-width:520px; }
.hero__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem; margin-top:1.9rem; }
.hero__proof{
  display:flex; flex-wrap:wrap; gap:clamp(1.4rem,4vw,2.8rem); margin-top:2.2rem;
  padding-top:1.5rem; border-top:1px solid var(--tan-line);
}
.hero__stat b{
  display:block; font-family:var(--serif); font-size:clamp(1.7rem,3vw,2.3rem);
  color:var(--ink); line-height:1; font-weight:500;
}
.hero__stat b sup{ color:var(--brown); font-size:.44em; top:-1em; }
.hero__stat b i{ font-style:normal; font-variant-numeric:tabular-nums; }
.hero__stat span{ font-size:.82rem; color:var(--muted); font-weight:300; }

/* KHỐI BO GÓC ẢNH HERO — copy đúng số của Nam An:
   `.home-img-hero .image-cover { border-radius: 200px 200px 170px 170px }` trên khung 458×595.
   Đổi sang % để co giãn mà TỈ LỆ không đổi: 200/458=43.67% ngang · 200/595=33.59% dọc
                                            170/458=37.12% ngang · 170/595=28.55% dọc
   → khoá aspect-ratio 458/595 thì góc luôn TRÒN đều đúng như bản gốc.
   Nam An KHÔNG có khung đệm, KHÔNG viền vàng, KHÔNG đổ bóng → bỏ hết. */
.hero__frame{ position:relative; }
.hero__viewport{
  position:relative; overflow:hidden;
  aspect-ratio: 458/595; background:var(--tan-soft);
  border-radius: 43.67% 43.67% 37.12% 37.12% / 33.59% 33.59% 28.55% 28.55%;
}
@media (max-width: 940px){
  .hero__viewport{ aspect-ratio:4/3; border-radius:120px 120px 100px 100px; }
}
.hero__slide{
  position:absolute; inset:0; opacity:0; transition:opacity .85s ease;
  background-size:cover; background-position:center;
}
.hero__slide.is-active{ opacity:1; }

.hero__nav{
  position:absolute; z-index:3; left:0; right:0; bottom:18px;
  display:flex; align-items:center; justify-content:center; gap:.6rem;
}
.hero__arrow{
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.6);
  color:#fff; display:grid; place-items:center; transition:.2s; background:rgba(10,36,99,.32);
  backdrop-filter:blur(6px);
}
.hero__arrow:hover{ background:#fff; color:var(--brown-deep); }
.hero__dots{ display:flex; gap:.4rem; }
.hero__dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.6); transition:.2s; padding:0; }
.hero__dot.is-active{ background:var(--gold-ring); width:24px; border-radius:var(--r-pill); }
.hero__counter{
  position:absolute; z-index:3; top:18px; right:20px; color:#fff; font-size:.74rem;
  letter-spacing:.14em; background:rgba(10,36,99,.38); padding:.32em .9em; border-radius:var(--r-pill);
  backdrop-filter:blur(6px);
}

/* ---------- Page hero (trang trong) — nền kem, chữ giữa ---------- */
.pagehero{
  background:linear-gradient(180deg, var(--blush) 0%, var(--blush-2) 62%, var(--white) 100%);
  padding-block: clamp(30px,4.5vw,58px) clamp(26px,4vw,48px); text-align:center;
}
.pagehero h1{ font-size:clamp(1.9rem,3.8vw,2.9rem); margin-bottom:.3em; }
.pagehero p{ max-width:620px; margin:0 auto; font-size:.98rem; }
.crumb{ font-size:.8rem; color:var(--muted); margin-bottom:1rem; font-weight:300; }
.crumb a:hover{ color:var(--brown); }

/* Băng nâu bo góc (kiểu banner Bảng giá của Nam An) */
.pricebanner{
  background:linear-gradient(120deg, #071B4D 0%, #0A2463 52%, #14337A 100%);
  border-radius:var(--r-lg); padding:clamp(24px,4vw,46px) clamp(22px,4vw,44px);
  color:#fff; margin-bottom:clamp(24px,4vw,40px); box-shadow:var(--shadow-md);
}
.pricebanner span{
  display:inline-block; font-size:.72rem; letter-spacing:.14em; background:rgba(255,255,255,.16);
  padding:.35em 1em; border-radius:var(--r-pill); margin-bottom:.9rem;
}
.pricebanner h2{ color:#fff; margin:0; font-size:clamp(1.4rem,2.8vw,2.1rem); }

/* ==========================================================================
   VÌ SAO CHỌN
   ========================================================================== */
.why{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:clamp(28px,4.5vw,56px);
  align-items:center;
}
@media (max-width: 940px){ .why{ grid-template-columns:1fr; } }
.why__media{
  margin:0; border-radius:20px; overflow:hidden;
  box-shadow:0 14px 36px rgba(74,50,34,0.12);
  aspect-ratio: 3/2;
  width: 100%;
  background:var(--blush-2); border:1px solid var(--tan-line);
}
.why__media img{ width:100%; height:100%; object-fit:cover; display:block; }
/* CỤM 4 ẢNH — copy đúng cơ chế Nam An (`.mbws-gallery .gallery-col`):
   ① góc BỊ CẮT của mỗi ô luôn quay VÀO TÂM cụm → thành hình chong chóng
   ② ô 1 và ô 4 CAO hơn (padding-top:120% ở bản gốc), ô 2 và 3 thấp hơn
   ③ ô 2 dính ĐÁY hàng 1 (`align-items:flex-end`) → tạo thế so le
   ④ bán kính gốc 90px trên ô rộng 265px → giữ nguyên 90px làm mốc trần
   ⑤ Nam An KHÔNG đổ bóng ô ảnh (box-shadow:none) */
.why__collage{
  --r4: clamp(38px, 7vw, 90px);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,2vw,20px);
  align-items:start;
}
.why__collage figure{ margin:0; overflow:hidden; }
.why__collage img{ width:100%; height:100%; object-fit:cover; display:block; }

/* 13/09 user: kích thước ô = đúng Nam An — đo Chrome thật @1920: ô rộng 265, CAO 354 (1.336), THẤP 292 (1.102), khe 20
   → cột trái cao-thấp, cột phải thấp-cao, khe giữa thẳng hàng, 2 đầu lệch 62px (trước 1.2/1.1 lệch quá ít) */
.why__collage figure:nth-child(1),
.why__collage figure:nth-child(4){ aspect-ratio: 265 / 354; }
.why__collage figure:nth-child(2),
.why__collage figure:nth-child(3){ aspect-ratio: 265 / 292; }

.why__collage figure:nth-child(1){ border-radius: var(--r4) var(--r4) 0 var(--r4); }
.why__collage figure:nth-child(2){ border-radius: var(--r4) var(--r4) var(--r4) 0; align-self:end; }
.why__collage figure:nth-child(3){ border-radius: var(--r4) 0 var(--r4) var(--r4); }
.why__collage figure:nth-child(4){ border-radius: 0 var(--r4) var(--r4) var(--r4); }

.why__title{
  display:inline-block; background:var(--brown); color:#fff; font-family:var(--serif);
  font-size:clamp(1rem,1.6vw,1.25rem); padding:.55em 1.5em; border-radius:var(--r-pill);
  margin-bottom:1.6rem; box-shadow:0 10px 24px rgba(184,145,42,.22); font-weight:500;
}
.reasons{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.5rem; }
@media (max-width: 600px){ .reasons{ grid-template-columns:1fr; gap:.9rem; } }
.reason{ display:flex; gap:.75rem; align-items:flex-start; }
.reason__icon{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%;
  background:var(--tan-soft); color:var(--brown); display:grid; place-items:center;
}
.reason__icon svg{ width:18px; height:18px; }
.reason p{ margin:0; font-size:.88rem; line-height:1.55; }

.stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;
  margin-top:2.3rem; padding-top:2rem; border-top:1px solid var(--tan-line);
}
.stat b{
  font-family:var(--serif); font-size:clamp(1.8rem,3.4vw,2.6rem);
  color:var(--ink); line-height:1; font-weight:500;
}
.stat b sup{ font-size:.42em; color:var(--brown); top:-1em; }
.stat span{ display:block; font-size:.83rem; color:var(--muted); margin-top:.45rem; font-weight:300; }

/* ==========================================================================
   RUY-BĂNG SỨ MỆNH + ROADMAP
   ========================================================================== */
.ribbon{
  background:linear-gradient(135deg, var(--brown) 0%, var(--brown-dark) 100%);
  color:#fff; text-align:center; padding:clamp(34px,5.5vw,62px) var(--gut);
  clip-path:polygon(0 0, 50% 26px, 100% 0, 100% 100%, 50% calc(100% - 26px), 0 100%);
}
.ribbon .eyebrow{ color:rgba(255,255,255,.75); }
.ribbon h2{ color:#fff; margin-bottom:.35em; }
.ribbon p{ color:rgba(255,255,255,.85); max-width:660px; margin:0 auto; }

/* ==========================================================================
   ROADMAP — MOT DUONG LINE MANH, 6 moc so le TREN/DUOI
   Thuan CSS grid: khong anh nen, khong toa do %, khong bao gio lech
   ========================================================================== */
.rmap{ position:relative; }

/* Lưới 6 cột × 3 hàng:  hàng 1 = mốc TRÊN · hàng 2 = ĐƯỜNG LINE · hàng 3 = mốc DƯỚI.
   Không dùng toạ độ %, không dùng ảnh nền — mọi thứ tự canh theo lưới nên
   không bao giờ lệch, đổi nội dung dài ngắn cũng vẫn thẳng hàng. */
.rmap__stage{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  grid-template-rows:auto 1px auto;
  column-gap:clamp(8px, 1vw, 14px);
}

/* Đường line: mảnh, đậm dần ở giữa, tan dần 2 đầu */
.rmap__line{
  grid-row:2; grid-column:1 / -1; height:1px; align-self:center;
  background:linear-gradient(90deg,
    transparent 0, var(--tan-line) 7%, var(--tan) 50%, var(--tan-line) 93%, transparent 100%);
}

/* ---- Thẻ mốc ---- */
.rmap__card{
  position:relative; background:#fff; border:1px solid var(--tan-line); border-radius:14px;
  padding:1rem 1.05rem 1.05rem; box-shadow:0 14px 32px -22px rgba(139,69,19,.4);
  transition:.26s ease;
  /* Xếp dọc + meta đẩy xuống đáy => dòng "nơi cấp" của cả 6 thẻ thẳng một hàng */
  display:flex; flex-direction:column;
}
.rmap__card:hover{ border-color:var(--gold-ring); box-shadow:0 20px 40px -20px rgba(139,69,19,.45); }
.rmap__card:hover .rmap__stem::after{ background:var(--brown); }

/* Chiều dài cuống — cũng chính là khoảng hở giữa thẻ và đường line */
.rmap{ --stem:38px; }
/* align-self:stretch (mặc định) => 3 thẻ cùng hàng CAO BẰNG NHAU, mép trên và mép
   dưới thẳng một đường. Để `end`/`start` là thẻ cao thấp so le, nhìn lộn xộn. */
.rmap__card--up  { grid-row:1; margin-bottom:var(--stem); }
.rmap__card--down{ grid-row:3; margin-top:var(--stem); }
.rmap__card--1{ grid-column:1; } .rmap__card--2{ grid-column:2; }
.rmap__card--3{ grid-column:3; } .rmap__card--4{ grid-column:4; }
.rmap__card--5{ grid-column:5; } .rmap__card--6{ grid-column:6; }
/* Mốc cuối = hiện tại → viền vàng + chấm đặc cho biết đây là điểm đang đứng */
.rmap__card--6{ border-color:var(--gold-ring); }
.rmap__card--6 .rmap__stem{ background:var(--tan); }
.rmap__card--6 .rmap__stem::after{ background:var(--brown); border-color:var(--brown); }

.rmap__top{ display:flex; align-items:center; gap:.55rem; margin-bottom:.55rem; }
.rmap__chip{
  width:28px; height:28px; border-radius:9px; flex:0 0 auto;
  background:linear-gradient(140deg,var(--tan) 0%, var(--brown) 100%);
  display:grid; place-items:center; color:#fff;
}
.rmap__year{
  font-family:var(--serif); font-size:clamp(.98rem,1.3vw,1.22rem); font-weight:600;
  color:var(--brown-deep); line-height:1; white-space:nowrap;
}
.rmap__card h3{
  font-size:.82rem; line-height:1.4; margin:0 0 .55em; font-weight:500;
  text-wrap:balance;   /* ngắt dòng cân, không để dòng cuối trơ 1 chữ */
}
/* Đẩy xuống đáy + gạch mảnh ngăn => khối dưới của 6 thẻ đều nhau */
.rmap__meta{
  display:block; margin-top:auto; padding-top:.55rem; border-top:1px solid var(--line);
  font-size:.67rem; line-height:1.45; color:var(--brown); letter-spacing:.01em;
}
/* (.rmap__no da bo — xem ghi chu trong main.js) */

/* Cuống nối thẻ xuống/lên đường line + chấm tròn nằm đúng trên line */
.rmap__stem{ position:absolute; left:50%; width:1px; height:var(--stem); background:var(--tan-line); }
.rmap__stem::after{
  content:""; position:absolute; left:-3.5px; width:8px; height:8px; border-radius:50%;
  background:#fff; border:2px solid var(--brown); transition:.26s ease;
}
.rmap__card--up   .rmap__stem{ top:100%; }
.rmap__card--up   .rmap__stem::after{ bottom:-4px; }
.rmap__card--down .rmap__stem{ bottom:100%; }
.rmap__card--down .rmap__stem::after{ top:-4px; }

.rmap__hint{ text-align:center; font-size:.82rem; color:var(--muted); margin-top:1rem; }

/* ---- Dien thoai / tablet: bo hieu ung 3D, do ve doc cho de doc ---- */
@media (max-width: 1040px){
  /* Khong du cho 6 cot — do ve timeline doc, line chay ben trai */
  .rmap__stage{ display:block; padding-left:26px; position:relative; }
  .rmap__line{
    /* Dung height:calc chu KHONG dung top+bottom: the nay o ban desktop la grid item
       co height:1px, de top/bottom thi trinh duyet giu nguyen 1px => mat duong line. */
    position:absolute; left:7px; top:8px; bottom:auto; width:1px; height:calc(100% - 16px);
    background:linear-gradient(to bottom, transparent, var(--tan) 12%, var(--tan) 88%, transparent);
  }
  /* the la thang <a> (inline) — phai ep block, khong thi 6 the deo len nhau */
  .rmap__card, .rmap__card--up, .rmap__card--down{ display:block; margin:0 0 1rem; }
  /* Cuong nam ngang: tu duong line (o stage.left + 7px) chay vao mep the.
     The cach mep stage 26px => cuong dai 19px, cham tron canh giua dung tren line. */
  .rmap__stem,
  .rmap__card--up .rmap__stem,
  .rmap__card--down .rmap__stem{
    left:-19px; top:24px; bottom:auto; width:19px; height:1px; background:var(--tan-line); }
  .rmap__stem::after,
  .rmap__card--up .rmap__stem::after,
  .rmap__card--down .rmap__stem::after{ left:-6px; top:-6px; bottom:auto; }
}

/* Dải sóng ngăn section (Nam An dùng nhiều) */
.wave{ display:block; width:100%; height:clamp(28px,4vw,56px); }
.wave path{ fill:var(--blush-2); }
.wave--up path{ fill:var(--white); }
.wave--tan path{ fill:var(--tan-soft); }

/* ==========================================================================
   CƠ SỞ VẬT CHẤT
   ========================================================================== */
.facility{ display:grid; grid-template-columns: .85fr 1.15fr; gap:clamp(26px,4vw,58px); align-items:center; }
@media (max-width: 940px){ .facility{ grid-template-columns:1fr; } }
.facility__main{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:16/10; }
.facility__main img{ width:100%; height:100%; object-fit:cover; }
.facility__thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem; margin-top:.7rem; }
.facility__thumbs button{
  border-radius:var(--r-sm); overflow:hidden; aspect-ratio:4/3; border:2px solid transparent; transition:.2s; padding:0;
}
.facility__thumbs button.is-active{ border-color:var(--brown); }
.facility__thumbs img{ width:100%; height:100%; object-fit:cover; }

/* ---------- Thẻ nhóm dịch vụ ---------- */
.groups{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1.1rem; }
.group-card{
  background:var(--blush-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.5rem 1.4rem;
  transition:.24s; display:flex; flex-direction:column; gap:.55rem; height:100%;
}
.group-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--tan-line); background:#fff; }
.group-card__top{ display:flex; align-items:center; gap:.8rem; }
.group-card__no{
  width:36px; height:36px; flex:0 0 auto; border-radius:50%; background:#fff; border:1px solid var(--tan-line);
  color:var(--brown); display:grid; place-items:center; font-family:var(--serif); font-size:.9rem;
}
.group-card h3{ font-size:1rem; margin:0; }
.group-card__count{ font-size:.76rem; color:var(--brown); letter-spacing:.03em; }
.group-card__items{ font-size:.85rem; color:var(--muted); line-height:1.65; margin:0; font-weight:300; }
.group-card__link{ margin-top:auto; padding-top:.7rem; font-size:.83rem; color:var(--brown-deep); }
.group-card__link:hover{ color:var(--brown); }

/* ---------- Thẻ công nghệ ---------- */
/* --- 3 pill nhóm lớn (đúng kiểu 3 ô "Điêu Khắc..." của Nam An) --- */
/* Hàng 3 ô KHÔNG kéo hết bề ngang wrap — Nam An để hẹp lại nên ô không bị rỗng
   một khoảng trống to bên phải. Đây là lỗi làm khối này nhìn "chưa gọn". */
.catpills{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,28px);
  max-width:880px; margin:0 auto clamp(32px,4.5vw,58px);
}
.catpill{
  display:flex; align-items:center; gap:clamp(.7rem,1.1vw,1rem);
  background:linear-gradient(135deg,#FFFCF4 0%,#FFF3DC 100%); border-radius:var(--r-pill) 28px 28px var(--r-pill);
  padding:9px clamp(14px,1.6vw,20px) 9px 9px; transition:.26s ease;
}
.catpill:hover{
  background:linear-gradient(135deg,#FFF8E9 0%,#F9EBC7 100%); transform:translateY(-3px);
  box-shadow:0 18px 36px -22px rgba(139,69,19,.45);
}
/* Khung ảnh BẦU DỤC (ellipse) — không phải bo góc lệch */
.catpill__img{
  flex:0 0 clamp(72px,6.6vw,88px); aspect-ratio:4/5; overflow:hidden;
  border-radius:50%; background:var(--white);
}
.catpill__img img{ width:100%; height:100%; object-fit:cover; }
.catpill__body{ min-width:0; }
.catpill h3{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(.94rem,1.2vw,1.1rem); color:var(--brown); margin:0 0 .55rem;
  line-height:1.26; white-space:pre-line;   /* xuống dòng đúng chỗ như Nam An */
}
.catpill .btn{ padding:.46em .5em .46em 1.05em; font-size:.7rem; }
.catpill .btn--arrow i{ width:19px; height:19px; }
@media (max-width: 1040px){ .catpills{ grid-template-columns:1fr; max-width:460px; } }

/* --- Thẻ MÁY / CÔNG NGHỆ (đúng kiểu 2x2 thẻ máy của Nam An) --- */
.devices{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.6vw,38px); }
@media (max-width: 900px){ .devices{ grid-template-columns:1fr; } }
.device{
  position:relative; background:#fff; border:1px solid #EEE2C1; border-radius:4px;
  display:grid; grid-template-columns:38% 1fr; gap:clamp(14px,2vw,26px); align-items:center;
  padding:clamp(22px,2.6vw,32px) clamp(20px,2.4vw,30px); transition:.26s;
  overflow:visible;   /* de anh may nho ra khoi day the nhu Nam An */
}
.device:hover{ box-shadow:var(--shadow-md); }
.device__tag{
  position:absolute; top:-11px; right:clamp(14px,2vw,26px);
  display:inline-flex; align-items:center; gap:.42rem;
  background:var(--blush); border:1px solid var(--tan-line); border-radius:var(--r-pill);
  color:var(--brown-deep); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.34em .95em; white-space:nowrap;
}
.device__tag::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--brown); }
.device__img{ overflow:hidden; aspect-ratio:3/4; border-radius:0; background:#fff; }
.device__img img{ width:100%; height:100%; object-fit:cover; }

/* Khi co ANH MAY tach nen (cut:true trong content.js) -> dung kieu Nam An:
   may dung tren nen trang, chan/banh xe nho XUONG DUOI duong vien the. */
.device--cut .device__img{
  overflow:visible; aspect-ratio:auto; background:transparent;
  align-self:stretch;
  margin-top:calc(-1 * clamp(10px,1.4vw,18px));
  margin-bottom:calc(-1 * clamp(46px,5vw,60px));   /* chan may nho HAN ra khoi day the */
}
.device--cut .device__img img{
  width:100%; height:100%; object-fit:contain; object-position:bottom center;
}
.device h3{ font-size:clamp(1.12rem,1.7vw,1.42rem); margin-bottom:.7em; }
.device__list{ display:grid; gap:.4rem; margin-bottom:.9rem; }
.device__list li{ display:flex; gap:.55rem; font-size:.85rem; color:var(--body); font-weight:300; line-height:1.5; }
.device__list svg{ flex:0 0 auto; width:15px; height:15px; color:var(--tan); margin-top:.28em; }

/* Nut "Tim hieu them ->" co mui ten trong vong tron (dung kieu Nam An) */
.btn--arrow{ gap:.65em; padding-right:.5em; }
.btn--arrow i{
  width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.24);
  display:grid; place-items:center; font-style:normal; font-size:.85em; line-height:1;
}

/* Hoa văn ngăn khối (Nam An dùng con bướm; Foxy dùng nét trang trí trung tính) */
.ornament{ display:flex; align-items:center; justify-content:center; gap:.7rem; margin-bottom:clamp(22px,3vw,40px); }
.ornament::before, .ornament::after{
  content:""; width:clamp(38px,7vw,86px); height:1px;
  background:linear-gradient(90deg, transparent, var(--tan-line));
}
.ornament::after{ background:linear-gradient(90deg, var(--tan-line), transparent); }
.ornament svg{ color:var(--brown); flex:0 0 auto; }

/* ==========================================================================
   KHỐI DỊCH VỤ LỚN (trang Dịch vụ)
   ========================================================================== */
.sblock{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3.5vw,50px); align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(18px,2.6vw,32px); margin-bottom:clamp(20px,3vw,34px); box-shadow:var(--shadow-sm);
}
@media (max-width: 880px){ .sblock{ grid-template-columns:1fr; } }
.sblock--flip{ background:var(--blush-2); }
.sblock--flip .sblock__media{ order:2; }
@media (max-width: 880px){ .sblock--flip .sblock__media{ order:0; } }
.sblock__media{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.sblock__media figure{
  margin:0; border-radius:22px; overflow:hidden; aspect-ratio:1/1;
  box-shadow:0 0 0 1px var(--tan-line);
}
.sblock__media figure:first-child{
  grid-row:span 2; aspect-ratio:1/2.07;
  border-radius:22px 22px clamp(46px,6vw,86px) 22px;
}
.sblock__media img{ width:100%; height:100%; object-fit:cover; }
.sblock__body h2{ font-size:clamp(1.35rem,2.3vw,1.85rem); margin-bottom:.2em; }
.sblock__sub{ font-size:.86rem; color:var(--brown); margin-bottom:1.1rem; font-weight:300; }
.sblock__list{ display:grid; gap:.55rem; margin-bottom:1.4rem; }
.sblock__list li{ display:flex; gap:.6rem; font-size:.9rem; color:var(--body); font-weight:300; }
.sblock__list svg{ flex:0 0 auto; width:16px; height:16px; color:var(--brown); margin-top:.3em; }
.sblock__price{ color:var(--brown-deep); white-space:nowrap; font-weight:600; }

/* ==========================================================================
   BẢNG GIÁ — mục lục + accordion
   ========================================================================== */
.toc{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.5rem 1.7rem; margin-bottom:2rem; box-shadow:var(--shadow-sm);
}
.toc__title{
  display:flex; align-items:center; gap:.55rem; font-family:var(--serif); font-size:1.05rem;
  color:var(--ink); margin-bottom:1rem; padding-bottom:.8rem; border-bottom:1px solid var(--line);
}
.toc ol{ margin:0; padding:0; counter-reset:t; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:.3rem .9rem; list-style:none; }
.toc li{ counter-increment:t; }
.toc a{ display:flex; gap:.65rem; align-items:baseline; font-size:.89rem; color:var(--body); padding:.38rem 0; font-weight:300; }
.toc a::before{
  content:counter(t); flex:0 0 auto; width:22px; height:22px; border-radius:6px;
  background:var(--tan-soft); color:var(--brown); font-size:.7rem;
  display:grid; place-items:center; font-weight:600;
}
.toc a:hover{ color:var(--brown); }

.acc{ display:grid; gap:.75rem; }
.acc__item{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; transition:.2s; }
.acc__item.is-open{ border-color:var(--tan-line); box-shadow:var(--shadow-md); }
.acc__head{ width:100%; display:flex; align-items:center; gap:1rem; padding:1.1rem 1.35rem; text-align:left; }
.acc__head:hover{ background:var(--blush-2); }
.acc__no{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%; background:var(--tan-soft); color:var(--brown);
  display:grid; place-items:center; font-family:var(--serif); font-size:.85rem;
}
.acc__name{ font-family:var(--serif); font-size:1.06rem; color:var(--ink); flex:1; }
.acc__meta{ font-size:.76rem; color:var(--muted); white-space:nowrap; font-weight:300; }
.acc__chev{ flex:0 0 auto; color:var(--brown); transition:transform .25s; }
.acc__item.is-open .acc__chev{ transform:rotate(180deg); }
.acc__panel{ display:none; padding:0 1.35rem 1.3rem; }
.acc__item.is-open .acc__panel{ display:block; }

.ptable{ width:100%; border-collapse:collapse; font-size:.89rem; }
.ptable th{
  text-align:left; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:500; padding:.6rem .8rem; border-bottom:1px solid var(--line);
}
.ptable th:last-child, .ptable td:last-child{ text-align:right; }
.ptable td{ padding:.8rem; border-bottom:1px solid var(--line); vertical-align:top; color:var(--body); font-weight:300; }
.ptable tr:last-child td{ border-bottom:0; }
.ptable tbody tr:hover{ background:var(--blush-2); }
.ptable .p-name{ color:var(--ink); font-weight:500; }
.ptable .p-note{ display:block; font-size:.79rem; color:var(--muted); margin-top:.25rem; }
.ptable .p-price{ color:var(--brown-deep); font-weight:600; white-space:nowrap; }
@media (max-width: 620px){
  .ptable, .ptable tbody, .ptable tr, .ptable td{ display:block; width:100%; }
  .ptable thead{ display:none; }
  .ptable tr{ border-bottom:1px solid var(--line); padding:.7rem 0; }
  .ptable td{ border:0; padding:.15rem .2rem; }
  .ptable td:last-child{ text-align:left; }
}
.price-note{
  background:var(--tan-soft); border-left:3px solid var(--brown); border-radius:var(--r-sm);
  padding:1.1rem 1.3rem; font-size:.87rem; color:var(--body); margin-top:1.6rem; font-weight:300;
}

/* ==========================================================================
   TIN TỨC
   ========================================================================== */
.news-layout {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: clamp(24px, 3.5vw, 42px);
  align-items: start;
}
@media (max-width: 900px) {
  .news-layout {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
}

/* Breadcrumb chuẩn Nam An */
.naman-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 13.5px;
  color: #8A6E50;
  margin-bottom: 22px;
}
.naman-breadcrumb a {
  color: #8A6E50;
  text-decoration: none;
  transition: color .2s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.naman-breadcrumb a:hover {
  color: #AB8D6B;
}
.naman-breadcrumb .sep {
  color: #CBBDB0;
  font-size: 12px;
}
.naman-breadcrumb .current {
  color: #AB8D6B;
  font-weight: 600;
}

/* Card Bo Tròn Nam An */
.naman-topics-card,
.side {
  background: #FFFFFF;
  border: 1px solid rgba(224, 208, 196, 0.8);
  border-radius: 22px;
  padding: 24px 20px 26px;
  box-shadow: 0 8px 30px rgba(171, 141, 107, 0.08);
  position: sticky;
  top: calc(var(--header-h, 72px) + 20px);
}
@media (max-width: 900px) {
  .naman-topics-card,
  .side {
    position: static;
    padding: 20px 16px 22px;
    border-radius: 20px;
    margin-bottom: 0;
  }
}

.naman-topics-card__title,
.side h3 {
  font-family: var(--font-display, var(--serif));
  font-size: 1.35rem;
  font-weight: 600;
  color: #482B25;
  margin: 0 0 12px;
  letter-spacing: 0.2px;
}

/* Ô Tìm kiếm tròn Nam An */
.naman-search-pill,
.searchbox {
  position: relative;
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #EBE4DB;
  border-radius: 50px;
  height: 46px;
  padding: 0 14px 0 18px;
  margin-bottom: 0;
  transition: border-color .2s, box-shadow .2s;
}
.naman-search-pill:focus-within,
.searchbox:focus-within {
  border-color: #AB8D6B;
  box-shadow: 0 0 0 3px rgba(171, 141, 107, 0.15);
}
.naman-search-pill input,
.searchbox input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: #482B25;
  font-family: var(--sans);
  min-width: 0;
}
.naman-search-pill input::placeholder,
.searchbox input::placeholder {
  color: #A39081;
}
.naman-search-pill__btn,
.searchbox svg {
  background: none;
  border: none;
  padding: 0;
  color: #482B25;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

/* Danh sách Chủ đề Nam An */
.naman-topic-list,
.chips {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.naman-topic-item,
.side .chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #FAF6F0;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 12px 16px;
  color: #3E2B1E;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all .2s ease;
  line-height: 1.35;
}
.naman-topic-item:hover,
.side .chip:hover {
  background: #F3ECE2;
  border-color: #E2D3C4;
  color: #2E1F14;
  transform: translateX(2px);
}
.naman-topic-item.is-active,
.side .chip.is-active {
  background: #F4EFE6;
  border-color: #AB8D6B;
  color: #2E1F14;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(171, 141, 107, 0.12);
}
.naman-topic-item__name {
  flex: 1;
  padding-right: 8px;
}
.naman-topic-item__arrow {
  color: #8A6E50;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: transform .2s ease, color .2s ease;
}
.naman-topic-item:hover .naman-topic-item__arrow,
.naman-topic-item.is-active .naman-topic-item__arrow {
  color: #AB8D6B;
  transform: translateY(1px);
}

/* Feed Tin Tức Mới Nhất */
.naman-news-feed__header {
  text-align: center;
  margin-bottom: 1.8rem;
}
.naman-news-feed__title {
  font-family: var(--font-display, var(--serif));
  font-size: clamp(1.65rem, 3.8vw, 2.3rem);
  font-weight: 600;
  color: #482B25;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 0 0 6px;
}
.naman-news-feed__count {
  display: inline-block;
  font-size: 13.5px;
  color: #8A6E50;
  font-weight: 500;
}

.postgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1.2rem;
}
@media (max-width: 600px) {
  .postgrid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}
.post {
  background: #FFFFFF;
  border: 1px solid rgba(224, 208, 196, 0.8);
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  transition: .22s;
  box-shadow: 0 4px 16px rgba(171, 141, 107, 0.04);
}
.post:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: #AB8D6B;
}
.post__img {
  flex: 0 0 82px;
  width: 82px;
  height: 82px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--tan-soft);
}
.post__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.post:hover .post__img img {
  transform: scale(1.04);
}
.post__tag {
  display: inline-block;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .02em;
  background: #FAF6F0;
  color: #8A6E50;
  border: 1px solid #EBE4DB;
  padding: .18em .65em;
  border-radius: var(--r-pill);
  margin-bottom: .28rem;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.post__tag--clinic {
  background: #F6ECCC;
  color: var(--brown-deep);
  border-color: #E6D8A8;
}
.post h3 {
  font-size: .88rem;
  line-height: 1.34;
  margin-bottom: .28rem;
  font-family: var(--sans);
  font-weight: 600;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.post time {
  font-size: .72rem;
  color: var(--muted);
  font-weight: 400;
}
.pager {
  display: flex;
  justify-content: center;
  gap: .4rem;
  margin-top: 2.2rem;
}
.pager button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-size: .84rem;
  background: #fff;
  color: var(--body);
  cursor: pointer;
  transition: .2s;
}
.pager button:hover {
  border-color: #AB8D6B;
  color: #AB8D6B;
}
.pager button.is-active {
  background: #AB8D6B;
  border-color: #AB8D6B;
  color: #fff;
  font-weight: 600;
}

/* ==========================================================================
   NHÂN SỰ
   ========================================================================== */
.team-band{ background:linear-gradient(180deg, var(--tan-soft) 0%, var(--blush-2) 58%, var(--white) 100%); }
.team{ display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:1.3rem; }
.member{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:1rem 1rem 1.4rem;
  text-align:center; transition:.24s;
}
.member:hover{ box-shadow:var(--shadow-md); transform:translateY(-4px); }
.member__img{
  border-radius:var(--r-md) var(--r-md) 40px var(--r-md); overflow:hidden; aspect-ratio:3/4;
  background:var(--tan-soft); margin-bottom:1.1rem;
}
.member__img img{ width:100%; height:100%; object-fit:cover; }
.member__role{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brown); }
.member__deg{ font-size:.76rem; color:var(--muted); margin-top:.2rem; }
.member h3{ font-size:1.16rem; margin:.3rem 0 .25rem; }
.member__spec{ font-size:.84rem; color:var(--body); margin-bottom:1.1rem; font-weight:300; }

.profile{ display:grid; grid-template-columns: 340px 1fr; gap:clamp(24px,4vw,54px); align-items:start; }
@media (max-width: 860px){ .profile{ grid-template-columns:1fr; } }
.profile__img{
  border-radius:var(--r-petal); overflow:hidden; aspect-ratio:3/4;
  box-shadow:var(--shadow-lg); border:8px solid #fff; outline:1px solid var(--tan-line);
}
.profile__img img{ width:100%; height:100%; object-fit:cover; }
.profile__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.8rem; padding-top:1.5rem; border-top:1px solid var(--tan-line); }

.journey{ display:grid; gap:.6rem; margin-top:1rem; }
.jitem{
  display:grid; grid-template-columns: 104px 1fr; gap:1.1rem; align-items:start;
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-md); padding:1rem 1.3rem;
}
@media (max-width: 560px){ .jitem{ grid-template-columns:1fr; gap:.2rem; } }
.jitem b{ font-family:var(--serif); color:var(--brown); font-size:1.02rem; font-weight:500; }
.jitem h4{ margin:0 0 .2rem; font-family:var(--sans); font-size:.94rem; font-weight:500; color:var(--ink); }
.jitem p{ margin:0; font-size:.85rem; }

.certs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1.2rem; }
.cert figure{
  margin:0; border-radius:var(--r-md); overflow:hidden; background:#fff;
  padding:.55rem; border:1px solid var(--gold-ring); box-shadow:var(--shadow-sm);
}
.cert img{ width:100%; aspect-ratio:4/3; object-fit:cover; object-position:top; border-radius:6px; }
.cert figcaption{ font-size:.79rem; color:var(--body); padding:.75rem .35rem .25rem; line-height:1.5; font-weight:300; }
.cert b{ display:block; color:var(--brown); font-size:.76rem; margin-bottom:.2rem; font-weight:600; }

/* ==========================================================================
   SẢN PHẨM — lọc bên phải
   ========================================================================== */
.shop-layout{ display:grid; grid-template-columns: 1fr 286px; gap:clamp(20px,3vw,36px); align-items:start; }
@media (max-width: 980px){ .shop-layout{ grid-template-columns:1fr; } .shop__filter{ order:-1; } }
.shop__filter{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:1.4rem;
  box-shadow:var(--shadow-sm); position:sticky; top:calc(var(--header-h) + 18px);
}
@media (max-width: 980px){ .shop__filter{ position:static; } }
.filter-group{ padding-block:1.1rem; border-top:1px solid var(--line); }
.filter-group:first-of-type{ border-top:0; padding-top:0; }
.filter-group h4{ font-family:var(--sans); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brown); margin:0 0 .85rem; font-weight:600; }
.filter-opt{ display:flex; align-items:center; gap:.6rem; padding:.34rem 0; font-size:.88rem; color:var(--body); cursor:pointer; font-weight:300; }
.filter-opt input{ accent-color:var(--brown); width:16px; height:16px; }
.shop__toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; margin-bottom:1.3rem; }
.shop__count{ font-size:.86rem; color:var(--muted); margin-right:auto; font-weight:300; }
.select{ border:1px solid var(--line); border-radius:var(--r-pill); padding:.58rem 1.1rem; background:#fff; font-size:.86rem; }
.products{ display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); gap:1rem; }
.product{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  display:flex; flex-direction:column; transition:.22s;
}
.product:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:var(--tan-line); }
.product__img{
  aspect-ratio:1/1; background:linear-gradient(150deg,var(--blush) ,var(--tan-soft));
  display:grid; place-items:center; position:relative; overflow:hidden;
}
.product__img img{ width:100%; height:100%; object-fit:cover; }
.product__ph{ color:var(--muted); font-size:.75rem; text-align:center; padding:1rem; font-weight:300; }
.product__badge{
  position:absolute; top:.6rem; left:.6rem; background:var(--brown); color:#fff;
  font-size:.66rem; padding:.3em .8em; border-radius:var(--r-pill);
}
.product__body{ padding:.95rem; display:flex; flex-direction:column; gap:.32rem; flex:1; }
.product__brand{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brown); }
.product__name{ font-size:.89rem; font-weight:500; color:var(--ink); line-height:1.45; }
.product__meta{ font-size:.77rem; color:var(--muted); font-weight:300; }
.product__foot{ margin-top:auto; padding-top:.7rem; display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.product__price{ color:var(--brown-deep); font-size:.93rem; font-weight:600; }
.empty{ grid-column:1/-1; text-align:center; padding:3rem 1rem; color:var(--muted); }

/* ==========================================================================
   FORM ĐẶT LỊCH + LIÊN HỆ
   ========================================================================== */
.booking{ display:grid; grid-template-columns: 1.25fr 1fr; gap:0; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md); }
@media (max-width: 820px){ .booking{ grid-template-columns:1fr; } }
.booking__form{ background:#fff; padding:clamp(22px,3vw,40px); }
.booking__form h2{ text-align:center; font-size:clamp(1.3rem,2.2vw,1.75rem); margin-bottom:1.5rem; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin-bottom:.8rem; }
@media (max-width: 520px){ .field-row{ grid-template-columns:1fr; } }
.field{
  width:100%; border:1px solid var(--line); border-radius:var(--r-sm); padding:.85rem 1rem;
  background:#fff; outline:0; transition:.18s; font-size:.9rem; font-weight:300;
}
.field:focus{ border-color:var(--brown); box-shadow:0 0 0 3px var(--tan-soft); }
textarea.field{ min-height:96px; resize:vertical; }
.form-note{ font-size:.76rem; color:var(--muted); margin:.9rem 0 0; text-align:center; font-weight:300; }
.form-ok{
  display:none; background:var(--tan-soft); border:1px solid var(--tan-line); color:var(--brown-deep);
  border-radius:var(--r-sm); padding:.9rem 1.1rem; font-size:.88rem; margin-bottom:1rem;
}
.form-ok.is-shown{ display:block; }

.booking__info{ background:var(--brown); color:#fff; padding:clamp(22px,3vw,40px); }
.booking__info h2{ color:#fff; text-align:center; font-size:clamp(1.3rem,2.2vw,1.75rem); margin-bottom:1.5rem; }
.info-row{ display:flex; justify-content:space-between; gap:1rem; padding:.9rem 0; border-bottom:1px solid rgba(255,255,255,.2); font-size:.88rem; font-weight:300; }
.info-row:last-child{ border-bottom:0; }
.info-row span:first-child{ color:rgba(255,255,255,.78); }
.info-row span:last-child{ font-weight:500; text-align:right; }

.map-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:1.1rem; box-shadow:var(--shadow-sm); }
.map-card h3{ text-align:center; font-size:1.1rem; margin-bottom:.9rem; }
.map-card iframe{ width:100%; height:300px; border:0; border-radius:var(--r-md); display:block; }

/* ==========================================================================
   CHÂN TRANG — nền ảnh background thương hiệu Foxy M.D
   ========================================================================== */
.footer{
  background: url('../img/banner/footer-bg.webp') center top / cover no-repeat, #FAF4EB;
  padding-top: 0;
  position: relative;
}
.footer__wave{ display:block; width:100%; height:clamp(30px,4vw,58px); margin-bottom:clamp(16px,3vw,34px); }
.footer__wave path{ fill:var(--white); }
.footer__grid{ display:grid; grid-template-columns: 1.15fr .8fr 1fr; gap:clamp(24px,4vw,48px); }
@media (max-width: 900px){ .footer__grid{ grid-template-columns:1fr; } }
.footer h4{
  font-family:var(--serif); font-size:1rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); margin-bottom:1.2rem; font-weight:500;
}
.hotline{
  display:inline-flex; align-items:center; gap:.85rem; background:var(--brown); color:#fff;
  border-radius:var(--r-pill); padding:.55rem 1.5rem .55rem .55rem; margin-bottom:1.4rem;
  box-shadow:0 10px 22px rgba(184,145,42,.32);
}
.hotline__ring{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.2); display:grid; place-items:center; }
.hotline small{ display:block; font-size:.62rem; letter-spacing:.14em; opacity:.9; }
.hotline b{ font-size:1.14rem; letter-spacing:.05em; font-weight:600; }
.f-list{ display:grid; gap:.7rem; }
.f-list li{ display:flex; gap:.65rem; font-size:.86rem; color:var(--body); align-items:flex-start; font-weight:300; }
.f-list svg{ flex:0 0 auto; width:16px; height:16px; color:var(--brown); margin-top:.25em; }
.f-links{ display:grid; gap:.55rem; margin-bottom:1.4rem; }
.f-links a{ font-size:.87rem; color:var(--body); display:flex; gap:.5rem; align-items:center; font-weight:300; }
.f-links a::before{ content:"›"; color:var(--brown); font-size:1.15em; }
.f-links a:hover{ color:var(--brown); }
.f-cert{ border:2px solid var(--gold-ring); border-radius:var(--r-sm); padding:5px; background:#fff; max-width:220px; }
.f-cert img{ width:100%; aspect-ratio:4/3; object-fit:cover; object-position:top; border-radius:3px; }

.footer__legal{
  margin-top:clamp(28px,4vw,46px); background:#fff; border:1px solid var(--line);
  border-radius:var(--r-md); padding:1.2rem 1.5rem; text-align:center;
}
.footer__legal b{ display:block; font-size:.82rem; letter-spacing:.08em; color:var(--ink); margin-bottom:.4rem; }
.footer__legal p{ font-size:.77rem; color:var(--muted); margin:0; line-height:1.65; }
.footer__bar{ margin-top:1.4rem; padding:1.1rem 0 1.5rem; border-top:1px solid var(--tan-line); font-size:.78rem; color:var(--muted); text-align:center; font-weight:300; }

/* Utilities */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,36px); }
@media (max-width:820px){ .grid-2{ grid-template-columns:1fr; } }
.mt-lg{ margin-top:clamp(30px,5vw,58px); }
.center{ text-align:center; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
[hidden]{ display:none !important; }

.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .75s cubic-bezier(.22,.7,.25,1), transform .75s cubic-bezier(.22,.7,.25,1);
  will-change:opacity, transform;
}
/* reveal ngang: dùng overflow-x:clip ở body để 40px lệch không đẻ ra thanh cuộn ngang
   (clip chứ không hidden — hidden sẽ làm hỏng header position:sticky) */
.reveal--left { transform:translateX(-40px); }
.reveal--right{ transform:translateX(40px); }
.reveal--zoom { transform:scale(.95); }
/* trên điện thoại thì trượt lên, không trượt ngang */
@media (max-width: 880px){
  .reveal--left, .reveal--right{ transform:translateY(26px); }
}
.reveal.is-in{ opacity:1; transform:none; }

/* ==========================================================================
   CHUYỂN ĐỘNG — hiệu ứng vào trang, trôi nhẹ, ảnh zoom chậm
   ========================================================================== */
@keyframes fadeUp   { from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:none; } }
@keyframes fadeRight{ from{ opacity:0; transform:translateX(46px) scale(.97); } to{ opacity:1; transform:none; } }
@keyframes floaty   { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
@keyframes kenburns { from{ transform:scale(1); } to{ transform:scale(1.08); } }
@keyframes pulseRing{ 0%{ box-shadow:0 0 0 0 rgba(212,175,55,.5); } 70%{ box-shadow:0 0 0 14px rgba(212,175,55,0); } 100%{ box-shadow:0 0 0 0 rgba(212,175,55,0); } }

/* Hero vào trang: từng dòng chạy lên so le */
.hero__card > *{ animation:fadeUp .85s cubic-bezier(.22,.7,.25,1) both; }
.hero__card > *:nth-child(1){ animation-delay:.05s; }
.hero__card > *:nth-child(2){ animation-delay:.16s; }
.hero__card > *:nth-child(3){ animation-delay:.28s; }
.hero__card > *:nth-child(4){ animation-delay:.40s; }
.hero__card > *:nth-child(5){ animation-delay:.52s; }
/* vào trang trước, xong mới trôi lên xuống nhẹ */
.hero__frame{
  animation:
    fadeRight 1s cubic-bezier(.22,.7,.25,1) both .2s,
    floaty 8s ease-in-out infinite 1.25s;
}

/* Ảnh hero đang hiện thì zoom chậm (Ken Burns) */
.hero__slide.is-active{ animation:kenburns 9s ease-out both; }

/* Nút gọi nổi + nút chính có nhịp thở nhẹ */
.fab__call{ animation:pulseRing 2.6s ease-out infinite; }

/* Ảnh trong thẻ phóng nhẹ khi rê chuột */
.group-card, .member, .post, .pcard, .tech{ will-change:transform; }
.post__img img, .member__img img, .pcard__img img, .sblock__media img, .facility__main img{
  transition:transform .7s cubic-bezier(.22,.7,.25,1);
}
.post:hover .post__img img,
.member:hover .member__img img,
.pcard:hover .pcard__img img,
.sblock__media figure:hover img{ transform:scale(1.06); }

/* Gạch chân chạy dưới link menu */
.nav__link{ position:relative; }
.nav__link::after{
  content:""; position:absolute; left:50%; right:50%; bottom:4px; height:1.5px;
  background:var(--brown); border-radius:2px; transition:left .28s ease, right .28s ease;
}
.nav__link:hover::after{ left:24%; right:24%; }
.nav__link.is-active::after{ left:50%; right:50%; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ==========================================================================
   NOTE / MẢNG VÀNG ĐẬM  →  GRADIENT NÂU  (user chốt 04/09/2026)
   Lấy 2 màu từ dải gradient trong ảnh mẫu user gửi:
     · màu ĐẬM  #3A2A1D   (mép trái/dưới của dải)
     · màu NHẠT #A5876A   (mép phải/trên của dải)
   Khối này đứng CUỐI file để đè lên các quy tắc vàng #B8912A ở trên.
   Muốn trả lại màu vàng cũ: xoá nguyên khối này.
   ========================================================================== */
:root{
  --plate-dark:  #3A2A1D;
  --plate-light: #A5876A;
  /* dải chính — dùng cho mọi note/mảng vàng đậm cũ */
  --grad-plate:  linear-gradient(115deg,#3A2A1D 0%,#55402E 42%,#7A5E44 74%,#A5876A 100%);
  /* dải nghiêng-tối — dùng cho mảng CÓ CHỮ NHỎ, giữ tương phản đọc được */
  --grad-plate-deep: linear-gradient(115deg,#33251A 0%,#4A3728 55%,#6B5238 100%);
  --plate-shadow: 0 10px 24px rgba(58,42,29,.30);
}

/* — note / dải / mảng lớn — */
.why__title{ background:var(--grad-plate); box-shadow:none; }
.ribbon{ background:var(--grad-plate); }
.hotline{ background:var(--grad-plate); box-shadow:none; }

/* mảng nhiều chữ nhỏ → dùng dải tối hơn cho dễ đọc */
.booking__info{ background:var(--grad-plate-deep); }

/* — nút / pill / badge nhỏ — */
.btn--gold, .btn--royal{ background:var(--grad-plate); box-shadow:none; }
.btn--gold:hover, .btn--royal:hover{
  background:linear-gradient(115deg,#4A3728 0%,#6B5238 45%,#8E7052 78%,#B79470 100%);
}
.nav__link.is-active{ background:var(--grad-plate); }
.chip.is-active{ background:var(--grad-plate); border-color:var(--plate-dark); }
.pager button.is-active{ background:var(--grad-plate); border-color:var(--plate-dark); }
.product__badge{ background:var(--grad-plate); }
.fab__call{ background:var(--grad-plate); }
.btn--ghost:hover{ background:var(--grad-plate); color:#fff; }
.playlink:hover .playlink__ring{
  background:var(--grad-plate); color:#fff; border-color:var(--plate-dark);
}

/* ==========================================================================
   VÁ 2 — BỎ BÓNG CÁC THANH + ĐỔI CHỮ XANH NAVY SANG NÂU ĐẬM
   (user chốt 04/09/2026, lần 2)
   ① Mọi thanh/nút/pill nâu: box-shadow → none (phẳng, không đổ bóng).
   ② Navy #0A2463 (chữ tiêu đề, --ink, --brown-deep, dải Bảng giá)
      → nâu đậm #3A2A1D / #2E2118, đồng bộ với dải gradient nâu ở trên.
   ========================================================================== */
:root{
  --ink:        #3A2A1D;   /* trước: navy #0A2463 — tiêu đề & chữ mạnh */
  --brown-deep: #2E2118;   /* trước: navy #0A2463 */
}

/* ① BỎ BÓNG */
.btn--gold, .btn--royal,
.btn--gold:hover, .btn--royal:hover,
.why__title,
.hotline,
.pricebanner,
.fab a, .fab__call, .fab__zalo{
  box-shadow:none;
}
/* vòng nhấp nháy quanh nút gọi cũng là bóng — tắt luôn */
.fab__call{ animation:none; }

/* ② DẢI BẢNG GIÁ: navy → nâu đậm */
.pricebanner{ background:var(--grad-plate-deep); }

/* nút Zalo trước là navy, nay theo tông nâu đậm */
.fab__zalo{ background:var(--brown-deep); }

/* nút mũi tên + số đếm trên ảnh hero còn nền navy mờ → nâu đậm mờ */
.hero__arrow{ background:rgba(58,42,29,.34); }
.hero__counter{ background:rgba(58,42,29,.40); }

/* ==========================================================================
   VÁ 3 — NỀN TRANG: BỚT VÀNG NHƯNG GIỮ RÕ DẢI GRADIENT
   (user chốt 04/09/2026 — sửa lần 2)

   Bài học lần 1: hạ đầu đậm về gần trắng thì HẾT vàng nhưng cũng HẾT gradient
   (hai đầu chỉ chênh 4 nấc sáng → mắt thấy phẳng lì).
   Cách đúng: giảm BÃO HOÀ (độ vàng) và KÉO GIÃN độ sáng hai đầu.

     đầu NHẠT  #FFFCF4 → #FFFFFF   (trắng hẳn)
     đầu ĐẬM   #FFF3DC → #F0E8DA   (be ấm, bão hoà 100% → 42%)
     chênh sáng 5 nấc → 10 nấc  ⇒ dải chuyển rõ HƠN bản gốc
   Muốn vàng gắt lại như cũ: xoá nguyên khối này.
   ========================================================================== */
:root{
  --blush:   #F0E8DA;
  --blush-2: #FAF6EE;
  --cream:   #F6F0E6;
}

.hero{
  background:
    radial-gradient(90% 80% at 84% 14%, rgba(236,225,205,.55) 0%, rgba(236,225,205,0) 60%),
    linear-gradient(168deg, #FFFFFF 0%, #FCF9F3 46%, #F0E8DA 100%);
}

.section--cream{ background:linear-gradient(180deg,#FFFFFF 0%,#FBF7F0 52%,#F1EADD 100%); }
.section--white{ background:linear-gradient(180deg,#FFFFFF 0%,#FBF8F2 100%); }
.section--blush{ background:linear-gradient(180deg,#FAF6EE 0%,#EFE7D9 100%); }
.team-band{ background:linear-gradient(180deg,#F4EEE3 0%,#FAF6EE 58%,#FFFFFF 100%); }

/* thẻ nhóm dịch vụ — theo tông nền mới */
.catpill{ background:linear-gradient(135deg,#FFFFFF 0%,#F0E8DA 100%); }
.catpill:hover{ background:linear-gradient(135deg,#F8F2E8 0%,#E7DCC8 100%); }

/* ==========================================================================
   VÁ 4 — 3 LỖI GIAO DIỆN (user báo 04/09/2026)
   ========================================================================== */

/* ① DẢI "SỨ MỆNH": clip-path cắt hình chữ V ở mép trên/dưới khiến nền trang
      (gần trắng) lọt vào thành 2 nêm trắng. Bỏ cắt → mép thẳng, hết lọt trắng. */
.ribbon{ clip-path:none; }

/* ② MOBILE: ảnh thẻ nhóm dịch vụ đang là BẦU DỤC (4/5) nên nhìn méo.
      Trên điện thoại đổi thành HÌNH TRÒN thật (1/1). Desktop giữ bầu dục. */
@media (max-width: 1040px){
  .catpill__img{ aspect-ratio:1/1; flex-basis:clamp(76px,20vw,96px); }
}

/* ==========================================================================
   VÁ 5 — CHÂN TRANG: SÓNG TRẮNG NỐI LIỀN NỀN TRẮNG PHÍA TRÊN
   ========================================================================== */
.footer__wave path{ fill:#FFFFFF !important; }
main > section:last-of-type{
  background:#FFFFFF !important;
}

/* ==========================================================================
   VÁ 6 — TRẢ LẠI KHÍA CHỮ V CHO DẢI "SỨ MỆNH", LẤP MÀU BE VÀO
   (user chốt 04/09/2026)
   Trước: clip-path cắt khía V → lộ nền gần TRẮNG của khối trên/dưới.
   Nay: bọc dải trong .ribbon-bed nền BE, và cho 2 khối kề chuyển dần
   về đúng màu be đó ⇒ khía V vẫn thấy, nhưng lộ ra màu be chứ không phải trắng.
   ========================================================================== */
.ribbon{
  clip-path:polygon(0 0, 50% 26px, 100% 0, 100% 100%, 50% calc(100% - 26px), 0 100%);
}
.ribbon-bed{ background:var(--blush); }

/* khối ngay TRƯỚC dải: chìm dần xuống màu be của lớp nền */
.section--to-ribbon{
  background:linear-gradient(180deg,#FFFFFF 0%,#FBF7F0 58%,#F0E8DA 100%);
}
/* khối ngay SAU dải: đi lên từ chính màu be đó */
.section--from-ribbon{
  background:linear-gradient(180deg,#F0E8DA 0%,#F6F1E7 38%,#FCF9F3 100%);
}

/* ==========================================================================
   VÁ 7 — LOGO THẬT (user chốt 04/09/2026, sửa lại 18:20)
   Ảnh: assets/img/brand/logo-doc.png = ĐÚNG FILE GỐC khách gửi, xếp DỌC
   (biểu tượng ở trên — FOXY M.D — DERMATOLOGY & AESTHETIC CLINIC ở dưới).
   Chỉ cắt bỏ viền trống quanh ảnh, KHÔNG sắp xếp lại, KHÔNG kéo méo.
   Tỉ lệ 1179 x 809 (1.457 : 1).

   ⛔ KHÔNG đụng --header-h (vẫn 80px). Logo cao 64px nằm gọn trong 80px,
      còn dư 8px trên/dưới — chiều cao menu giữ y nguyên.
   ========================================================================== */
.brand__logo{
  height:64px; width:auto; display:block; flex:0 0 auto;
}
@media (max-width: 880px){ .brand__logo{ height:56px; } }
@media (max-width: 420px){ .brand__logo{ height:48px; } }

/* ==========================================================================
   VÁ 8 — NỀN CHÂN TRANG THEO ẢNH BACKGROUND THƯƠNG HIỆU FOXY M.D
   ========================================================================== */
.footer__wave path{ fill:#FFFFFF; }
.footer{
  background: url('../img/banner/footer-bg.webp') center top / cover no-repeat, #FAF4EB !important;
  position: relative !important;
}
.footer__bar{ border-top-color:rgba(74,50,34,0.12); }

/* ==========================================================================
   VÁ 9 — NÚT NỔI LIÊN HỆ GỌN GÀNG TRÊN ĐIỆN THOẠI
   ========================================================================== */
@media (max-width: 880px){
  .fab{
    position: fixed;
    right: 14px;
    bottom: 20px;
    left: auto;
    width: auto;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: flex-end !important;
    z-index: 999 !important;
    padding: 0 !important;
  }
}

/* ==========================================================================
   VÁ 10 — HẠ CHIỀU CAO MENU TRÊN ĐIỆN THOẠI (Nam An 56px, Foxy đang 80px)
   Máy tính giữ nguyên 80px. Chỉ hạ ở khổ hẹp, logo to lên theo tỉ lệ khung.
   ========================================================================== */
@media (max-width: 880px){
  :root{ --header-h: 64px; }
  .brand__logo{ height:52px; }             /* chừa 6px trên/dưới */
}
@media (max-width: 420px){
  :root{ --header-h: 62px; }
  .brand__logo{ height:50px; }
}

/* Ô báo kết quả gửi form: thêm trạng thái lỗi */
.form-ok.is-error{ color:#8C3A2A; }

/* ═══════════ VÁ 11 — DẢI TIN CẬY: ĐÁNH GIÁ GOOGLE THẬT (04/09) ═══════════
   Số 4,9 / 588 đọc từ hồ sơ Google Business ngày 04/09/2026.
   Đổi số ở _seo/dai_tin_cay.py rồi chạy lại script, ĐỪNG sửa tay từng trang. */
.gproof{ background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.gproof__in{ max-width:var(--wrap); margin-left:auto; margin-right:auto;
             padding:.9rem var(--gut); display:flex; align-items:center; justify-content:center;
             gap:.7rem; flex-wrap:wrap; text-decoration:none; color:var(--ink); }
.gproof__score{ font-family:var(--serif); font-size:1.65rem; line-height:1; font-weight:600;
                color:var(--brown-dark); font-variant-numeric:tabular-nums; }
.gproof__stars{ color:var(--tan); letter-spacing:.1em; font-size:1.02rem; line-height:1; }
.gproof__txt{ color:var(--body); font-size:.94rem; }
.gproof__txt b{ color:var(--ink); font-weight:600; }
.gproof__go{ font-size:.75rem; text-transform:uppercase; letter-spacing:.11em; font-weight:600;
             color:var(--brown-dark); border-bottom:1px solid var(--tan-line); padding-bottom:2px;
             transition:border-color .2s ease; }
.gproof__in:hover .gproof__go{ border-bottom-color:var(--brown-dark); }
.gproof__in:focus-visible{ outline:2px solid var(--gold-ring); outline-offset:-4px; }
@media (max-width: 560px){
  .gproof__in{ gap:.5rem; padding:.75rem var(--gut); }
  .gproof__score{ font-size:1.4rem; }
  .gproof__stars{ font-size:.92rem; }
  .gproof__txt{ font-size:.85rem; }
  .gproof__go{ display:none; }
}
.map-card__go{ margin:.75rem 0 0; font-size:.9rem; }
.map-card__go a{ color:var(--brown-dark); text-decoration:none; border-bottom:1px solid var(--tan-line); }
.map-card__go a:hover{ border-bottom-color:var(--brown-dark); }

/* ═══════════ VÁ 12 — HỌC GIAO DIỆN + HIỆU ỨNG NAM AN (user 12/09/2026) ═══════════
   ① 3 thẻ nhóm dịch vụ = đúng khuôn thẻ "Điêu Khắc…" của benhvienthammynaman.com:
      nền be phẳng, bo 0 / 99 / 99 / 0 (vuông bên trái, tròn bên phải), ảnh chiếm 35% bo chéo 0 / 28,
      tiêu đề serif to. Rê chuột: nền chuyển NÂU-VÀNG #AB8D6B, chữ trắng, nút trắng, ảnh phóng nhẹ,
      vệt chạy vòng (canvas .fx-ring do main.js vẽ). 12/09 user: BỎ ngôi sao, vệt mảnh 1/2, gradient NÂU.
   ② Ảnh lớn (khung hero, ảnh ghép "Vì sao chọn", ảnh cơ sở, ảnh bác sĩ trang Nhân sự):
      vệt nâu chạy + ảnh phóng nhẹ.
   ③ Khối "Tham vấn y khoa" (.eeat) là section CUỐI của <main> → ăn luật VÁ 5 (nền trắng→be)
      nhưng khối chỉ rộng 1120px ⇒ 2 bên lộ nền TRẮNG của body (user khoanh 12/09).
      Nay khối chạy hết bề ngang, nền nối tiếp đúng màu đáy khối trên (#FBF8F2) xuống màu sóng chân trang (#F0E8DA). */

/* ---- ① thẻ nhóm dịch vụ ---- */
.catpills{ max-width:1180px; gap:clamp(14px,1.6vw,24px); }
.catpill{
  position:relative; align-items:center; gap:0;
  background:#F3ECE0; border-radius:0 99px 99px 0;
  padding:clamp(20px,2vw,28px) clamp(18px,1.8vw,26px) clamp(20px,2vw,28px) clamp(14px,1.3vw,18px);
  transform:none; box-shadow:none;
  transition:background .35s ease, box-shadow .35s ease;
}
.catpill:hover, .catpill.is-fx-on{
  background:#AB8D6B;                       /* 12/09 user chốt: đúng tông nâu-vàng Nam An */
  transform:none; box-shadow:0 20px 40px -24px rgba(110,84,56,.55);
}
.catpill__img{ flex:0 0 35%; aspect-ratio:1/1.2; border-radius:0 28px; overflow:hidden; background:#fff; }
.catpill__img img{ transition:transform .6s ease; }
.catpill:hover .catpill__img img, .catpill.is-fx-on .catpill__img img{ transform:scale(1.03); }
.catpill__body{ padding-left:18px; }
.catpill h3{
  font-size:clamp(1.15rem,1.75vw,1.6rem); line-height:1.25; color:#8A6D3B;
  margin:0 0 .95rem; transition:color .3s ease;
}
.catpill:hover h3, .catpill.is-fx-on h3{ color:#fff; }
.catpill .btn{ font-size:.8rem; padding:.6em .55em .6em 1.2em; transition:background .3s ease, color .3s ease; }
.catpill .btn--arrow i{ width:22px; height:22px; }
.catpill:hover .btn, .catpill.is-fx-on .btn{ background:#fff; color:#8A6D4D; box-shadow:none; transform:none; }
.catpill:hover .btn--arrow i, .catpill.is-fx-on .btn--arrow i{ background:rgba(171,141,107,.18); }
@media (max-width: 1040px){
  .catpills{ grid-template-columns:1fr; max-width:460px; }
  .catpill__img{ aspect-ratio:1/1.2; flex-basis:35%; }
}

/* ---- ② vệt vàng chạy + sao ---- */
.why__collage figure, .facility__main, .member__img{ position:relative; overflow:hidden; }
.fx-ring{ position:absolute; left:0; top:0; pointer-events:none; z-index:4; max-width:100%; max-height:100%; }
/* 12/09: user bỏ toàn bộ ngôi sao — chỉ còn vệt chạy màu nâu (vẽ trong main.js) */
.why__collage figure img, .facility__main img, .member__img img{ transition:transform .6s ease; }
.why__collage figure.is-fx-on img, .facility__main.is-fx-on img, .member__img.is-fx-on img{ transform:scale(1.03); }
@media (prefers-reduced-motion: reduce){ .fx-ring{ display:none; } }

/* ---- ③ khối Tham vấn y khoa ---- */
main > section.eeat{
  max-width:none; margin:0;
  padding:clamp(6px,1vw,14px) max(20px, calc((100% - 1080px) / 2)) 34px;
}

/* ==========================================================================
   VÁ 13 — NỀN TRẮNG + ĐỔI MÀU THẺ MÁY (user chốt 13/09/2026 14:25)
   ① Hero: bỏ nền kem/be → TRẮNG hẳn
   ② Khối "Cơ sở vật chất" + "Máy & công nghệ" (.section--white): TRẮNG hẳn, bỏ ngả be ở đáy
   ③ Thẻ máy (.device): ĐỔI MÀU với nền — nền trắng, thẻ màu be (cùng tông thẻ nhóm dịch vụ #F3ECE0)
   Muốn trả lại: xoá nguyên khối này (backup _…20260913-1425_truoc-nen-trang-doi-mau-the-may)
   ========================================================================== */
.hero{ background:#FFFFFF; }
.section--white{ background:#FFFFFF; }
.device{ background:#F3ECE0; border-color:#E6D9C3; }
.device__img{ background:transparent; }

/* ==========================================================================
   VÁ 14 — MỘT DẢI GRADIENT KEM → TRẮNG DÙNG CHUNG (user chốt 13/09/2026 14:40)
   Mẫu user gửi: trên KEM ĐÀO nhạt → dưới TRẮNG.
   ① Thanh menu (.header)
   ② Khối "Hành trình chuyên môn" (khối ngay SAU dải Sứ mệnh = .section--from-ribbon)
   ③ Ô nhóm dịch vụ (.group-card — trang Bảng giá / Dịch vụ), kể cả lúc rê chuột
   Muốn trả lại: xoá nguyên khối này (backup _…20260913-1440_truoc-gradient-menu-hanh-trinh-o-dv)
   ========================================================================== */
:root{ --grad-kem: linear-gradient(180deg, #FFF2DE 0%, #FFFFFF 100%); }

.header,
.header.is-scrolled{ background:var(--grad-kem); }

.section--from-ribbon{ background:var(--grad-kem); }
/* khía V đáy dải Sứ mệnh lộ nền .ribbon-bed → nửa dưới lấy đúng màu đầu gradient để liền mạch
   (nửa trên giữ be #F0E8DA vì khối phía trên vẫn chìm về be) */
.ribbon-bed{ background:linear-gradient(180deg, var(--blush) 50%, #FFF2DE 50%); }

.group-card,
.group-card:hover{ background:var(--grad-kem); }

/* ==========================================================================
   VÁ 15 — ĐẠI TU TRANG CHỦ (user chốt 13/09/2026 17:35)
   ① Font: Inter = font CHÍNH (chữ thường), Playfair Display = font PHỤ (tiêu đề)
   ② Màu: tiêu đề chính NÂU · mô tả phụ ĐEN (toàn web)
   ③ Section 1: ảnh bìa chữ nhật (3 bản cắt điện thoại/iPad/máy tính) + thanh thông tin đè đáy + tiêu đề
   ④ Vì sao chọn: 1 ảnh, cột chữ CAO BẰNG ảnh (không hở trên/dưới), bỏ dải số 10+/1.000+/70+
   ⑤ Đội ngũ 2 bác sĩ (Hưng + Thúy) — bấm bác sĩ mới hiện Hành trình chuyên môn / giấy phép
   ⑥ Dịch vụ trang chủ: thẻ catpill, 3 ô đầu + Xem thêm 3 / Thu gọn · trang Dịch vụ: 4 ô + Xem thêm
   ⑦ Thẻ máy: khuôn đúng Nam An (đo Chrome 1920px: thẻ 595×389, đệm 30/30/0/3, ảnh 234×397 lòi đáy 38px,
      cột chữ 328 đệm trái 20, tiêu đề 20px lh 32, nhãn nhô -13px cách phải 17px, 2 cột khe 30, hàng khe 60)
   ⑧ Điện thoại ≤768px: dịch vụ · máy · nhóm dịch vụ chạy HÀNG NGANG vuốt
   Muốn trả lại: xoá nguyên khối này + lấy index.html/main.js/content.js từ _BACKUP-foxy-web-moi_20260913-1735_truoc-dai-tu-trang-chu
   ========================================================================== */
:root{
  --font-display: "Beautique-Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif:        "Beautique-Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sans:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --title: #6E4F33;          /* tiêu đề chính = NÂU */
  --body:  #1C1C1C;          /* mô tả phụ = ĐEN (p toàn web dùng biến này) */
}
body{ font-family:var(--sans); }
p{ font-weight:400; }
h1, h2, h3, h4{ font-family:var(--font-display); font-weight:500; color:var(--title); }
.catpill h3, .device h3, .group-card h3, .member h3, .rmap__card h3{ color:var(--title); }
.section-head p, .reason p, .device__list li, .f-list li, .group-card__items, .member__spec{ color:var(--body); font-weight:400; }

/* ---- ③ ảnh bìa + thanh thông tin + tiêu đề ---- */
.cover{ position:relative; background:#FBF6EC; line-height:0; }
.cover picture{ display:block; }
.cover__img{ display:block; width:100%; height:auto; max-height:min(80vh, 780px); object-fit:cover; object-position:center 35%; }
.infobar-wrap{ position:relative; z-index:3; margin-top:clamp(-58px, -4vw, -30px); }
.infobar{
  list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  background:#fff; border:1px solid #F0E6D6; border-radius:18px; overflow:hidden;
  box-shadow:0 20px 46px -20px rgba(74,50,34,.32);
}
.infobar li{ position:relative; margin:0; }
.infobar li + li::before{ content:""; position:absolute; left:0; top:24%; bottom:24%; width:1px; background:#EFE5D5; }
.infobar a{ display:flex; align-items:center; gap:14px; height:100%; padding:18px clamp(14px,1.8vw,26px); transition:background .25s ease; }
.infobar a:hover{ background:#FBF6EE; }
.infobar__icon{ flex:0 0 46px; height:46px; border-radius:50%; display:grid; place-items:center; background:#F3ECE0; color:#8A6D4D; }
.infobar b{ display:block; font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--title); line-height:1.3; }
.infobar small{ display:block; font-size:.78rem; color:#4A4A4A; line-height:1.45; margin-top:3px; }
.infobar__hot .infobar__icon{ background:linear-gradient(135deg,#4A3222 0%,#AB8D6B 100%); color:#fff; }
.infobar__hot small{ font-size:.98rem; font-weight:700; color:#6E4F33; letter-spacing:.02em; }
@media (max-width: 900px){
  .infobar{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .infobar li:nth-child(3)::before{ display:none; }
  .infobar li:nth-child(n+3){ border-top:1px solid #EFE5D5; }
}
@media (max-width: 420px){
  .infobar a{ gap:9px; padding:13px 10px; }
  .infobar__icon{ flex-basis:36px; height:36px; }
  .infobar__icon svg{ width:18px; height:18px; }
  .infobar b{ font-size:.68rem; letter-spacing:.03em; }
  .infobar small{ font-size:.7rem; }
  .infobar__hot small{ font-size:.8rem; }
}
.intro{ background:#fff; text-align:center; padding:clamp(36px,5vw,64px) 0 clamp(6px,1.5vw,16px); }
.intro__in{ max-width:900px; }
.intro__title{
  font-family:var(--font-display); font-weight:500; text-transform:uppercase; letter-spacing:.02em;
  font-size:clamp(1.5rem,3.2vw,2.55rem); line-height:1.28; color:var(--title); margin:0 0 .6em;
}
.intro__title span{ display:block; }
.intro p{ max-width:680px; margin:0 auto 1.4rem; font-size:clamp(.95rem,1.2vw,1.05rem); color:var(--body); }
.intro__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }

/* ---- ④ Vì sao chọn: 1 ảnh, chữ cao bằng ảnh ---- */
.why--single{ align-items:stretch; }
@media (min-width: 941px){
  .why--single{ grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); }
}
.why__media{ position:relative; margin:0; min-height:320px; border-radius:var(--r-lg); overflow:hidden; }
.why__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.why__media.is-fx-on img{ transform:scale(1.03); }
.why__text{ display:flex; flex-direction:column; gap:1.3rem; }
.why__text .why__title{ align-self:flex-start; margin:0; }
.why__text .reasons{ flex:1; align-content:space-between; }
@media (max-width: 940px){
  .why--single{ grid-template-columns:minmax(0,1fr); }
  .why__media{ min-height:0; width:100%; align-self:start; aspect-ratio:4/3; }
}

/* ---- ⑤ Đội ngũ bác sĩ ---- */
.docs{ display:grid; grid-template-columns:repeat(2, minmax(0,300px)); justify-content:center; gap:clamp(16px,3.2vw,48px); }
.doc{
  appearance:none; -webkit-appearance:none; border:0; background:none; padding:0; margin:0; font:inherit; color:inherit;
  cursor:pointer; display:flex; flex-direction:column; align-items:center; text-align:center;
}
.doc__img{
  position:relative; display:block; width:100%; aspect-ratio:4/5; overflow:hidden;
  border-radius:26px 26px 0 0; border-bottom:3px solid #AB8D6B;
  background:radial-gradient(85% 70% at 50% 32%, #FFFFFF 0%, #F7EFE2 58%, #EADCC4 100%);
}
.doc__img picture, .doc__img img{ position:absolute; inset:0; width:100%; height:100%; }
.doc__img img{ object-fit:contain; object-position:bottom center; transform-origin:bottom center; transition:transform .6s ease; }
.doc:hover .doc__img img, .doc.is-active .doc__img img, .doc__img.is-fx-on img{ transform:scale(1.03); }
.doc__deg{ margin-top:14px; font-size:.78rem; color:#555; letter-spacing:.04em; }
.doc__name{ margin-top:2px; font-family:var(--font-display); font-weight:500; text-transform:uppercase; letter-spacing:.03em; font-size:clamp(1.02rem,1.5vw,1.25rem); color:var(--title); line-height:1.3; }
.doc__role{ margin-top:4px; font-size:.86rem; color:var(--body); }
.doc__pill{
  margin-top:12px; display:inline-flex; align-items:center; gap:6px; padding:.52em 1.15em; border-radius:99px;
  background:#F3ECE0; color:#6E4F33; font-size:.8rem; font-weight:600; transition:background .25s ease, color .25s ease;
}
.doc__pill i{ font-style:normal; transition:transform .3s ease; }
.doc:hover .doc__pill{ background:#AB8D6B; color:#fff; }
.doc.is-active .doc__pill{ background:linear-gradient(135deg,#4A3222 0%,#AB8D6B 100%); color:#fff; }
.doc.is-active .doc__pill i{ transform:rotate(180deg); }
.doc:focus-visible{ outline:2px solid #AB8D6B; outline-offset:6px; border-radius:26px; }
.doc-panel{ margin-top:clamp(28px,4vw,52px); animation:docIn .45s ease both; }
@keyframes docIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.section-head--sm{ margin-bottom:clamp(20px,3vw,34px); }
.section-head--sm h3{ font-size:clamp(1.3rem,2.4vw,1.8rem); margin-bottom:.3em; }
.doc-lic{
  max-width:620px; margin:0 auto; background:#fff; border:1px solid #EFE5D5; border-radius:20px; text-align:center;
  padding:clamp(22px,3vw,34px); box-shadow:0 18px 40px -26px rgba(74,50,34,.35);
}
.doc-lic h3{ margin:.2em 0 .8em; }
.doc-lic__list{ list-style:none; margin:0 0 1.3rem; padding:0; text-align:left; }
.doc-lic__list li{ display:flex; justify-content:space-between; gap:16px; padding:.62rem 0; border-bottom:1px dashed #EADFCD; font-size:.9rem; }
.doc-lic__list li span{ color:#555; }
.doc-lic__list li b{ color:var(--title); font-weight:600; text-align:right; }
@media (max-width: 560px){
  .docs{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
  .doc__pill{ font-size:.68rem; padding:.45em .75em; }
  .doc__role{ font-size:.76rem; }
}

/* ---- ⑥ Xem thêm / Thu gọn ---- */
.catpills--home{ grid-template-columns:repeat(3, minmax(0,1fr)); max-width:1180px; margin-bottom:0; }
@media (max-width: 1040px) and (min-width: 769px){
  .catpills--home{ grid-template-columns:repeat(2, minmax(0,1fr)); max-width:880px; }
}
@media (min-width: 769px){
  .js-more > .is-more-hidden{ display:none !important; }
}
.more-ctrl{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; margin-top:clamp(18px,2.4vw,28px); }
.more-ctrl__count{ width:100%; text-align:center; font-size:.82rem; color:#555; }
.more-ctrl button[hidden]{ display:none !important; }

/* ---- ⑦ Thẻ máy — khuôn Nam An (máy tính / iPad) ---- */
@media (min-width: 769px){
  .devices{ grid-template-columns:repeat(2, minmax(0,595px)); justify-content:center; column-gap:30px; row-gap:68px; }
  .device{
    display:flex; align-items:center; gap:0; border-radius:0; min-height:389px; overflow:visible;
    padding:30px 30px 0 3px;
  }
  .device:hover{ box-shadow:0 22px 44px -30px rgba(74,50,34,.45); }
  .device__img{
    flex:0 0 40%; align-self:flex-start; height:397px; aspect-ratio:auto; margin-bottom:-38px;
    overflow:hidden; background:transparent;
  }
  .device__img img{ width:100%; height:100%; object-fit:cover; }
  .device > div:last-child{ flex:1; min-width:0; padding:0 0 30px 20px; }
  .device h3{ font-size:clamp(1.12rem,1.4vw,1.35rem); line-height:1.5; margin:0 0 .55em; }
  .device__list li{ font-size:.95rem; }
  .device__tag{
    top:-13px; right:17px; background:#fff; border:1px solid rgba(171,141,107,.45); border-radius:30px;
    padding:3px 10px; font-size:.7rem; font-weight:700; letter-spacing:.03em;
  }
}
@media (max-width: 900px) and (min-width: 769px){
  .devices{ grid-template-columns:minmax(0,595px); }
}

/* ---- ⑧ Điện thoại: hàng ngang vuốt ---- */
@media (max-width: 768px){
  .catpills--home, .devices, #serviceGroups.groups{
    display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:82%;
    gap:14px; width:100%; max-width:100%; margin-left:0; margin-right:0;
    overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    padding:6px 2px 16px; scrollbar-width:none;
  }
  .catpills--home::-webkit-scrollbar, .devices::-webkit-scrollbar, #serviceGroups.groups::-webkit-scrollbar{ display:none; }
  .catpills--home > *, .devices > *, #serviceGroups.groups > *{ scroll-snap-align:start; }
  #serviceGroups.groups{ grid-auto-columns:72%; }
  .more-ctrl{ display:none; }
  .devices{ grid-auto-columns:86%; padding-top:18px; }
  .device{ display:flex; flex-direction:column; align-items:stretch; padding:22px 16px 18px; min-height:0; }
  .device__img{ flex:none; width:100%; height:210px; aspect-ratio:auto; margin:0 0 14px; }
  .device__img img{ width:100%; height:100%; object-fit:cover; }
  .device > div:last-child{ padding:0; }
}

/* ==========================================================================
   VÁ 16 — user 13/09/2026 20:25 (4 ảnh khoanh đỏ)
   ① Dải kem lệch màu giữa "Vì sao chọn" (nền trắng) và dải nâu Sứ mệnh → nửa trên .ribbon-bed = TRẮNG
   ② Thẻ dịch vụ trang chủ: ảnh TO kín mép trái (trên → dưới), bỏ thanh "Xem thêm 3 dịch vụ" (main.js data-limit=3)
   ③ Thẻ máy = đúng thẻ Nam An (đo Chrome 1920px): nền trắng viền mảnh, ảnh MÁY tách nền (class device--png) lòi đáy 37px,
      tiêu đề 26px/500, dấu ✓ #AB8D6B, nút #AB8D6B cao 39 bo 99px, nhãn trắng viền hồng + hạt thoi cam
   ④ Thẻ bác sĩ = khuôn thẻ trắng bo góc, ảnh nằm trong khung nền nhạt, tên in hoa đậm, nhãn viên thuốc dưới cùng
   ========================================================================== */
/* ① */
.ribbon-bed{ background:linear-gradient(180deg, #FFFFFF 50%, #FFF2DE 50%); }

/* ② */
.catpills--home .catpill{ padding:0 !important; align-items:stretch; overflow:hidden; min-height:188px; }
.catpills--home .catpill__img{
  flex:0 0 40%; align-self:stretch; aspect-ratio:auto; height:auto; border-radius:0; margin:0; background:#EDE3D3;
}
.catpills--home .catpill__img img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.catpills--home .catpill__body{ align-self:center; padding:18px 26px 18px 20px; }
@media (max-width: 768px){
  .catpills.catpills--home {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: min(84vw, 320px) !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 6px 2px 16px !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .catpills.catpills--home::-webkit-scrollbar { display: none; }
  .catpills.catpills--home > * {
    scroll-snap-align: center;
    min-width: 0;
  }
  .catpills--home .catpill{ min-height:150px; }
  .catpills--home .catpill__img{ flex-basis:40%; }
}

/* ③ */
.device{ background:#FFFFFF; border:1px solid #ECE6DF; border-radius:0; }
.device:hover{ box-shadow:0 22px 44px -30px rgba(72,43,37,.35); }
.device__img, .device--png .device__img{ background:transparent; border-radius:0; }
.device--png .device__img img{ object-fit:contain; object-position:center bottom; }
.device h3{ font-family:var(--serif); font-weight:500; color:var(--title); }
.device__list{ gap:0; margin-bottom:1.3rem; }
.device__list li{ gap:.45rem; color:#482B25; font-weight:400; line-height:1.5; }
.device__list svg{ color:#AB8D6B; width:14px; height:14px; }
.device .btn{
  background:#AB8D6B; background-image:none; color:#fff; border:0; border-radius:99px; box-shadow:none;
  height:39px; padding:0 18px; font-size:.95rem; font-weight:400; gap:.5em;
}
.device .btn:hover{ background:#8A6D4D; transform:none; }
.device .btn--arrow i{ background:none; width:auto; height:auto; color:#fff; font-size:1.05em; }
.device__tag{
  background:#FFFFFF; border:1px solid #F0CBBE; border-radius:30px; color:#3A2A22;
  font-size:.74rem; font-weight:600; letter-spacing:.02em; text-transform:uppercase; padding:4px 12px; box-shadow:none;
}
.device__tag::before{ width:6px; height:6px; border-radius:0; transform:rotate(45deg); background:#E0703F; }
@media (min-width: 769px){
  .device{ padding:30px 30px 0 3px; }
  .device h3{ font-size:clamp(1.3rem,1.45vw,1.62rem); line-height:1.6; margin:0 0 .4em; }
  .device__list li{ font-size:.97rem; }
  .device__img{ flex:0 0 40%; height:397px; margin:0 0 -37px 0; }
  .device--png .device__img{ padding:0 10px; }
}
@media (max-width: 768px){
  .device--png .device__img{ height:240px; }
}

/* ④ */
.docs{ grid-template-columns:repeat(2, minmax(0,290px)); gap:clamp(16px,2.4vw,30px); }
.doc{
  background:#FFFFFF; border:1px solid #EDE3D3; border-radius:18px; padding:10px 10px 18px;
  box-shadow:0 16px 34px -26px rgba(74,50,34,.4); transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.doc:hover{ transform:translateY(-4px); box-shadow:0 24px 44px -26px rgba(74,50,34,.5); }
.doc.is-active{ border-color:#AB8D6B; }
.doc__img{
  aspect-ratio:1/1.08; border-radius:12px; border-bottom:0;
  background:linear-gradient(180deg, #F6EDE0 0%, #FBF7F1 60%, #FFFFFF 100%);
}
.doc__img img{ object-fit:cover; object-position:center top; }
.doc__deg{ margin-top:14px; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:#777; }
.doc__name{ font-size:clamp(.95rem,1.25vw,1.08rem); font-weight:700; margin-top:3px; }
.doc__role{ font-size:.8rem; color:#555; margin-top:3px; }
.doc__pill{ margin-top:12px; background:#F3ECE0; color:#6E4F33; font-size:.74rem; font-weight:600; padding:.45em 1.05em; }
.doc:focus-visible{ border-radius:18px; }
@media (max-width: 560px){
  .docs{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
  .doc{ padding:6px 6px 12px; border-radius:14px; }
  .doc__img{ border-radius:10px; }
  .doc__name{ font-size:.82rem; }
  .doc__pill{ font-size:.64rem; padding:.42em .7em; }
}

/* ==========================================================================
   VÁ 17 — user 14/09/2026 (5 yêu cầu từ ảnh chụp màn hình)
   ① Vệt chạy viền vàng (canvas fx-ring)
   ② Khối Thiết bị công nghệ: Gallery Carousel 3D (3 máy hàng ngang, máy giữa nổi bật, 2 bên chìm)
   ③ Ô nhóm dịch vụ trên dich-vu.html: thẻ có ảnh đại diện, badge số lượng, danh sách tinh tế
   ④ Cụm nút nổi liên hệ: Messenger (gradient Facebook) + Zalo (xanh tròn chuẩn thương hiệu)
   ========================================================================== */

/* ② GALLERY CAROUSEL 3D CHO MÁY & THIẾT BỊ */
.devices{ display:block !important; width:100%; position:relative; overflow:visible !important; }
.dev-carousel{ position:relative; width:100%; max-width:1200px; margin:0 auto; padding:20px 0; }
.dev-stage{
  position:relative; width:100%; height:520px;
  perspective:1000px; overflow:hidden;
}
.dev-card{
  position:absolute; top:20px; left:50%;
  width:clamp(360px, 34vw, 440px);
  min-height:460px;
  border-radius:18px !important;
  box-shadow:0 10px 30px rgba(74,50,34,.08);
  transition:transform .45s cubic-bezier(.25,1,.5,1), opacity .45s ease, box-shadow .45s ease, z-index .45s ease;
  user-select:none;
}
.dev-card.is-active{
  transform:translateX(-50%) scale(1.04);
  z-index:10; opacity:1; pointer-events:auto;
  box-shadow:0 20px 48px rgba(74,50,34,.16);
  border-color:#DFD5C6 !important;
}
.dev-card.is-prev{
  transform:translateX(calc(-50% - clamp(280px, 28vw, 360px))) scale(0.88);
  z-index:4; opacity:0.62; cursor:pointer;
  pointer-events:auto;
}
.dev-card.is-next{
  transform:translateX(calc(-50% + clamp(280px, 28vw, 360px))) scale(0.88);
  z-index:4; opacity:0.62; cursor:pointer;
  pointer-events:auto;
}
.dev-card.is-prev:hover, .dev-card.is-next:hover{
  opacity:0.85;
}
.dev-card.is-hidden{
  transform:translateX(-50%) scale(0.72);
  z-index:1; opacity:0; pointer-events:none;
}

/* Nút điều hướng Carousel Máy */
.dev-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:20;
  width:46px; height:46px; border-radius:50%;
  background:#FFFFFF; border:1.5px solid #ECE6DF; color:#6E4F33;
  box-shadow:0 6px 18px rgba(74,50,34,.12);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .25s ease;
}
.dev-nav--prev{ left:8px; }
.dev-nav--next{ right:8px; }
.dev-nav:hover{
  background:#AB8D6B; color:#FFFFFF; border-color:#AB8D6B;
  transform:translateY(-50%) scale(1.08);
}
.dev-dots{
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px;
}
.dev-dot{
  width:10px; height:10px; border-radius:50%; background:#E5DDD2; border:none;
  cursor:pointer; transition:all .3s ease; padding:0;
}
.dev-dot.is-active{
  width:26px; border-radius:10px; background:#AB8D6B;
}

@media (max-width: 768px){
  .dev-stage{ height:480px; }
  .dev-card{ width:84%; min-height:430px; }
  .dev-card.is-prev{
    transform:translateX(calc(-50% - 78%)) scale(0.86); opacity:0.45;
  }
  .dev-card.is-next{
    transform:translateX(calc(-50% + 78%)) scale(0.86); opacity:0.45;
  }
  .dev-nav{ width:38px; height:38px; }
}

/* ③ THIẾT KẾ LẠI Ô NHÓM DỊCH VỤ CÓ ẢNH MINH HỌA */
#serviceGroups.groups{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  max-width:1140px;
  margin:0 auto;
  gap:24px;
  padding:10px 0 20px;
}
.group-card--visual{
  display:flex; flex-direction:column;
  background:#FFFFFF; border:1px solid #ECE6DF; border-radius:18px;
  overflow:hidden; text-decoration:none;
  box-shadow:0 8px 24px rgba(74,50,34,.06);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.group-card--visual:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 36px rgba(74,50,34,.13);
  border-color:#AB8D6B;
}
.group-card__media{
  position:relative; width:100%; height:155px; overflow:hidden; background:#EDE3D3;
}
.group-card__media img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  transition:transform .5s ease;
}
.group-card--visual:hover .group-card__media img{
  transform:scale(1.06);
}
.group-card__media .group-card__no{
  position:absolute; top:12px; left:12px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(4px);
  color:#6E4F33; font-size:.78rem; font-weight:700;
  padding:3px 10px; border-radius:20px; box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.group-card__media .group-card__badge{
  position:absolute; bottom:10px; right:12px;
  background:rgba(74,50,34,.82); backdrop-filter:blur(4px);
  color:#FFFFFF; font-size:.72rem; font-weight:600;
  padding:3px 10px; border-radius:20px;
}
.group-card__body{
  padding:14px 18px 12px; display:flex; flex-direction:column;
}
.group-card__body h3{
  font-family:var(--serif); font-size:1.12rem; font-weight:600;
  color:#6E4F33; margin:0 0 4px; line-height:1.35;
}
.group-card__body .group-card__items{
  font-size:.84rem; color:#666; margin:0 0 8px; line-height:1.45;
}
.group-card__body .group-card__link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.88rem; font-weight:600; color:#AB8D6B;
  transition:gap .25s ease;
}
.group-card--visual:hover .group-card__link{
  gap:10px; color:#8A6D4D;
}

@media (max-width: 768px){
  #serviceGroups.groups{
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: min(84vw, 320px) !important;
    gap: 16px !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 8px 16px 22px !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #serviceGroups.groups::-webkit-scrollbar{ display: none; }
  #serviceGroups.groups > *{
    scroll-snap-align: center;
    min-width: 0;
  }
  #serviceGroups.groups > .group-card{
    display: flex !important;
  }
}

/* ===== VÁ 19: FORM TRANG DỊCH VỤ CHUẨN NGỌC DUNG (9 KHỐI) ===== */
/* Khối 1: Hero Banner */
.nd-hero {
  padding: 48px 0 56px;
  background: linear-gradient(135deg, #FAF6F0 0%, #FFFFFF 60%, #F5EFEB 100%);
  border-bottom: 1px solid #ECE6DF;
}
.nd-hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}
.nd-hero__crumb {
  font-size: .88rem;
  color: var(--muted);
  margin-bottom: 14px;
}
.nd-hero__crumb a {
  color: #6E4F33;
  text-decoration: none;
  transition: color .2s;
}
.nd-hero__crumb a:hover {
  color: #AB8D6B;
}
.nd-hero__title {
  font-family: var(--serif);
  font-size: 2.5rem;
  line-height: 1.25;
  color: #4A3222;
  margin: 0 0 16px;
}
.nd-hero__desc {
  font-size: 1rem;
  line-height: 1.65;
  color: #555555;
  margin: 0 0 24px;
  max-width: 62ch;
}
.nd-hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.nd-hero__banner-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(74,50,34,.12);
  background: #FFFFFF;
  border: 1px solid #ECE6DF;
}
.nd-hero__banner-img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
}
.nd-hero__badge-floating {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  padding: 8px 16px;
  border-radius: 30px;
  font-size: .85rem;
  font-weight: 600;
  color: #4A3222;
  border: 1px solid #E5B869;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.nd-hero__price-floating {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: linear-gradient(135deg, #E5B869 0%, #AB8D6B 100%);
  color: #FFFFFF;
  padding: 10px 22px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 1.1rem;
  box-shadow: 0 8px 20px rgba(171,141,107,.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}
.nd-hero__price-floating small {
  font-size: .75rem;
  font-weight: 500;
  opacity: .92;
}

/* Header chung cho các section */
.nd-sec-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 40px;
}
.nd-sec-eyebrow {
  font-size: .82rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #AB8D6B;
  font-weight: 700;
  margin-bottom: 8px;
}
.nd-sec-title {
  font-family: var(--serif);
  font-size: 2rem;
  color: #4A3222;
  margin: 0 0 12px;
  line-height: 1.3;
}
.nd-sec-desc {
  font-size: .95rem;
  color: #666666;
  line-height: 1.6;
  margin: 0;
}

/* Khối 2: Tại sao quan trọng */
.nd-why__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 44px;
  align-items: center;
}
.nd-why__img-wrap {
  position: relative;
}
.nd-why__img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(74,50,34,.1);
}
.nd-why__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.nd-why__intro {
  font-size: .98rem;
  line-height: 1.65;
  color: #555555;
}
.nd-why__box {
  background: #FBF8F5;
  border: 1px solid #ECE6DF;
  border-radius: 14px;
  padding: 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.nd-why__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #4A3222;
  color: #E5B869;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nd-why__box-body h4 {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: #4A3222;
  margin: 0 0 6px;
}
.nd-why__box-body p {
  font-size: .88rem;
  line-height: 1.55;
  color: #666666;
  margin: 0;
}
.nd-why__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nd-why__bullets li {
  font-size: .88rem;
  line-height: 1.5;
  color: #555555;
  position: relative;
  padding-left: 18px;
}
.nd-why__bullets li::before {
  content: "•";
  color: #AB8D6B;
  font-size: 1.2rem;
  position: absolute;
  left: 0;
  top: -2px;
}

/* Khối 3: Danh sách dịch vụ trong nhóm (3 cột) */
.nd-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.nd-scard {
  background: #FFFFFF;
  border: 1px solid #ECE6DF;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(74,50,34,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.nd-scard:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(74,50,34,.12);
  border-color: #E5B869;
}
.nd-scard__img-wrap {
  width: 100%;
  height: 220px;
  position: relative;
  overflow: hidden;
  background: #F5EFEB;
}
.nd-scard__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.nd-scard:hover .nd-scard__img {
  transform: scale(1.05);
}
.nd-scard__body {
  padding: 22px 20px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.nd-scard__title {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: #4A3222;
  margin: 0 0 10px;
  line-height: 1.35;
}
.nd-scard__desc {
  font-size: .88rem;
  color: #666666;
  line-height: 1.55;
  margin: 0 0 18px;
  flex: 1;
}
.nd-scard__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .9rem;
  font-weight: 600;
  color: #AB8D6B;
  text-decoration: none;
  transition: color .2s ease;
  border-top: 1px dashed #ECE6DF;
  padding-top: 14px;
}
.nd-scard__link:hover,
.nd-scard:hover .nd-scard__link {
  color: #4A3222;
}

/* Khối 4: Quy trình thực hiện (4 cột ngang) */
.nd-process__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.nd-step {
  position: relative;
  display: flex;
  flex-direction: column;
}
.nd-step__img-wrap {
  width: 100%;
  height: 280px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(74,50,34,.08);
}
.nd-step__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.nd-step__card {
  background: #FFFFFF;
  border: 1px solid #ECE6DF;
  border-radius: 12px;
  padding: 16px;
  margin-top: -38px;
  position: relative;
  z-index: 2;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 8px 22px rgba(74,50,34,.09);
  text-align: center;
}
.nd-step__num {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  color: #AB8D6B;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.nd-step__title {
  font-family: var(--serif);
  font-size: .98rem;
  color: #4A3222;
  margin: 0 0 6px;
}
.nd-step__desc {
  font-size: .8rem;
  color: #666666;
  line-height: 1.45;
  margin: 0;
  text-align: left;
}

/* Khối 5: Vì sao tin chọn Foxy (4 cột) */
.nd-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.nd-trust__card {
  background: #FFFFFF;
  border: 1px solid #ECE6DF;
  border-radius: 14px;
  padding: 24px 20px;
  box-shadow: 0 6px 18px rgba(74,50,34,.05);
  text-align: center;
  transition: transform .2s ease;
}
.nd-trust__card:hover {
  transform: translateY(-4px);
  border-color: #E5B869;
}
.nd-trust__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #F7F2EB;
  color: #AB8D6B;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.nd-trust__card h4 {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: #4A3222;
  margin: 0 0 8px;
}
.nd-trust__card p {
  font-size: .84rem;
  color: #666666;
  line-height: 1.5;
  margin: 0;
}

/* Khối 6: Bác sĩ chuyên gia */
.nd-doctor__card {
  background: #FFFFFF;
  border: 1px solid #ECE6DF;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(74,50,34,.08);
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 36px;
  align-items: center;
  padding: 28px;
}
.nd-doctor__img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  border-radius: 14px;
}
.nd-doctor__name {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: #4A3222;
  margin: 0 0 6px;
}
.nd-doctor__cchn {
  display: inline-block;
  font-size: .82rem;
  font-weight: 600;
  color: #AB8D6B;
  background: #F7F2EB;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 14px;
}
.nd-doctor__bio {
  font-size: .92rem;
  line-height: 1.6;
  color: #555555;
  margin: 0 0 18px;
}

/* Khối 7: Bảng giá */
.nd-price__table-wrap {
  background: #FFFFFF;
  border: 1px solid #ECE6DF;
  border-radius: 16px;
  overflow-x: auto;
  box-shadow: 0 8px 24px rgba(74,50,34,.06);
}
.nd-price__table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}
.nd-price__table th {
  background: #F7F2EB;
  color: #4A3222;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 14px 20px;
  text-align: left;
  border-bottom: 1px solid #D5C9B8;
}
.nd-price__table td {
  padding: 14px 20px;
  border-bottom: 1px solid #ECE6DF;
  vertical-align: middle;
}
.nd-price__table tr:last-child td {
  border-bottom: none;
}
.nd-price__name {
  font-weight: 600;
  color: #4A3222;
}
.nd-price__val {
  font-weight: 700;
  color: #AB8D6B;
  white-space: nowrap;
}
.nd-price__note {
  font-size: .85rem;
  color: #777777;
}

/* Khối 8: Form đặt lịch */
.nd-booking__box {
  background: linear-gradient(135deg, #4A3222 0%, #6E4F33 100%);
  border-radius: 20px;
  padding: 44px;
  color: #FFFFFF;
  box-shadow: 0 16px 40px rgba(74,50,34,.25);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.nd-booking__info h3 {
  font-family: var(--serif);
  font-size: 2rem;
  color: #FFFFFF;
  margin: 0 0 12px;
}
.nd-booking__info p {
  font-size: .95rem;
  line-height: 1.6;
  color: rgba(255,255,255,.82);
  margin: 0 0 20px;
}
.nd-booking__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #FFFFFF;
  padding: 28px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.nd-booking__form input, .nd-booking__form select, .nd-booking__form textarea {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #D5C9B8;
  border-radius: 8px;
  font-size: .9rem;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color .2s;
  color: #333;
}
.nd-booking__form textarea {
  height: 80px;
  padding: 10px 14px;
  resize: vertical;
}
.nd-booking__form input:focus, .nd-booking__form select:focus, .nd-booking__form textarea:focus {
  border-color: #AB8D6B;
}
.nd-booking__btn {
  width: 100%;
  height: 46px;
  border: none;
  border-radius: 30px;
  background: linear-gradient(135deg, #AB8D6B 0%, #8A6D4D 100%);
  color: #FFFFFF;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  transition: all .25s ease;
  box-shadow: 0 4px 14px rgba(171,141,107,.4);
}
.nd-booking__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(171,141,107,.55);
}

/* Khối 9: FAQ Accordion */
.nd-faq__list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nd-faq__item {
  background: #FFFFFF;
  border: 1px solid #ECE6DF;
  border-radius: 12px;
  padding: 16px 20px;
  transition: border-color .2s;
}
.nd-faq__item[open] {
  border-color: #AB8D6B;
}
.nd-faq__question {
  font-weight: 600;
  color: #4A3222;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
}
.nd-faq__question::-webkit-details-marker {
  display: none;
}
.nd-faq__question::after {
  content: "+";
  font-size: 1.3rem;
  color: #AB8D6B;
  font-weight: 400;
  transition: transform .2s;
}
.nd-faq__item[open] .nd-faq__question::after {
  content: "–";
}
.nd-faq__answer {
  font-size: .9rem;
  line-height: 1.6;
  color: #666666;
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid #F5EFEB;
}

/* Responsive chung cho trang chuẩn Ngọc Dung */
@media (max-width: 1024px) {
  .nd-hero__grid { grid-template-columns: 1fr; gap: 32px; }
  .nd-why__grid { grid-template-columns: 1fr; gap: 32px; }
  .nd-services__grid { grid-template-columns: repeat(2, 1fr); }
  .nd-process__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .nd-trust__grid { grid-template-columns: repeat(2, 1fr); }
  .nd-doctor__card { grid-template-columns: 1fr; }
  .nd-booking__box { grid-template-columns: 1fr; padding: 30px; }
}

@media (max-width: 640px) {
  .nd-hero__title { font-size: 1.9rem; }
  .nd-sec-title { font-size: 1.6rem; }
  .nd-services__grid { grid-template-columns: 1fr; }
  .nd-process__grid { grid-template-columns: 1fr; }
  .nd-trust__grid { grid-template-columns: 1fr; }
  .nd-hero__banner-img { height: 280px; }
  .nd-why__img { height: 280px; }
  .nd-booking__box { padding: 20px; }
  .nd-booking__form { padding: 18px; }
}



/* ===== VÁ 20: BÀI VIẾT SEO / TIN TỨC CHUẨN FORM NAM AN ===== */
.na-post-wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px 60px;
}

/* 1. Breadcrumb */
.na-crumb {
  font-size: .88rem;
  color: var(--muted);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.na-crumb a {
  color: #6E4F33;
  text-decoration: none;
  transition: color .2s;
}
.na-crumb a:hover {
  color: #AB8D6B;
}

/* 2. Hero Header Card */
.na-post-hero {
  background: linear-gradient(135deg, #6E4F33 0%, #573E27 100%);
  border-radius: 20px;
  padding: 40px 44px;
  color: #FFFFFF;
  margin-bottom: 28px;
  box-shadow: 0 12px 36px rgba(74, 50, 34, .12);
}
.na-post-hero__tag {
  display: inline-block;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #FFFFFF;
  font-size: .82rem;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 16px;
  font-weight: 500;
}
.na-post-hero__title {
  font-family: var(--serif);
  font-size: 2.3rem;
  line-height: 1.3;
  color: #FFFFFF;
  margin: 0;
}

/* 3. Mục Lục Bài Viết (Table of Contents) */
.na-toc {
  background: #FFFFFF;
  border: 1px solid #ECE6DF;
  border-radius: 16px;
  padding: 24px 28px;
  margin: 28px 0 36px;
  box-shadow: 0 4px 20px rgba(74, 50, 34, .04);
}
.na-toc__header {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: #4A3222;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #F0ECE6;
  display: flex;
  align-items: center;
  gap: 10px;
}
.na-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.na-toc__link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #333333;
  font-size: .94rem;
  line-height: 1.5;
  transition: color .2s, transform .15s;
}
.na-toc__link:hover {
  color: #AB8D6B;
  transform: translateX(3px);
}
.na-toc__badge {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #8A6D4D;
  color: #FFFFFF;
  font-family: var(--sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
}

/* 4. Hình ảnh bài viết */
.na-post-img {
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
  display: block;
  box-shadow: 0 8px 24px rgba(74, 50, 34, .08);
  margin: 28px 0;
}
.na-post-img-caption {
  font-size: .84rem;
  color: var(--muted);
  text-align: center;
  margin-top: -18px;
  margin-bottom: 24px;
  font-style: italic;
}

/* 5. Tiêu đề H2 đánh số dạng badge tròn */
.na-h2 {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 44px 0 18px;
  font-family: var(--serif);
  font-size: 1.65rem;
  line-height: 1.35;
  color: #4A3222;
  scroll-margin-top: 100px;
}
.na-h2__num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #8A6D4D;
  color: #FFFFFF;
  font-family: var(--sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.na-body-text {
  font-size: 1rem;
  line-height: 1.7;
  color: #444444;
  margin: 0 0 20px;
}

/* 6. Danh sách timeline có đường line dọc */
.na-timeline {
  position: relative;
  margin: 26px 0 32px;
  padding-left: 44px;
}
.na-timeline::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 16px;
  bottom: 24px;
  width: 2px;
  background: #D5C9B8;
}
.na-timeline__item {
  position: relative;
  margin-bottom: 16px;
}
.na-timeline__item:last-child {
  margin-bottom: 0;
}
.na-timeline__badge {
  position: absolute;
  left: -44px;
  top: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #8A6D4D;
  border: 2px solid #FFFFFF;
  color: #FFFFFF;
  font-family: var(--sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: .92rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 2px 6px rgba(138, 109, 77, 0.35);
  z-index: 2;
  font-variant-numeric: tabular-nums;
}
.na-timeline__card {
  background: #FFFFFF;
  border: 1px solid #ECE6DF;
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 2px 10px rgba(74, 50, 34, .04);
}
.na-timeline__card h4 {
  font-weight: 700;
  color: #4A3222;
  font-size: .98rem;
  margin: 0 0 4px;
}
.na-timeline__card p {
  font-size: .88rem;
  line-height: 1.55;
  color: #666666;
  margin: 0;
}

/* 7. Lưới 2x2 Callout cảnh báo / lưu ý */
.na-callout-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 24px 0 32px;
}
.na-callout-card {
  background: #FDFBF7;
  border: 1px solid #E5D5C3;
  border-radius: 12px;
  padding: 18px 20px;
}
.na-callout-card h4 {
  font-weight: 700;
  color: #6E4F33;
  font-size: .96rem;
  margin: 0 0 8px;
}
.na-callout-card p {
  font-size: .86rem;
  line-height: 1.55;
  color: #666666;
  margin: 0;
}

/* 8. Form Đặt Lịch Tư Vấn giữa bài viết (In-article Booking) */
.na-booking-box {
  background: #FFFFFF;
  border: 1px solid #ECE6DF;
  border-radius: 20px;
  padding: 36px 40px;
  margin: 44px 0;
  box-shadow: 0 12px 36px rgba(74, 50, 34, .08);
}
.na-booking-box__title {
  font-family: var(--serif);
  font-size: 1.8rem;
  color: #4A3222;
  text-align: center;
  text-transform: uppercase;
  margin: 0 0 22px;
  letter-spacing: .04em;
}
.na-booking-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.na-booking-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.na-booking-form input,
.na-booking-form select,
.na-booking-form textarea {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border: 1px solid #D5C9B8;
  border-radius: 8px;
  font-size: .92rem;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color .2s;
  background: #FFFFFF;
  color: #333333;
}
.na-booking-form textarea {
  height: 90px;
  padding: 12px 16px;
  resize: vertical;
}
.na-booking-form input:focus,
.na-booking-form select:focus,
.na-booking-form textarea:focus {
  border-color: #AB8D6B;
}
.na-booking-form__btn {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 8px;
  background: #8A6D4D;
  color: #FFFFFF;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  transition: background .25s, transform .15s;
}
.na-booking-form__btn:hover {
  background: #6E4F33;
  transform: translateY(-2px);
}

/* 9. Thẻ bài viết liên quan lồng trong nội dung */
.na-embed-card {
  max-width: 480px;
  margin: 36px auto;
  background: #FFFFFF;
  border: 1px solid #ECE6DF;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(74, 50, 34, .06);
}
.na-embed-card__img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}
.na-embed-card__body {
  padding: 18px 20px;
}
.na-embed-card__title {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: #4A3222;
  margin: 0 0 8px;
  line-height: 1.4;
}
.na-embed-card__desc {
  font-size: .84rem;
  color: #666666;
  line-height: 1.5;
  margin: 0 0 12px;
}
.na-embed-card__link {
  color: #AB8D6B;
  font-weight: 600;
  text-decoration: none;
  font-size: .88rem;
}
.na-embed-card__footer {
  border-top: 1px solid #F0ECE6;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .82rem;
  color: #888888;
}

/* 10. Hộp tóm tắt nhanh */
.na-summary-box {
  background: #FDFBF7;
  border: 1px solid #E5D5C3;
  border-radius: 14px;
  padding: 24px 28px;
  margin: 28px 0 36px;
}
.na-summary-box ul {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.na-summary-box li {
  font-size: .92rem;
  line-height: 1.6;
  color: #444444;
}

/* 11. FAQ dạng thanh nâu xếp lớp */
.na-faq-pills {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 26px 0 36px;
}
.na-faq-item {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #ECE6DF;
}
.na-faq-q {
  background: #8A6D4D;
  color: #FFFFFF;
  padding: 14px 20px;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.na-faq-q::-webkit-details-marker {
  display: none;
}
.na-faq-q::after {
  content: "+";
  font-size: 1.2rem;
}
.na-faq-item[open] .na-faq-q::after {
  content: "–";
}
.na-faq-a {
  background: #FFFFFF;
  padding: 16px 20px;
  font-size: .9rem;
  line-height: 1.6;
  color: #555555;
  margin: 0;
}

/* 12. Lưu ý y khoa (Medical Disclaimer) */
.na-disclaimer {
  background: #F7F2EB;
  border-left: 4px solid #AB8D6B;
  border-radius: 0 10px 10px 0;
  padding: 14px 18px;
  font-size: .88rem;
  font-style: italic;
  color: #555555;
  margin: 32px 0 44px;
  line-height: 1.55;
}

/* 13. Bài viết liên quan (Grid bài viết cuối) */
.na-related {
  margin-top: 50px;
  border-top: 1px solid #ECE6DF;
  padding-top: 40px;
}
.na-related__title {
  font-family: var(--serif);
  font-size: 1.8rem;
  color: #4A3222;
  text-align: center;
  margin: 0 0 30px;
}
.na-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.na-related__card {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform .2s;
}
.na-related__card:hover {
  transform: translateY(-4px);
}
.na-related__img {
  width: 100%;
  height: 150px;
  border-radius: 36px;
  object-fit: cover;
  box-shadow: 0 4px 14px rgba(74, 50, 34, .08);
}
.na-related__card h4 {
  font-family: var(--serif);
  font-size: .95rem;
  color: #4A3222;
  margin: 12px 0 0;
  line-height: 1.4;
  transition: color .2s;
}
.na-related__card:hover h4 {
  color: #AB8D6B;
}

/* Responsive cho điện thoại và máy tính bảng */
@media (max-width: 768px) {
  .na-post-hero { padding: 28px 24px; }
  .na-post-hero__title { font-size: 1.8rem; }
  .na-callout-grid { grid-template-columns: 1fr; }
  .na-booking-form__row { grid-template-columns: 1fr; }
  .na-booking-box { padding: 24px 20px; }
  .na-related__grid { grid-template-columns: 1fr; gap: 20px; }
}


/* 5b. Bảng dữ liệu y khoa và bảng giá bài viết SEO chuẩn Nam An */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 24px 0 32px;
  border-radius: 12px;
  border: 1px solid #ECE6DF;
  box-shadow: 0 4px 16px rgba(74, 50, 34, 0.04);
  background: #FFFFFF;
}
.data-table {
  width: 100%;
  min-width: 650px;
  border-collapse: collapse;
  background: #FFFFFF;
  font-size: .92rem;
  line-height: 1.6;
}
.data-table thead tr {
  background: #FAF6F0;
  border-bottom: 2px solid #E5D5C3;
}
.data-table th {
  padding: 14px 18px;
  color: #4A3222;
  font-weight: 700;
  text-align: left;
  font-size: .92rem;
  border-right: 1px solid #ECE6DF;
  white-space: nowrap;
}
.data-table th:last-child {
  border-right: none;
}
.data-table th:first-child,
.data-table td:first-child {
  width: 25%;
  min-width: 170px;
  font-weight: 600;
  color: #4A3222;
}
.data-table td {
  padding: 14px 18px;
  color: #444444;
  border-bottom: 1px solid #ECE6DF;
  border-right: 1px solid #ECE6DF;
  vertical-align: top;
  font-size: .92rem;
}
.data-table td:last-child {
  border-right: none;
}
.data-table tbody tr:last-child td {
  border-bottom: none;
}
.data-table tbody tr:nth-child(even) {
  background: #FCFAF7;
}
.data-table tbody tr:hover {
  background: #F8F3EC;
}
.data-table td strong {
  color: #4A3222;
  font-weight: 600;
}

/* ==========================================================================
   VÁ 21 (14/09/2026): TỐI ƯU TOÀN DIỆN MOBILE & IPAD / TABLET (375px - 1024px)
   - Chống giật ngang và tràn viền trên mọi độ phân giải (375px, 390px, 768px, 820px, 1024px)
   - Chống tự động phóng to (auto-zoom) của iOS/Safari khi bấm vào ô nhập liệu (font-size >= 16px)
   - Tinh chỉnh Touch Target >= 44px cho menu, nút bấm, FAB nổi, accordion
   - Tối ưu lưới responsive cho 9 khối dịch vụ, 3D carousel máy móc, bài viết chuẩn Nam An
   - Thẻ bác sĩ, hộp tác giả, hộp đặt lịch co giãn mượt mà theo màn hình
   ========================================================================== */

/* 0. Tỉ lệ ảnh bìa chuẩn gốc 1958/745 — chống méo và biến dạng trên mọi thiết bị */
.cover {
  position: relative;
  background: #FBF6EC;
  line-height: 0;
  width: 100%;
}
.cover picture {
  display: block;
  width: 100%;
}
.cover__img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 1958 / 745 !important;
  object-fit: contain !important;
  object-position: center top !important;
}

/* 0b. Chống cắt huy hiệu trên đầu thẻ máy móc Carousel */
.dev-stage {
  position: relative;
  width: 100%;
  height: 580px !important;
  perspective: 1000px;
  overflow: visible !important;
  padding-top: 35px !important;
  box-sizing: border-box;
}
.dev-card {
  position: absolute;
  top: 35px !important;
  left: 50%;
  width: clamp(360px, 34vw, 440px);
  min-height: 460px;
  border-radius: 18px !important;
  box-shadow: 0 10px 30px rgba(74, 50, 34, .08);
  transition: transform .45s cubic-bezier(.25, 1, .5, 1), opacity .45s ease, box-shadow .45s ease, z-index .45s ease;
  user-select: none;
}
.device__tag {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  top: -16px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  z-index: 30 !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(171, 141, 107, 0.45) !important;
  border-radius: 30px !important;
  padding: 4px 14px !important;
  font-size: .74rem !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
  box-shadow: 0 2px 8px rgba(74, 50, 34, 0.08) !important;
}

/* 1. Reset chống tràn & font size chống iOS auto-zoom */
@media (max-width: 1024px) {
  input, select, textarea {
    font-size: 16px !important; /* Ngăn iOS Safari tự zoom màn hình khi focus */
  }
}

/* 2. Tối ưu cho iPad & Tablet (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }
  
  /* Infobar 4 ô thành 2x2 trên iPad */
  .infobar__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  
  /* Lưới dịch vụ & bài viết */
  .service-grid, .service-group-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .na-related__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .nd-process__grid, .nd-why__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  /* Bác sĩ & Form 2 cột trên iPad */
  .doc-split {
    grid-template-columns: 1fr 1.2fr;
    gap: 28px;
  }
}

/* 3. Tối ưu cho Mobile (<= 768px) */
@media (max-width: 768px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Header & Navigation mobile */
  .header__inner {
    padding: 12px 16px;
  }
  
  /* Hero Infobar */
  .infobar {
    margin-top: -30px;
    position: relative;
    z-index: 5;
  }
  .infobar__grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .infobar__item {
    padding: 12px 16px;
  }

  /* Khối Bác sĩ CKI trang chủ */
  .doc-split {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }
  .doc-split__img-wrap {
    max-width: 280px;
    margin: 0 auto;
  }
  .doc-split__badges {
    justify-content: center;
  }
  .doc-split__actions {
    justify-content: center;
  }

  /* 3D Carousel Thiết bị máy móc (#techs) trên mobile */
  .techs-carousel-wrap {
    padding: 0 10px;
  }
  .tech-slide {
    width: 85%;
  }

  /* Nhóm 9 khối dịch vụ chuẩn Ngọc Dung */
  .nd-hero__grid {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }
  .nd-hero__badges {
    justify-content: center;
  }
  .nd-hero__actions {
    justify-content: center;
  }
  .nd-hero__img-col {
    max-width: 340px;
    margin: 0 auto;
  }
  .nd-why-box-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .nd-process__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .nd-why__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .nd-doctor__card {
    flex-direction: column;
    text-align: center;
    padding: 24px 16px;
  }
  .nd-doctor__avatar {
    margin: 0 auto 16px;
    width: 130px;
    height: 130px;
  }

  /* Bài viết SEO chuẩn Nam An trên Mobile */
  .na-post-wrapper {
    padding: 16px 20px 60px !important;
    box-sizing: border-box !important;
  }
  .na-post-hero {
    padding: 24px 16px;
    border-radius: 16px;
    margin-bottom: 24px;
  }
  .na-post-hero__title {
    font-size: 1.5rem;
    line-height: 1.35;
  }
  .na-post-meta {
    flex-wrap: wrap;
    gap: 10px;
  }
  .na-direct-ans {
    padding: 18px 16px;
    border-radius: 14px;
    margin: 22px 0 28px;
  }
  .na-direct-ans__title {
    font-size: 1.05rem;
  }
  .na-direct-ans__text {
    font-size: .94rem;
    line-height: 1.6;
  }
  .na-toc {
    padding: 18px 16px;
    border-radius: 14px;
    margin: 24px 0 32px;
  }
  .na-h2 {
    font-size: 1.35rem;
    gap: 10px;
    margin: 36px 0 16px;
  }
  .na-h2__num {
    width: 28px;
    height: 28px;
    font-size: .85rem;
    margin-top: 2px;
  }
  .na-body-text {
    font-size: .95rem;
    line-height: 1.65;
  }
  .na-callout-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .na-timeline {
    padding-left: 36px;
  }
  .na-timeline::before {
    left: 13px;
  }
  .na-timeline__badge {
    left: -36px;
    width: 28px;
    height: 28px;
    font-size: .82rem;
  }
  .na-timeline__card {
    padding: 14px 16px;
  }
  .na-author-box {
    flex-direction: column;
    text-align: center;
    padding: 20px 16px;
    gap: 16px;
  }
  .na-author-box__avatar {
    margin: 0 auto;
    width: 90px;
    height: 90px;
  }
  .na-author-box__badges {
    justify-content: center;
  }
  .na-booking-box {
    padding: 24px 16px;
    border-radius: 16px;
  }
  .na-booking-form__row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .na-booking-form__btn {
    width: 100%;
    padding: 14px 20px;
    font-size: 1rem;
  }
  .na-parent-ref {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 12px;
  }
  .na-parent-ref__cta {
    width: 100%;
    text-align: center;
  }
  .na-child-list__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Nút nổi FAB liên hệ (Hotline / Zalo / Messenger) */
  .fab-group, .fab-contact-wrap {
    bottom: 20px;
    right: 16px;
    gap: 10px;
  }
  .fab-btn {
    width: 46px;
    height: 46px;
  }
}

/* 5. Giao diện Hero chuyên biệt cho Điện thoại (.hero-mob) */
@media (max-width: 768px) {
  .cover--desktop,
  .infobar-wrap--desktop,
  .intro--desktop {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .hero-mob {
    display: none !important;
  }
}

.hero-mob {
  background: radial-gradient(circle at 50% 15%, #FFFDF8 0%, #FAF5ED 55%, #FFFFFF 100%);
  padding: 0 0 32px;
  text-align: center;
  border-bottom: 1px solid #EFE8DC;
}
.hero-mob__media {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 0 20px;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(74, 50, 34, 0.08);
  border: none;
  border-bottom: 1px solid #EFE7DA;
  background: #FAF5ED;
}
.hero-mob__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 800 / 304;
  object-fit: cover;
}
.hero-mob__in {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px;
}
.hero-mob__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  border: 1px solid rgba(171, 141, 107, 0.45);
  border-radius: 30px;
  padding: 5px 14px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #6E4F33;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(74, 50, 34, 0.05);
  margin-bottom: 14px;
}
.hero-mob__title {
  font-family: var(--serif);
  font-size: 1.95rem;
  line-height: 1.22;
  color: #4A3222;
  margin: 0 0 6px;
}
.hero-mob__sub {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: #AB8D6B;
  margin-top: 3px;
  font-weight: 400;
}
.hero-mob__desc {
  font-size: 0.92rem;
  line-height: 1.58;
  color: #555555;
  margin: 12px auto 20px;
  max-width: 360px;
}
.hero-mob__desc b {
  color: #4A3222;
  font-weight: 700;
}
.hero-mob__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
  margin: 0 auto 24px;
}
.hero-mob__actions .btn {
  width: 100%;
  padding: 13px 20px;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 30px;
  text-align: center;
}
.hero-mob__pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 420px;
  margin: 0 auto;
}
.hero-mob__pillar {
  background: #FFFFFF;
  border: 1px solid #ECE4D8;
  border-radius: 14px;
  padding: 12px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  box-shadow: 0 2px 10px rgba(74, 50, 34, 0.04);
}
.hero-mob__p-ic {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #FAF6F0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hero-mob__pillar b {
  display: block;
  font-size: 0.82rem;
  color: #4A3222;
  font-weight: 700;
  line-height: 1.3;
}
.hero-mob__pillar small {
  display: block;
  font-size: 0.72rem;
  color: #777777;
  line-height: 1.25;
  margin-top: 1px;
}

/* ==========================================================================
   VÁ 22 (15/09/2026): TÁI THIẾT KẾ KHỐI SỨ MỆNH & TỐI ƯU CỤM TIỆN ÍCH LIÊN HỆ (FAB)
   1. Tái thiết kế khối "Sắc đẹp của bạn — Sứ mệnh của tôi" (.ribbon):
      - Bỏ mảng đen/nâu tối cắt méo, chuyển sang nền ngọc trai kem ánh gold sang trọng.
      - Chữ nâu đậm y khoa (#4A3222), tiêu đề Playfair Display mềm mại.
      - Viền gold hairline thanh lịch, liền mạch với khối bác sĩ bên dưới.
   2. Cụm tiện ích liên hệ nổi (FAB):
      - Cố định tuyệt đối góc dưới phải, z-index 99999, không bao giờ bị ẩn.
      - 4 nút: Messenger, Zalo (chuẩn logo), Hotline (gọi ngay với hiệu ứng thở nhẹ), Đặt lịch.
   ========================================================================== */

.ribbon-bed {
  background: linear-gradient(180deg, #FFFFFF 50%, #FAF6F0 50%) !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ribbon {
  background: linear-gradient(135deg, var(--brown) 0%, var(--brown-dark) 100%) !important;
  color: #FFFFFF !important;
  text-align: center !important;
  padding: clamp(42px, 6vw, 72px) var(--gut) !important;
  clip-path: polygon(0 0, 50% 26px, 100% 0, 100% 100%, 50% calc(100% - 26px), 0 100%) !important;
  border-top: none !important;
  border-bottom: none !important;
  position: relative !important;
  box-shadow: none !important;
}

.ribbon .eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(229, 184, 105, 0.45) !important;
  border-radius: 30px !important;
  padding: 5px 16px !important;
  color: #E5B869 !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
  box-shadow: none !important;
}

.ribbon h2 {
  color: #FFFFFF !important;
  font-family: var(--serif) !important;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
  line-height: 1.3 !important;
  margin: 0 0 10px !important;
}

.ribbon p {
  color: rgba(255, 255, 255, 0.9) !important;
  max-width: 660px !important;
  margin: 0 auto !important;
  font-size: clamp(0.95rem, 1.6vw, 1.08rem) !important;
  line-height: 1.65 !important;
}

/* Khối Đội ngũ bác sĩ (.team-home) liền mạch */
.team-home {
  background: #FAF6F0 !important;
  padding-top: clamp(36px, 5vw, 60px) !important;
}

/* Cụm tiện ích nổi liên hệ (FAB) — Đồng bộ màu nâu Luxury #4A3222, không bóng, icon trắng */
.fab {
  position: fixed !important;
  right: 18px !important;
  bottom: 24px !important;
  left: auto !important;
  width: auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  align-items: flex-end !important;
  z-index: 99999 !important;
  pointer-events: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  transition: transform 0.28s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.25s ease !important;
}

.fab.fab--hidden,
.fab.fab--hide-on-form {
  transform: translateY(115%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.fab__item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  text-decoration: none !important;
  color: #FFFFFF !important;
  background: #4A3222 !important;
  border: none !important;
  box-shadow: none !important;
  position: relative !important;
  box-sizing: border-box !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
  cursor: pointer !important;
}

.fab__item:hover {
  background: #3A261A !important;
  transform: scale(1.06) !important;
}

.fab__messenger,
.fab__zalo,
.fab__call {
  background: #4A3222 !important;
  border: none !important;
  box-shadow: none !important;
  animation: none !important;
}

.fab__item svg {
  color: #FFFFFF !important;
  width: 24px !important;
  height: 24px !important;
}

.fab__call svg {
  stroke: #FFFFFF !important;
  width: 22px !important;
  height: 22px !important;
}

.fab__book {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 44px !important;
  min-height: 44px !important;
  width: auto !important;
  min-width: 120px !important;
  padding: 0 18px !important;
  border-radius: 30px !important;
  background: #4A3222 !important;
  border: none !important;
  color: #FFFFFF !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
  cursor: pointer !important;
}

.fab__book svg {
  width: 18px !important;
  height: 18px !important;
  stroke: #FFFFFF !important;
  flex-shrink: 0 !important;
}

.fab__book span {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.fab__book:hover {
  background: #3A261A !important;
  transform: scale(1.05) !important;
}

.fab__tip {
  position: absolute;
  right: 58px;
  background: #4A3222;
  color: #FFFFFF;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform: translateX(6px);
  box-shadow: none;
}

.fab__item:hover .fab__tip {
  opacity: 1;
  transform: translateX(0);
}

/* ==========================================================================
   VÁ 23 (15/09/2026): THANH STICKY BOTTOM BAR TIỆN ÍCH LIÊN HỆ TRÊN MOBILE (<= 768px)
   - Cố định hoàn toàn ở đáy màn hình, không giật lag khi cuộn
   - Tự động ẩn CHỈ KHI cuộn tới form đăng ký đặt lịch
   - 4 nút tiện ích: Messenger + Zalo + Hotline + Đặt lịch (đồng bộ nâu #4A3222, không bóng, icon trắng)
   - Chuẩn iOS Safe Area
   ========================================================================== */
@media (max-width: 768px) {
  body {
    padding-bottom: calc(85px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .footer {
    padding-bottom: 28px !important;
  }
  .fab {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100vw !important;
    background: #FFFFFF !important;
    border-top: 1px solid #E8DFD8 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) 10px !important;
    gap: 6px !important;
    z-index: 999999 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: transform 0.28s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.25s ease !important;
  }
  .fab.fab--hidden,
  .fab.fab--hide-on-form {
    transform: translateY(115%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .fab a:not(.fab__book),
  .fab__item,
  .fab__call,
  .fab__zalo,
  .fab__messenger {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    flex: 0 0 42px !important;
    border-radius: 50% !important;
    background: #4A3222 !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(74, 50, 34, 0.15) !important;
    color: #FFFFFF !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    font-family: var(--sans) !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    animation: none !important;
    transition: transform 0.2s ease, background 0.2s ease !important;
  }
  .fab a:not(.fab__book) svg,
  .fab__item svg,
  .fab__call svg,
  .fab__messenger svg {
    width: 20px !important;
    height: 20px !important;
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
    display: block !important;
  }
  .fab__zalo {
    color: #FFFFFF !important;
  }
  .fab__zalo svg {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
  }
  .fab__call svg {
    width: 19px !important;
    height: 19px !important;
    stroke: #FFFFFF !important;
  }
  .fab__book {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 24px !important;
    background: #4A3222 !important;
    border: none !important;
    color: #FFFFFF !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 8px rgba(74, 50, 34, 0.15) !important;
    white-space: nowrap !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
  }
  .fab__book svg {
    width: 16px !important;
    height: 16px !important;
    stroke: #FFFFFF !important;
    flex-shrink: 0 !important;
  }
  .fab__book span {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1 !important;
  }
  .fab__tip {
    display: none !important;
  }

  /* ==========================================================================
     BÁC SĨ & BẰNG CẤP DẠNG LƯỚT NGANG (CAROUSEL / SCROLL-SNAP) TRÊN MOBILE
     ========================================================================== */
  /* ==========================================================================
     ĐỘI NGŨ BÁC SĨ CHUẨN NAM AN (2 CỘT TRÊN MOBILE)
     ========================================================================== */
  .naman-doc-grid,
  .doc-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 1.2rem 0 0 !important;
    overflow: visible !important;
  }
  .naman-doc-card,
  .doc-grid .doc {
    flex: none !important;
    width: 100% !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(212, 185, 154, 0.7) !important;
    overflow: hidden !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 4px 18px rgba(171, 141, 107, 0.08) !important;
  }
  .naman-doc-card__badge {
    display: none !important;
  }
  .naman-doc-card__frame {
    width: 100% !important;
    height: 185px !important;
    border-radius: 18px 18px 0 0 !important;
    background: #F4EFE6 !important;
    overflow: hidden !important;
    position: relative !important;
    margin: 0 !important;
  }
  .naman-doc-card__img,
  .naman-doc-card__frame img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    display: block !important;
  }
  .naman-doc-card__content {
    padding: 10px 8px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    flex: 1 !important;
    gap: 0 !important;
  }
  .naman-doc-card__role {
    font-size: 9px !important;
    font-weight: 700 !important;
    color: #AB8D6B !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    margin-bottom: 4px !important;
    min-height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
  }
  .naman-doc-card__name-wrap {
    margin-bottom: 8px !important;
  }
  .naman-doc-card__deg {
    display: none !important;
  }
  .naman-doc-card__name {
    font-family: var(--font-display) !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: #482B25 !important;
    margin: 0 !important;
    line-height: 1.25 !important;
  }
  .naman-doc-card__cchn {
    display: none !important;
  }
  .naman-doc-card__desc,
  .naman-doc-card__spec {
    display: none !important;
  }
  .naman-doc-card__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 125px !important;
    height: 30px !important;
    padding: 0 10px !important;
    background: #AB8D6B !important;
    border-radius: 50px !important;
    font-family: var(--sans) !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    margin-top: auto !important;
  }

  /* Bằng cấp & Chứng chỉ dạng lướt ngang */
  .certs,
  .cert-gallery {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding: 0 16px !important;
    gap: 14px !important;
    padding: 6px 16px 18px !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .certs::-webkit-scrollbar,
  .cert-gallery::-webkit-scrollbar {
    display: none !important;
  }
  .cert,
  .cert-card {
    flex: 0 0 min(78vw, 275px) !important;
    width: min(78vw, 275px) !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
    box-sizing: border-box !important;
  }
}

/* ==========================================================================
   HỆ THỐNG BÁC SĨ CHUẨN NAM AN & TRANG HỒ SƠ BÁC SĨ (FOXY M.D)
   ========================================================================== */

/* 1. Lưới thẻ Bác sĩ chuẩn Nam An */
.naman-doc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 340px));
  justify-content: center;
  gap: 30px;
  margin-top: 2rem;
}

.naman-doc-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(224, 208, 196, 0.75);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(171, 141, 107, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
  text-decoration: none;
  color: inherit;
}

.naman-doc-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(171, 141, 107, 0.16);
  border-color: #AB8D6B;
}

.naman-doc-card__frame {
  width: 100%;
  height: 290px;
  background: #F4EFE6;
  border-radius: 22px 22px 0 0;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.naman-doc-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.4s ease;
}

.naman-doc-card:hover .naman-doc-card__img {
  transform: scale(1.03);
}

.naman-doc-card__badge {
  display: none;
}

.naman-doc-card__content {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
}

.naman-doc-card__role {
  font-size: 11px;
  font-weight: 700;
  color: #AB8D6B;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.naman-doc-card__name-wrap {
  margin-bottom: 4px;
}

.naman-doc-card__deg {
  font-size: 11.5px;
  font-weight: 700;
  color: #AB8D6B;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 2px;
}

.naman-doc-card__name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: #482B25;
  margin: 0;
  line-height: 1.3;
}

.naman-doc-card__cchn {
  display: none;
}

.naman-doc-card__desc,
.naman-doc-card__spec {
  font-size: 13px;
  color: #8A6E50;
  line-height: 1.45;
  margin-bottom: 16px;
}

.naman-doc-card__btn {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  max-width: 160px;
  height: 38px;
  padding: 0 16px;
  background: #AB8D6B;
  color: #FFFFFF;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 50px;
  transition: background 0.25s ease, transform 0.2s ease;
}

.naman-doc-card:hover .naman-doc-card__btn {
  background: #8A6E50;
  transform: translateY(-2px);
}

.naman-doc-card:hover .naman-doc-card__btn {
  background: #D5A84A;
  color: #2E1F14;
}

/* 2. Single Doctor Profile Hero */
.doc-hero {
  padding: 40px 0 50px;
  background: linear-gradient(180deg, #FAF6F0 0%, #FFFFFF 100%);
  border-bottom: 1px solid #ECE3D4;
}

.doc-hero__grid {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 48px;
  align-items: start;
}

.doc-hero__portrait-wrap {
  position: relative;
}

.doc-hero__portrait {
  width: 100%;
  height: 500px;
  background: linear-gradient(180deg, #F5EDE0 0%, #E8DAC4 100%);
  border-radius: 180px 180px 24px 24px;
  overflow: hidden;
  border: 2px solid #D5A84A;
  box-shadow: 0 16px 40px rgba(74, 50, 34, 0.12);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.doc-hero__portrait picture {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Chừa khoảng trên đầu bác sĩ: ảnh gốc sát mép trên, khung vòm cắt mất tóc */
.doc-hero__portrait img {
  width: auto;
  max-width: 100%;
  height: 90%;
  object-fit: contain;
  object-position: bottom center;
}

.doc-hero__cchn-box {
  margin-top: 16px;
  background: #FFFFFF;
  border: 1px solid #ECE3D4;
  border-radius: 12px;
  padding: 14px 18px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(74, 50, 34, 0.05);
}

.doc-hero__cchn-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: #8C7866;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.doc-hero__cchn-num {
  font-size: 1.05rem;
  font-weight: 700;
  color: #4A3222;
  font-family: var(--sans);
}

.doc-hero__info {
  display: flex;
  flex-direction: column;
}

.doc-hero__subtitle {
  font-size: 0.85rem;
  font-weight: 700;
  color: #AB8D6B;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

.doc-hero__title {
  font-family: var(--serif);
  font-size: 2.2rem;
  color: #4A3222;
  margin: 0 0 12px;
  line-height: 1.25;
}

.doc-hero__quote {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #555555;
  font-style: italic;
  margin: 0 0 24px;
  padding-left: 18px;
  border-left: 4px solid #D5A84A;
}

.doc-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.doc-hero__stat-card {
  background: #FFFFFF;
  border: 1px solid #ECE3D4;
  border-radius: 14px;
  padding: 18px 14px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(74, 50, 34, 0.04);
}

.doc-hero__stat-num {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 700;
  color: #4A3222;
  line-height: 1;
  margin-bottom: 6px;
  display: block;
}

.doc-hero__stat-num sup {
  color: #D5A84A;
  font-size: 1.2rem;
}

.doc-hero__stat-lbl {
  font-size: 0.8rem;
  color: #7A624E;
  line-height: 1.35;
  font-weight: 500;
}

.doc-hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* 3. Nam An Vertical Numbered Timeline */
.naman-timeline {
  max-width: 860px;
  margin: 2.5rem auto 0;
  position: relative;
  padding-left: 60px;
}

.naman-timeline::before {
  content: "";
  position: absolute;
  top: 15px;
  bottom: 20px;
  left: 23px;
  width: 2px;
  background: linear-gradient(180deg, #D5A84A 0%, #ECE3D4 100%);
}

.timeline-item {
  position: relative;
  margin-bottom: 32px;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-item__badge {
  position: absolute;
  left: -60px;
  top: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #4A3222;
  color: #F8D98C;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #FAF6F0;
  box-shadow: 0 4px 12px rgba(74, 50, 34, 0.18);
  z-index: 2;
}

.timeline-item__content {
  background: #FFFFFF;
  border: 1px solid #ECE3D4;
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 6px 20px rgba(74, 50, 34, 0.04);
}

.timeline-item__year {
  font-size: 0.82rem;
  font-weight: 700;
  color: #D5A84A;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  display: block;
}

.timeline-item__title {
  font-family: var(--serif);
  font-size: 1.18rem;
  color: #4A3222;
  margin: 0 0 8px;
  line-height: 1.35;
}

.timeline-item__desc {
  font-size: 0.9rem;
  color: #666666;
  line-height: 1.55;
  margin: 0;
}

/* 4. Dấu ấn chuyên môn & Thế mạnh kỹ thuật */
.specialty-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 2rem;
}

.specialty-card {
  background: #FFFFFF;
  border: 1px solid #ECE3D4;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 6px 20px rgba(74, 50, 34, 0.04);
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.specialty-card:hover {
  transform: translateY(-4px);
  border-color: #D5A84A;
}

.specialty-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #FAF6F0;
  color: #D5A84A;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 1.2rem;
  border: 1px solid rgba(213, 168, 74, 0.3);
}

.specialty-card__title {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: #4A3222;
  margin: 0 0 10px;
}

.specialty-card__desc {
  font-size: 0.88rem;
  color: #666666;
  line-height: 1.55;
  margin: 0;
}

/* 5. Bằng cấp & Chứng chỉ Gallery */
.cert-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 2rem;
}

.cert-card {
  background: #FFFFFF;
  border: 1px solid #ECE3D4;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(74, 50, 34, 0.05);
  display: flex;
  flex-direction: column;
}

.cert-card__img-wrap {
  width: 100%;
  height: 240px;
  background: #F4EFEA;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cert-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.cert-card:hover .cert-card__img-wrap img {
  transform: scale(1.05);
}

.cert-card__body {
  padding: 16px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cert-card__tag {
  font-size: 0.76rem;
  font-weight: 700;
  color: #D5A84A;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.cert-card__name {
  font-size: 0.92rem;
  font-weight: 600;
  color: #4A3222;
  line-height: 1.4;
  margin: 0;
}

/* ==========================================================================
   TRANG TUYỂN DỤNG FOXY M.D (/tuyen-dung)
   ========================================================================== */
.career-hero {
  padding: 60px 0 50px;
  background: linear-gradient(180deg, #FAF6F0 0%, #FFFFFF 100%);
  text-align: center;
  border-bottom: 1px solid #ECE3D4;
}

.career-hero h1 {
  font-family: var(--serif);
  font-size: 2.5rem;
  color: #4A3222;
  margin: 0.5rem 0 1rem;
}

.career-hero p {
  max-width: 680px;
  margin: 0 auto;
  font-size: 1.05rem;
  color: #666666;
  line-height: 1.6;
}

.perks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin-top: 2rem;
}

.perk-card {
  background: #FFFFFF;
  border: 1px solid #ECE3D4;
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(74, 50, 34, 0.04);
}

.perk-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #FAF6F0;
  color: #D5A84A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  border: 1px solid rgba(213, 168, 74, 0.3);
}

.perk-card h3 {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: #4A3222;
  margin: 0 0 8px;
}

.perk-card p {
  font-size: 0.88rem;
  color: #666666;
  line-height: 1.5;
  margin: 0;
}

.jobs-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 2rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.job-card {
  background: #FFFFFF;
  border: 1px solid #ECE3D4;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(74, 50, 34, 0.04);
  transition: border-color 0.25s ease;
}

.job-card:hover {
  border-color: #D5A84A;
}

.job-card__header {
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
  background: #FFFFFF;
}

.job-card__title-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.job-card__badge-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.job-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: #FAF6F0;
  color: #4A3222;
  border: 1px solid #ECE3D4;
}

.job-badge--hot {
  background: #FFF4E5;
  color: #C07000;
  border-color: #F8D98C;
}

.job-card__title {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: #4A3222;
  margin: 0;
}

.job-card__salary {
  font-size: 0.95rem;
  font-weight: 700;
  color: #D5A84A;
}

.job-card__toggle-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FAF6F0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4A3222;
  transition: transform 0.25s ease;
}

.job-card.is-open .job-card__toggle-icon {
  transform: rotate(180deg);
  background: #4A3222;
  color: #FFFFFF;
}

.job-card__body {
  padding: 0 24px 24px;
  border-top: 1px dashed #ECE3D4;
  margin-top: 4px;
  display: none;
}

.job-card.is-open .job-card__body {
  display: block;
}

.job-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 18px;
}

.job-details-col h4 {
  font-size: 0.95rem;
  color: #4A3222;
  margin: 0 0 10px;
  font-weight: 700;
}

.job-details-col ul {
  padding-left: 18px;
  margin: 0;
  font-size: 0.88rem;
  color: #555555;
  line-height: 1.6;
}

.job-card__action {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.hiring-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 2.5rem;
}

.step-card {
  background: #FFFFFF;
  border: 1px solid #ECE3D4;
  border-radius: 16px;
  padding: 24px 18px;
  text-align: center;
  position: relative;
  box-shadow: 0 6px 20px rgba(74, 50, 34, 0.04);
}

.step-card__num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #4A3222;
  color: #F8D98C;
  font-weight: 700;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.step-card h4 {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: #4A3222;
  margin: 0 0 6px;
}

.step-card p {
  font-size: 0.82rem;
  color: #666666;
  line-height: 1.45;
  margin: 0;
}

/* Media Queries for Doctor & Career Pages */
@media (max-width: 960px) {
  .doc-hero__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .doc-hero__portrait {
    height: 420px;
    max-width: 360px;
    margin: 0 auto;
  }
  .hiring-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .naman-doc-grid {
    grid-template-columns: 1fr;
  }
  .naman-doc-card__frame {
    height: 320px;
  }
  .doc-hero__portrait {
    height: 360px;
  }
  .doc-hero__title {
    font-size: 1.75rem;
  }
  .doc-hero__stats {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .naman-timeline {
    padding-left: 48px;
  }
  .timeline-item__badge {
    left: -48px;
    width: 38px;
    height: 38px;
    font-size: 0.9rem;
  }
  .job-details-grid {
    grid-template-columns: 1fr;
  }
  .job-card__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .hiring-steps {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   KHỐI SỰ KIỆN CHUYỂN GIAO CÔNG NGHỆ & THƯ VIỆN ẢNH THẬT FOXY M.D
   ========================================================================== */

/* 1. Lưới Sự kiện Chuyển giao Công nghệ (Bố cục 4 bài) */
.event-transfer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 2rem;
}

@media (max-width: 860px) {
  .event-transfer-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}


.event-card {
  background: #FFFFFF;
  border: 1px solid #ECE3D4;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(74, 50, 34, 0.06);
  display: flex;
  flex-direction: column;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.event-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 48px rgba(74, 50, 34, 0.12);
  border-color: #D5A84A;
}

.event-card__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: #F7EFE2;
}

.event-card__img-wrap picture {
  display: block;
  width: 100%;
  height: 100%;
}

.event-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.event-card:hover .event-card__img-wrap img {
  transform: scale(1.05);
}

.event-card__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(74, 50, 34, 0.9);
  backdrop-filter: blur(8px);
  color: #D5A84A;
  border: 1px solid rgba(213, 168, 74, 0.4);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 14px;
  border-radius: 999px;
  z-index: 2;
}

.event-card__body {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.event-card__date {
  font-size: 0.8rem;
  color: #8C7A6B;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.event-card__title {
  font-family: var(--sans);
  font-size: clamp(1.15rem, 1.4vw, 1.35rem);
  color: #4A3222;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 10px;
}

.event-card--featured .event-card__title {
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
}

.event-card__desc {
  font-size: 0.92rem;
  color: #665548;
  line-height: 1.6;
  margin: 0 0 18px;
  flex-grow: 1;
}

.event-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #F3ECE0;
  padding-top: 14px;
  margin-top: auto;
}

.event-card__partner {
  font-size: 0.82rem;
  font-weight: 600;
  color: #8C6D3F;
}

.event-card__link {
  font-size: 0.85rem;
  font-weight: 700;
  color: #4A3222;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s, gap 0.2s;
}

.event-card:hover .event-card__link {
  color: #D5A84A;
  gap: 8px;
}

@media (max-width: 768px) {
  .event-transfer-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    margin-top: 1.5rem !important;
  }
  .event-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    padding: 0 !important;
    gap: 0 !important;
    background: #FFFFFF !important;
    box-shadow: 0 6px 20px rgba(74, 50, 34, 0.07) !important;
    border: 1px solid #F0E8DC !important;
  }
  .event-card__img-wrap {
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    border-radius: 20px 20px 0 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }
  .event-card__img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  .event-card__badge {
    top: 12px !important;
    left: 12px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    padding: 5px 13px !important;
    letter-spacing: 0.02em !important;
    background: rgba(46, 32, 21, 0.88) !important;
    backdrop-filter: blur(6px) !important;
    color: #E2C076 !important;
    border-radius: 30px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    z-index: 2 !important;
  }
  .event-card__body {
    padding: 18px 18px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    min-width: 0 !important;
  }
  .event-card__date {
    margin-bottom: 6px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #8C6D3F !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .event-card__title {
    font-size: 1.12rem !important;
    line-height: 1.4 !important;
    color: #4A3222 !important;
    font-weight: 600 !important;
    margin: 0 0 8px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .event-card__desc {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 0.88rem !important;
    color: #665548 !important;
    line-height: 1.55 !important;
    margin: 0 0 14px !important;
  }
  .event-card__footer {
    border-top: 1px solid #F3ECE0 !important;
    padding-top: 12px !important;
    margin-top: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .event-card__partner {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #8C6D3F !important;
  }
  .event-card__link {
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    color: #4A3222 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
  }
}

/* 2. Thư viện Bento Hình ảnh Thực tế Phòng khám */
.real-clinic-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 240px);
  gap: 18px;
  margin-top: 2rem;
}

.bento-item {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(74, 50, 34, 0.08);
  border: 1px solid #EAE0D0;
  cursor: pointer;
  background: #2A1D15;
}

.bento-item--large {
  grid-column: span 2;
  grid-row: span 2;
}

.bento-item--tall {
  grid-row: span 2;
}

.bento-item--wide {
  grid-column: span 2;
}

.bento-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
}

.bento-item:hover img {
  transform: scale(1.06);
  opacity: 0.88;
}

.bento-item__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(74, 50, 34, 0) 40%, rgba(74, 50, 34, 0.85) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  color: #FFFFFF;
  pointer-events: none;
}

.bento-item__tag {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #E2C078;
  font-weight: 700;
  margin-bottom: 4px;
}

.bento-item__title {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 600;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.35;
}

.bento-item--large .bento-item__title {
  font-size: 1.4rem;
}

/* Responsive */
@media (max-width: 960px) {
  .event-transfer-grid {
    grid-template-columns: 1fr;
  }
  .event-card--featured {
    grid-row: auto;
  }
  .real-clinic-bento {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
  .bento-item--large {
    grid-column: span 2;
    height: 320px;
  }
  .bento-item--tall {
    grid-row: auto;
    height: 240px;
  }
  .bento-item--wide {
    grid-column: span 2;
    height: 240px;
  }
  .bento-item {
    height: 220px;
  }
}

@media (max-width: 560px) {
  .real-clinic-bento {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .bento-item--large,
  .bento-item--wide,
  .bento-item--tall,
  .bento-item {
    grid-column: span 1;
    grid-row: auto;
    height: 240px;
  }
}

/* ============ SECTION TUYỂN DỤNG TRANG CHỦ (CAREER TEASER) ============ */
.career-teaser {
  background: #FCF8F3;
  border-top: 1px solid #ECE3D4;
  border-bottom: 1px solid #ECE3D4;
  padding: 68px 0;
  position: relative;
}
.career-teaser .section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 2.5rem;
}
.career-teaser .section-head h2 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  color: #4A3222;
  margin: 0.4rem 0 0.8rem;
  letter-spacing: -0.01em;
}
.career-teaser .section-head p {
  color: #666666;
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0;
}
.career-teaser__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 1024px) {
  .career-teaser__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}
@media (max-width: 640px) {
  .career-teaser__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
.career-teaser__card {
  background: #FFFFFF;
  border: 1px solid #EDE3D3;
  border-radius: 18px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 22px rgba(74, 50, 34, 0.05);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.career-teaser__card:hover {
  transform: translateY(-5px);
  border-color: #D5A84A;
  box-shadow: 0 14px 32px rgba(74, 50, 34, 0.11);
}
.career-teaser__badge-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.career-teaser__role {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: #4A3222;
  margin: 0 0 10px;
  font-weight: 600;
  line-height: 1.4;
}
.career-teaser__desc {
  font-size: 0.92rem;
  color: #555555;
  line-height: 1.58;
  margin: 0 0 18px;
  flex: 1;
}
.career-teaser__salary {
  font-size: 0.95rem;
  color: #7A5832;
  border-top: 1px dashed #EDE3D3;
  padding-top: 14px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.career-teaser__salary b {
  color: #C07000;
  font-weight: 700;
  font-size: 1.05rem;
}
.career-teaser__footer {
  margin-top: 36px;
  background: #FFFFFF;
  border: 1px solid #EDE3D3;
  border-radius: 18px;
  padding: 22px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  box-shadow: 0 6px 20px rgba(74, 50, 34, 0.04);
}
.career-teaser__perks {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.career-teaser__perk {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  font-weight: 500;
  color: #4A3222;
}
.career-teaser__perk svg {
  flex-shrink: 0;
}
@media (max-width: 960px) {
  .career-teaser__footer {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 20px;
  }
  .career-teaser__perks {
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
  }
  .career-teaser__action {
    width: 100%;
  }
  .career-teaser__action .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   VÁ 21: GIAO DIỆN TRANG PHỄU DỊCH VỤ CHUẨN BỆNH VIỆN THẨM MỸ NAM AN
   (Cụm 4 ảnh bo góc cánh hoa, chia cột, ô dịch vụ con, 3 chỉ số, card đặt lịch)
   ========================================================================== */
.naman-service-page{
  padding: 30px 20px 60px;
  background: #FFFFFF;
  box-sizing: border-box;
}
.naman-crumb{
  font-size: 0.86rem;
  color: #8C7B6B;
  margin-bottom: 24px;
}
.naman-crumb a{
  color: #6E5A47;
  text-decoration: none;
  transition: color .2s;
}
.naman-crumb a:hover{
  color: #AB8D6B;
}
.naman-crumb span{
  color: #38281B;
  font-weight: 600;
}

/* Khối Hero 2 Cột chuẩn Nam An */
.naman-hero-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  margin-bottom: 48px;
}

/* Cụm 4 ảnh Gallery bo góc cánh hoa đặc trưng Nam An */
.naman-gallery-4{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 490px;
  margin: 0 auto;
}
.naman-gallery-4__item{
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: #FAF6EF;
  box-shadow: 0 10px 24px -10px rgba(74, 50, 34, 0.22);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.naman-gallery-4__item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.naman-gallery-4__item:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -12px rgba(74, 50, 34, 0.32);
}
.naman-gallery-4__item:hover img{
  transform: scale(1.05);
}
/* Bo góc cánh hoa hữu cơ theo 4 vị trí */
.naman-gallery-4__item:nth-child(1){
  border-radius: clamp(34px, 6vw, 54px) 14px 14px 14px;
}
.naman-gallery-4__item:nth-child(2){
  border-radius: 14px clamp(34px, 6vw, 54px) 14px 14px;
}
.naman-gallery-4__item:nth-child(3){
  border-radius: 14px 14px 14px clamp(34px, 6vw, 54px);
}
.naman-gallery-4__item:nth-child(4){
  border-radius: 14px 14px clamp(34px, 6vw, 54px) 14px;
}

/* Cột thông tin & Dịch vụ con */
.naman-service-content{
  display: flex;
  flex-direction: column;
}
.naman-divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, #E6D9C5 20%, #E6D9C5 80%, transparent);
  border: none;
  margin: 12px 0;
}
.naman-service__title{
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.2vw, 2.75rem);
  font-weight: 500;
  color: #6E4F33;
  text-align: center;
  margin: 12px 0;
  line-height: 1.25;
}
.naman-subservices{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0;
}
.naman-subservice-pill{
  display: block;
  padding: 13px 18px;
  background: #FFFFFF;
  border: 1px solid #E6D9C5;
  border-radius: 10px;
  color: #38281B;
  font-size: 0.92rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(74, 50, 34, 0.04);
}
.naman-subservice-pill:hover{
  border-color: #AB8D6B;
  background: #FFFDF8;
  color: #AB8D6B;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(171, 141, 107, 0.16);
}
.naman-btn-price{
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 18px auto 0;
  background: linear-gradient(135deg, #4A3222 0%, #AB8D6B 100%);
  color: #FFFFFF;
  font-size: 0.88rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 14px 28px;
  border-radius: 99px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(171, 141, 107, 0.35);
  transition: all 0.25s ease;
}
.naman-btn-price:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(171, 141, 107, 0.45);
  filter: brightness(1.05);
}

/* Thanh 3 chỉ số uy tín */
.naman-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  text-align: center;
  margin: 40px auto 48px;
  max-width: 820px;
  padding: 24px 16px;
  background: #FFFDF9;
  border: 1px solid #EFE5D5;
  border-radius: 18px;
}
.naman-stat-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.naman-stat-num{
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 2.85rem);
  font-weight: 500;
  color: #AB8D6B;
  line-height: 1;
  margin-bottom: 6px;
}
.naman-stat-num sup{
  font-size: 0.55em;
  top: -0.4em;
}
.naman-stat-label{
  font-size: 0.82rem;
  color: #6E5A47;
  font-weight: 500;
  line-height: 1.3;
}

/* Card Đặt lịch tư vấn */
.naman-booking-card{
  max-width: 680px;
  margin: 0 auto 30px;
  background: #FFFFFF;
  border: 1px solid #EFE5D5;
  border-radius: 26px;
  padding: clamp(24px, 4vw, 40px);
  box-shadow: 0 18px 46px -20px rgba(74, 50, 34, 0.2);
}
.naman-booking-title{
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 500;
  color: #4A3222;
  text-align: center;
  margin: 0 0 24px;
}
.naman-booking-form{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.naman-input,
.naman-select,
.naman-textarea{
  width: 100%;
  border: 1px solid #E6D9C5;
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 0.92rem;
  color: #38281B;
  background: #FAF6EF;
  outline: none;
  transition: all .2s;
  box-sizing: border-box;
  font-family: var(--sans);
}
.naman-input:focus,
.naman-select:focus,
.naman-textarea:focus{
  border-color: #AB8D6B;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(171, 141, 107, 0.15);
}
.naman-textarea{
  min-height: 92px;
  resize: vertical;
}
.naman-submit-btn{
  background: linear-gradient(135deg, #4A3222 0%, #AB8D6B 100%);
  color: #FFFFFF;
  font-size: 0.92rem;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  padding: 15px 24px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 6px 18px rgba(171, 141, 107, 0.35);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.naman-submit-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(171, 141, 107, 0.45);
}

/* Box Thông tin liên hệ */
.naman-contact-box{
  max-width: 680px;
  margin: 0 auto 48px;
  background: linear-gradient(135deg, #8B6B45 0%, #AB8D6B 100%);
  color: #FFFFFF;
  border-radius: 20px;
  padding: 28px clamp(18px, 4vw, 36px);
  box-shadow: 0 16px 36px -16px rgba(74, 50, 34, 0.35);
}
.naman-contact-title{
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 500;
  color: #FFFFFF;
  text-align: center;
  margin: 0 0 18px;
}
.naman-contact-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.28);
  font-size: 0.92rem;
}
.naman-contact-row span{
  color: rgba(255, 255, 255, 0.9);
}
.naman-contact-row b,
.naman-contact-row a{
  color: #FFFFFF;
  font-weight: 700;
  text-align: right;
}
.naman-contact-row a{
  text-decoration: underline;
}

/* Khối Ai phù hợp & Chống chỉ định */
.naman-suitability{
  max-width: 820px;
  margin: 48px auto;
  padding: 0 16px;
}
.naman-suitability__title{
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  color: #6E4F33;
  text-align: center;
  margin-bottom: 24px;
}
.naman-suitability__list{
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
}
.naman-suitability__list li{
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  font-size: 0.96rem;
  color: #38281B;
  line-height: 1.6;
}
.naman-suitability__list li::before{
  content: "•";
  position: absolute;
  left: 6px;
  color: #AB8D6B;
  font-size: 1.5rem;
  line-height: 1;
  top: -2px;
}
.naman-contra{
  background: #FFF9F2;
  border: 1px solid #F5E2CE;
  border-radius: 16px;
  padding: 22px 24px;
}
.naman-contra__tag{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #C05621;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}
.naman-contra__list{
  list-style: disc;
  margin: 0;
  padding-left: 20px;
  font-size: 0.9rem;
  color: #4A3222;
  line-height: 1.6;
}

/* Responsive trên mobile — Căn lề hai bên rộng rãi, đồng bộ từ trên xuống dưới */
@media (max-width: 768px){
  :root{
    --gut: 20px;
  }
  .wrap{
    padding-inline: 20px !important;
    box-sizing: border-box !important;
  }

  /* Trang chi tiết Dịch vụ kiểu Nam An — Căn lề hai bên đồng bộ 100% */
  .naman-service-page{
    padding: 16px 20px 54px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .naman-crumb{
    margin-bottom: 14px !important;
    font-size: 0.82rem !important;
    text-align: center !important;
  }
  .naman-hero-grid{
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    margin-bottom: 24px !important;
    width: 100% !important;
  }
  .naman-gallery-4{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 14px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }
  .naman-service-content{
    width: 100% !important;
    align-items: stretch !important;
  }
  .naman-service__title{
    font-size: 1.55rem !important;
    margin: 8px 0 12px !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    line-height: 1.3 !important;
  }
  .naman-divider{
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 !important;
  }
  .naman-subservices{
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px 0 !important;
    gap: 9px !important;
  }
  .naman-subservice-pill{
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 14px !important;
    font-size: 0.88rem !important;
    border-radius: 12px !important;
    text-align: center !important;
  }
  .naman-btn-price{
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px 0 0 !important;
    padding: 13px 20px !important;
    font-size: 0.86rem !important;
    box-sizing: border-box !important;
  }
  .naman-stats{
    width: 100% !important;
    max-width: 100% !important;
    margin: 24px 0 28px !important;
    gap: 6px !important;
    padding: 16px 8px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
  }
  .naman-stat-num{
    font-size: 1.85rem !important;
  }
  .naman-stat-label{
    font-size: 0.72rem !important;
  }
  .naman-booking-card{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 24px !important;
    border-radius: 18px !important;
    padding: 20px 16px !important;
    box-sizing: border-box !important;
  }
  .naman-booking-title{
    font-size: 1.55rem !important;
    margin-bottom: 16px !important;
  }
  .naman-contact-box{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 32px !important;
    border-radius: 18px !important;
    padding: 20px 16px !important;
    box-sizing: border-box !important;
  }
  .naman-contact-title{
    font-size: 1.55rem !important;
    margin-bottom: 14px !important;
  }
  .naman-contact-row{
    font-size: 0.86rem !important;
    padding: 9px 0 !important;
  }
  .naman-suitability{
    width: 100% !important;
    max-width: 100% !important;
    margin: 24px 0 !important;
    padding: 0 !important;
  }
  .naman-suitability__title{
    font-size: 1.45rem !important;
    margin-bottom: 14px !important;
  }
  .naman-contra{
    padding: 16px 14px !important;
    border-radius: 14px !important;
  }

  /* [MỤC 4] BẢNG GIÁ CHI TIẾT TRÊN MOBILE — GỌN GÀNG, VỪA KHÍT KHUNG */
  #bang-gia{
    width: 100% !important;
    max-width: 100% !important;
    margin: 28px 0 !important;
  }
  .nd-sec-header{
    margin-bottom: 16px !important;
  }
  .nd-sec-title{
    font-size: 1.4rem !important;
    margin: 6px 0 !important;
    line-height: 1.3 !important;
  }
  .nd-sec-desc{
    font-size: 0.85rem !important;
    line-height: 1.45 !important;
  }
  .nd-price__card{
    padding: 12px 14px !important;
    border-radius: 16px !important;
    border: 1px solid #EFE5D5 !important;
    background: #FFFFFF !important;
    box-shadow: 0 4px 16px rgba(74, 50, 34, 0.05) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .nd-price__table{
    display: block !important;
    width: 100% !important;
    border: none !important;
  }
  .nd-price__table thead{
    display: none !important;
  }
  .nd-price__table tbody{
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .nd-price__table tr{
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "name price"
      "note note" !important;
    align-items: baseline !important;
    gap: 4px 10px !important;
    padding: 10px 12px !important;
    background: #FAF6EF !important;
    border: 1px solid #F0E6D6 !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  .nd-price__name{
    grid-area: name !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: #38281B !important;
    line-height: 1.35 !important;
    padding: 0 !important;
    border: none !important;
  }
  .nd-price__val{
    grid-area: price !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #AB8D6B !important;
    text-align: right !important;
    white-space: nowrap !important;
    padding: 0 !important;
    border: none !important;
  }
  .nd-price__note{
    grid-area: note !important;
    font-size: 0.78rem !important;
    color: #7A6652 !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    border: none !important;
  }
  .nd-price__note:empty{
    display: none !important;
  }

  /* [MỤC 5] CẨM NANG & KIẾN THỨC CHUYÊN SÂU TRÊN MOBILE — TINH GỌN */
  .nd-camnang__grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .nd-camnang__card{
    padding: 12px 14px !important;
    border-radius: 12px !important;
    background: #FFFFFF !important;
    border: 1px solid #EFE5D5 !important;
    box-shadow: 0 2px 8px rgba(74, 50, 34, 0.04) !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  .nd-camnang__card span[style*="text-transform:uppercase"]{
    font-size: 0.68rem !important;
    padding: 2px 6px !important;
    margin-bottom: 6px !important;
  }
  .nd-camnang__card h4{
    font-size: 0.9rem !important;
    margin: 0 0 4px !important;
    line-height: 1.35 !important;
  }
  .nd-camnang__card p{
    font-size: 0.78rem !important;
    margin: 0 0 6px !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    color: #6E5A47 !important;
  }
  .nd-camnang__card a[style*="font-weight:600"]{
    font-size: 0.78rem !important;
  }
}

/* ==========================================================================
   VÁ 24 (25/09/2026): ĐỒNG BỘ MÀU NỀN KHỐI THAM VẤN EEAT & SÓNG CHÂN TRANG
   (Khắc phục triệt để vệt trắng lạc tông cắt ngang giữa khối kem và chân trang)
   ========================================================================== */
html body main > section.eeat,
main > section.eeat,
main > section:last-of-type.eeat,
.eeat {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 20px 34px !important;
  display: flex !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  background: #F1EADD !important;
}
.eeat__in {
  width: 100% !important;
  max-width: 1120px !important;
  box-sizing: border-box !important;
}

/* Mặc định sóng chân trang khớp màu nền khối kem phía trên */
.footer__wave path {
  fill: #F1EADD !important;
}

/* Trang chủ: khối tuyển dụng career-teaser nối mượt sang EEAT và sóng chân trang */
body:has(.career-teaser) .career-teaser {
  border-bottom: none !important;
}
html body:has(.career-teaser) main > section.eeat,
body:has(.career-teaser) .eeat {
  background: #FCF8F3 !important;
}
body:has(.career-teaser) .footer__wave path {
  fill: #FCF8F3 !important;
}

/* Các trang có khối cuối là section--cream không bị VÁ 5 ép thành trắng */
main > section.section--cream:last-of-type {
  background: linear-gradient(180deg,#FFFFFF 0%,#FBF7F0 52%,#F1EADD 100%) !important;
}

/* 13 trang dịch vụ chi tiết (dich-vu/*.html) có khối cuối là section--white: EEAT & sóng chân trang giữ màu trắng */
html body:has(.nd-hero) main > section.eeat,
body:has(.nd-hero) .eeat {
  background: #FFFFFF !important;
}
body:has(.nd-hero) .footer__wave path {
  fill: #FFFFFF !important;
}

/* ==========================================================================
   VÁ 25 (25/09/2026):
   1. Trang pháp lý (chính sách bảo mật & điều khoản sử dụng): EEAT & sóng chân trang giữ màu trắng #FFFFFF liền mạch.
   2. Form nộp hồ sơ tuyển dụng: card đơn full width (.booking--single), xóa bỏ khoảng trắng trống 1 cột bên phải.
   3. Hành trình chuyên môn: Chuẩn Nam An Vertical Numbered Timeline (flexbox, số tròn 01-06, đường line gradient vàng nâu, card bo góc đổ bóng).
   ========================================================================== */

/* 1. Trang pháp lý thuần trắng liền mạch */
html body:has(.phaply) main > section.eeat,
body:has(.phaply) .eeat,
body:has(.phaply) main > section:last-of-type.eeat {
  background: #FFFFFF !important;
}
body:has(.phaply) .footer__wave path {
  fill: #FFFFFF !important;
}

/* 2. Form tuyển dụng card đơn full width */
.booking--single {
  grid-template-columns: 1fr !important;
  display: block !important;
  opacity: 1 !important;
  transform: none !important;
}
.booking--single .booking__form {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* 3. Hành trình chuyên môn chuẩn Nam An (Vertical Timeline) */
.naman-timeline,
.journey {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  max-width: 680px !important;
  margin: 1.5rem auto 0 !important;
  padding-left: 0 !important;
}
.naman-timeline::before,
.journey::before {
  content: "" !important;
  position: absolute !important;
  left: 17px !important;
  top: 18px !important;
  bottom: 24px !important;
  width: 2px !important;
  background: linear-gradient(to bottom, #AB8D6B 0%, #D5A84A 70%, rgba(213, 168, 74, 0.15) 100%) !important;
  z-index: 1 !important;
}
.timeline-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding-bottom: 18px !important;
  position: relative !important;
  z-index: 2 !important;
  margin-bottom: 0 !important;
  opacity: 1 !important;
  transform: none !important;
}
.timeline-item:last-child {
  padding-bottom: 0 !important;
}
.timeline-num,
.timeline-item__badge {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  border: 2px solid #AB8D6B !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--sans) !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  color: #4A3222 !important;
  flex-shrink: 0 !important;
  box-shadow: 0 3px 8px rgba(171, 141, 107, 0.2) !important;
  box-sizing: border-box !important;
  transition: transform 0.2s ease, border-color 0.2s ease !important;
}
.timeline-item:hover .timeline-num,
.timeline-item:hover .timeline-item__badge {
  transform: scale(1.08) !important;
  border-color: #D5A84A !important;
  color: #D5A84A !important;
}
.timeline-box,
.timeline-item__content {
  flex: 1 !important;
  border: 1px solid rgba(212, 185, 154, 0.7) !important;
  border-radius: 14px !important;
  padding: 13px 16px !important;
  background: #FFFFFF !important;
  box-shadow: 0 3px 12px rgba(74, 50, 34, 0.04) !important;
  box-sizing: border-box !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
.timeline-item:hover .timeline-box,
.timeline-item:hover .timeline-item__content {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(171, 141, 107, 0.1) !important;
  border-color: #AB8D6B !important;
}
.timeline-date,
.timeline-item__year {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #AB8D6B !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 3px !important;
  display: block !important;
}
.timeline-title,
.timeline-item__title {
  margin: 0 0 4px !important;
  font-family: var(--sans) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #482B25 !important;
  line-height: 1.35 !important;
}
.timeline-desc,
.timeline-item__desc {
  margin: 0 !important;
  font-size: 13px !important;
  color: #6E5A4D !important;
  line-height: 1.5 !important;
}
.timeline-meta {
  font-size: 12px !important;
  color: #8A6E50 !important;
  font-style: italic !important;
  margin-top: 4px !important;
  display: block !important;
}

/* ==========================================================================
   VÁ 25: TỐI ƯU GIAO DIỆN DỊCH VỤ & BÀI VIẾT (USER 25/09 20:53)
   ========================================================================== */

/* 1. Thu gọn Carousel chọn nhóm dịch vụ */
.group-card__items {
  display: none !important;
}
.group-card--visual {
  border-radius: 16px !important;
}
.group-card__body {
  padding: 10px 14px 14px !important;
}
.group-card__body h3 {
  font-size: 1.05rem !important;
  margin: 0 0 6px !important;
  line-height: 1.3 !important;
}
.group-card__body .group-card__link {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
}
@media (max-width: 768px) {
  #serviceGroups.groups {
    grid-auto-columns: min(78vw, 290px) !important;
    padding: 6px 16px 18px !important;
  }
  .group-card__media {
    height: 135px !important;
  }
}

/* 2. Khối nhóm dịch vụ lớn sblock: Desktop 2 cột (cột phải ảnh 1800x1330), Mobile gọn gàng 2 nút ngang hàng */
.sblock {
  display: grid !important;
  grid-template-columns: 1.15fr 1fr !important;
  gap: clamp(20px, 3vw, 40px) !important;
  align-items: center !important;
  max-width: 1080px !important;
  margin: 0 auto 28px !important;
  padding: clamp(22px, 2.5vw, 32px) !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(224, 208, 196, 0.75) !important;
  border-radius: 20px !important;
  box-shadow: 0 6px 24px rgba(171, 141, 107, 0.06) !important;
}
.sblock--flip {
  background: #FAF6F0 !important;
}
.sblock__body {
  width: 100% !important;
}
.sblock__media {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1800 / 1330 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #FAF6F0 !important;
  box-shadow: 0 8px 24px rgba(74, 50, 34, 0.08) !important;
}
.sblock__media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.sblock__actions {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  margin-top: 16px !important;
  width: 100% !important;
}
.sblock__actions .btn {
  flex: 1 1 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 0 8px !important;
  height: 40px !important;
  font-size: 13px !important;
  white-space: nowrap !important;
  border-radius: 50px !important;
  box-sizing: border-box !important;
}
@media (max-width: 768px) {
  .sblock {
    grid-template-columns: 1fr !important;
    padding: 16px 16px 18px !important;
    margin-bottom: 18px !important;
    border-radius: 18px !important;
  }
  .sblock__media {
    display: none !important;
  }
  .sblock h2 {
    font-size: 1.35rem !important;
  }
  .sblock__sub {
    font-size: 0.82rem !important;
    margin-bottom: 0.8rem !important;
  }
  .sblock__list {
    gap: 0.45rem !important;
    margin-bottom: 0.9rem !important;
  }
  .sblock__list li {
    font-size: 0.84rem !important;
  }
  .sblock__actions .btn {
    height: 38px !important;
    font-size: 12.5px !important;
    padding: 0 6px !important;
  }
}

/* ==========================================================================
   VÁ 26 (25/09/2026):
   1. Form đặt lịch trên mobile: chống tràn ngang, wrap thông tin liên hệ.
   2. Dịch vụ nổi bật trang chủ: nút "Tìm hiểu thêm" và cột text thu gọn vừa khít ô card.
   3. Tuyển dụng trang chủ: Chuyển sang dạng Gallery lướt ngang trên mobile.
   ========================================================================== */

/* 1. Form đặt lịch mobile chống tràn */
@media (max-width: 640px) {
  .booking {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .booking__form,
  .booking__info {
    min-width: 0 !important;
    padding: 20px 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .booking__info .info-row {
    flex-direction: column !important;
    gap: 4px !important;
    align-items: flex-start !important;
    padding: 0.75rem 0 !important;
  }
  .booking__info .info-row span:last-child {
    text-align: left !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
  }
}

/* 2. Dịch vụ nổi bật trang chủ (catpills--home) trên mobile: Gallery lướt ngang chuẩn thò thẻ tiếp theo */
@media (max-width: 768px) {
  .catpills.catpills--home {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: min(76vw, 285px) !important;
    gap: 14px !important;
    width: auto !important;
    max-width: none !important;
    margin-inline: -20px !important;
    padding: 6px 20px 20px !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .catpills.catpills--home::-webkit-scrollbar { display: none !important; }
  .catpills.catpills--home > * {
    scroll-snap-align: start !important;
    min-width: 0 !important;
  }
  .catpills--home .catpill {
    min-height: 136px !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(74, 50, 34, 0.08) !important;
    border: 1px solid #ECE3D5 !important;
  }
  .catpills--home .catpill__img {
    flex: 0 0 34% !important;
    flex-basis: 34% !important;
  }
  .catpills--home .catpill__body {
    padding: 12px 14px 12px 12px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .catpills--home .catpill h3 {
    font-size: 1.15rem !important;
    margin: 0 0 0.5rem !important;
    white-space: nowrap !important;
  }
  .catpills--home .catpill .btn {
    font-size: 0.72rem !important;
    padding: 5px 6px 5px 12px !important;
    max-width: fit-content !important;
    box-sizing: border-box !important;
  }
  .catpills--home .catpill .btn--arrow i {
    width: 18px !important;
    height: 18px !important;
    font-size: 10px !important;
  }
}

/* 3. Tuyển dụng trang chủ: Chuyển sang dạng Gallery lướt ngang trên mobile */
@media (max-width: 768px) {
  .career-teaser__grid {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: min(84vw, 320px) !important;
    gap: 16px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 6px 20px 18px !important;
    margin-inline: -20px !important;
    scrollbar-width: none !important;
  }
  .career-teaser__grid::-webkit-scrollbar {
    display: none !important;
  }
  .career-teaser__card {
    scroll-snap-align: center !important;
    min-width: 0 !important;
    height: 100% !important;
    box-sizing: border-box !important;
  }
}







/* ==== 26/09/2026 · CAROUSEL MÁY — MOBILE LÓ 2 MÁY HAI BÊN (peek) ====
   Lỗi cũ: khối "0b" đặt .dev-card width:clamp(360px,…) KHÔNG trong media → đè 84% của mobile,
   thẻ phủ kín màn, máy trước/sau bị đẩy ra ngoài. Ở đây: carousel tràn mép màn hình,
   thẻ giữa 70vw, 2 thẻ bên lấp ló ~55px mỗi bên. overflow-x:clip để không đẻ cuộn ngang. */
@media (max-width: 768px){
  .dev-carousel{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); max-width:none; overflow-x:clip; overflow-y:visible; }
  .dev-card{ width:70vw !important; min-height:430px; }
  .dev-card.is-prev{ transform:translateX(calc(-50% - 87%)) scale(.86) !important; opacity:.75 !important; }
  .dev-card.is-next{ transform:translateX(calc(-50% + 87%)) scale(.86) !important; opacity:.75 !important; }
  .dev-card.is-prev .device__tag, .dev-card.is-next .device__tag{ opacity:0; }
  .dev-card .device__tag{ max-width:calc(100% + 24px); font-size:.66rem !important; padding:4px 10px !important; }
  .dev-card.is-prev .device__img img{ object-position:right bottom !important; }
  .dev-card.is-next .device__img img{ object-position:left bottom !important; }
  .dev-card.is-prev > div:last-child, .dev-card.is-next > div:last-child{ opacity:.25; transition:opacity .45s ease; }
  .dev-nav--prev{ left:6px; }
  .dev-nav--next{ right:6px; }
}

/* ==== 26/09/2026 · SOI MẮT MOBILE (web hub C4) ==== */
@media (max-width: 768px){
  /* nhãn máy dài (EN) tràn khỏi màn → cho xuống dòng, nằm gọn trong thẻ */
  .dev-card .device__tag{ white-space:normal !important; width:max-content; max-width:calc(100% + 16px) !important; text-align:center; line-height:1.35; justify-content:center; }
  /* nút tuyển dụng: chữ dài đẩy vòng mũi tên ra ngoài nút */
  a.btn--arrow[href$="tuyen-dung"], a.btn--arrow[href$="/careers"]{ max-width:100%; white-space:normal; text-align:left; line-height:1.3; }
  a.btn--arrow[href$="tuyen-dung"] i, a.btn--arrow[href$="/careers"] i{ flex:0 0 auto; }
  /* nút "xem hành trình" thẻ bác sĩ: bỏ mũi tên riêng dòng, chữ gọn 1-2 dòng */
  .doc__pill{ font-size:.72rem; line-height:1.3; padding:.45rem .7rem; text-align:center; }
  .dev-card .device__tag::before{ display:none; }  /* chữ đã có ✦, chấm cam bị văng khỏi chip khi xuống dòng */
  .doc__deg{ text-wrap:balance; }                  /* "DR., SPECIALIST LEVEL I" không để chữ "I" rơi 1 mình */
}

/* 26/09/2026 · thẻ máy mang transition-delay 0–480ms (inline, từ hiệu ứng reveal) → bấm chuyển thì các thẻ trượt lệch nhịp, bóng mờ chồng nhau. Hiện xong rồi thì bỏ trễ. */
.dev-card.reveal.is-in{ transition-delay:0s !important; }

/* 26/09/2026 · web-soi-chuan: focus bàn phím + vùng chạm chấm carousel máy */
.dev-nav:focus-visible, .dev-dot:focus-visible{ outline:2px solid #6E4F33; outline-offset:3px; }
.dev-dot{ position:relative; }
.dev-dot::after{ content:""; position:absolute; inset:-9px -3px; }  /* 10px → vùng chạm ~28px, không đổi hình */

/* 26/09 user: ô ảnh thẻ nhóm dịch vụ = ĐÚNG khung ảnh bìa 1800×1330 (bỏ cao cố định 155/135px → ảnh không bị cắt, không lấp nền) */
.group-card__media,
#serviceGroups .group-card__media {
  height: auto !important;
  aspect-ratio: 1800 / 1330 !important;
}


/* ===== VÁ web-toi-uu 26/09/2026 (hệ /web) — không đổi giao diện đã duyệt ===== */
/* chống chớp trắng khi chuyển trang + chuyển trang mượt kiểu app (Chrome/Edge 126+, trình duyệt cũ bỏ qua) */
html{ background:#FFFFFF; }
@view-transition{ navigation:auto; }
::view-transition-old(root),::view-transition-new(root){ animation-duration:.2s; }
@media (prefers-reduced-motion:reduce){ ::view-transition-old(root),::view-transition-new(root){ animation:none; } }
/* chấm chuyển máy: vùng bấm 24px theo chuẩn WCAG 2.2, chấm nhìn vẫn 10px */
.dev-dot{ box-sizing:content-box; padding:7px; margin:-7px; background-clip:content-box; flex:0 0 auto; width:10px; height:10px; }
.dev-dot.is-active{ width:26px; }
.dev-dot::after{ content:none; }
/* tương phản chữ nhỏ (chuẩn 4.5:1) — lệch màu mắt thường gần như không thấy */
.hero-mob__pillar small{ color:#6B6B6B; }
.footer__legal p{ color:#756B57; }
/* link trong đoạn chữ phải phân biệt được không chỉ bằng màu */
.eeat__meta a{ text-decoration:underline; text-underline-offset:2px; }
.dev-dots{ gap:14px; } /* 26/09: vùng chạm 24px không chồng nhau (WCAG 2.5.8) */
.skip-link{ position:absolute; left:12px; top:-60px; z-index:10000; background:#6E4F33; color:#fff; padding:10px 16px; border-radius:8px; font-weight:600; text-decoration:none; transition:top .15s; }
.skip-link:focus{ top:12px; }

/* 27/09 KHUNG ẢNH BÁC SĨ — chừa khoảng trên đầu (ảnh gốc bs-*-card đầu sát mép trên,
   object-fit:cover + bo góc/vòm/phóng hover cắt mất tóc trên điện thoại).
   Luật: ảnh bác sĩ = contain, neo ĐÁY, cao ≤92% khung, phóng hover từ đáy. */
.doc__img picture{ position:absolute !important; inset:0 !important; }
.doc__img img{
  inset:auto 0 0 0 !important; width:100% !important; height:92% !important;
  object-fit:contain !important; object-position:bottom center !important; transform-origin:bottom center !important;
}
.naman-doc-card__frame{ display:flex !important; align-items:flex-end !important; justify-content:center !important; }
.naman-doc-card__img,
.naman-doc-card__frame img{
  width:auto !important; max-width:100% !important; height:92% !important;
  object-fit:contain !important; object-position:bottom center !important; transform-origin:bottom center !important;
}