/* ==========================================================================
   HMT STORE — style.css
   Quần sịp nam Big Size — Landing page bán hàng
   Palette: Black / Dark Gray / Gold / White — tối giản, cao cấp, mạnh mẽ.
   Mobile-first. Không dùng framework.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  --black:#0D0D0D;
  --charcoal:#1A1A1A;
  --gray-900:#232323;
  --gray-700:#454545;
  --gray-500:#7A7A7A;
  --gray-300:#C9C7C2;
  --gray-100:#EFEDE8;
  --white:#FFFFFF;
  --off-white:#FAFAF8;
  --gold:#B99A5B;
  --gold-dark:#8C6E38;
  --gold-light:#E4D3AC;
  --line:#26241F;
  --line-soft:#E3E0D8;
  --danger:#B23A2E;
  --radius-sm:2px;
  --radius-md:4px;
  --container:1180px;
  --shadow-card:0 2px 18px rgba(13,13,13,0.06);
  --shadow-elev:0 12px 32px rgba(13,13,13,0.16);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden;}
body{
  margin:0;
  background:var(--off-white);
  color:var(--black);
  font-family:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* overflow-x:hidden trên CẢ html lẫn body (Phase 8): chỉ đặt ở body không
     đủ để chặn cuộn ngang thật trên trình duyệt di động — off-canvas menu
     (#mobileNav) và các track cuộn ngang (product-thumbs, review-track...)
     có thể khiến viewport bị kéo lệch sang phải nếu thiếu dòng này ở html. */
}
h1,h2,h3,h4{
  /* Đổi từ Bebas Neue sang Oswald: Bebas Neue thiếu glyph dấu móc (ơ/ư)
     đúng cách — chữ "ư"/"ơ" rớt mất dấu móc hoặc dấu móc bị tách rời lơ
     lửng phía trên (VD: "Đánh giá từ khách hàng" vỡ thành "...TỪ' KHÁCH...").
     Oswald có bộ dấu tiếng Việt đầy đủ và vẫn giữ được nét chữ in hoa,
     góc cạnh, khỏe khoắn tương tự. */
  font-family:"Oswald", "Arial Narrow", sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.02em;
  line-height:1.05;
  margin:0;
  color:var(--black);
}
p{margin:0;}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%; height:auto;}
button{font-family:inherit; cursor:pointer;}
ul{list-style:none; margin:0; padding:0;}
.mono{font-family:"JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}

.container{max-width:var(--container); margin:0 auto; padding:0 20px;}
@media (min-width:768px){ .container{padding:0 32px;} }

section{padding:64px 0;}
@media (min-width:768px){ section{padding:96px 0;} }

.section-head{max-width:640px; margin:0 0 36px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:600; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--gold-dark);
  margin-bottom:14px;
}
.eyebrow::before{content:""; width:20px; height:1px; background:var(--gold);}
.section-head.center .eyebrow{justify-content:center;}
.section-head.center .eyebrow::before{display:none;}
.section-head h2{font-size:clamp(26px,4vw,40px);}
.section-head p{margin-top:14px; color:var(--gray-700); font-size:15.5px; max-width:56ch;}
.section-head.center p{margin-left:auto; margin-right:auto;}
.section-dark{background:var(--black); color:var(--white);}
.section-dark h2, .section-dark h3{color:var(--white);}
.section-dark .eyebrow{color:var(--gold-light);}
.section-dark p{color:var(--gray-300);}

/* ---------- 3. BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px;
  border-radius:var(--radius-sm);
  font-weight:600; font-size:14px;
  letter-spacing:0.04em; text-transform:uppercase;
  border:1px solid transparent;
  white-space:nowrap;
  transition:background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
/* Nút vàng chính (mua hàng/CTA) — gradient kim loại + hiệu ứng ánh sáng lướt
   qua liên tục và nhịp sáng nhẹ (glow) để nút luôn "có sự sống", không tĩnh.
   Toàn bộ animation tự tắt khi prefers-reduced-motion (xem mục 2. RESET). */
.btn-gold{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dark) 100%);
  color:var(--black);
  box-shadow:0 4px 16px rgba(185,154,91,0.38);
  animation:btnGoldGlow 2.8s ease-in-out infinite;
}
.btn-gold::after{
  content:""; position:absolute; top:0; left:-65%; width:45%; height:100%;
  background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%);
  transform:skewX(-18deg);
  animation:btnGoldShine 3.4s ease-in-out infinite;
  pointer-events:none;
}
.btn-gold:hover{
  background:linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 70%, var(--gold-dark) 100%);
  color:var(--white);
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(185,154,91,0.5);
}
@keyframes btnGoldGlow{
  0%,100%{box-shadow:0 4px 16px rgba(185,154,91,0.38);}
  50%{box-shadow:0 7px 24px rgba(185,154,91,0.6);}
}
@keyframes btnGoldShine{
  0%{left:-65%;}
  38%{left:130%;}
  100%{left:130%;}
}
.btn-dark{background:var(--black); color:var(--white);}
.btn-dark:hover{background:var(--charcoal);}
.btn-outline{background:transparent; border-color:var(--black); color:var(--black);}
.btn-outline:hover{background:var(--black); color:var(--white);}
.btn-outline-light{background:transparent; border-color:rgba(255,255,255,0.4); color:var(--white);}
.btn-outline-light:hover{background:var(--white); color:var(--black); border-color:var(--white);}
.btn-block{width:100%;}
.btn-sm{padding:10px 18px; font-size:12.5px;}
.btn:disabled{opacity:0.5; cursor:not-allowed;}
.btn .spinner{display:none; width:14px; height:14px; border-radius:50%; border:2px solid currentColor; border-top-color:transparent; animation:spin 0.7s linear infinite;}
.btn.is-loading .spinner{display:inline-block;}
.btn.is-loading .btn-label{opacity:0.7;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- 4. HEADER ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--off-white);
  border-bottom:1px solid transparent;
  transition:background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.site-header.is-scrolled{
  background:rgba(250,250,248,0.92);
  backdrop-filter:blur(10px);
  border-color:var(--line-soft);
  box-shadow:0 2px 20px rgba(13,13,13,0.05);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:16px 0;
}
.logo{display:flex; flex-direction:column; line-height:1;}
.logo .logo-mark{font-family:"Oswald", sans-serif; font-size:24px; letter-spacing:0.04em;}
.logo .logo-sub{font-family:"JetBrains Mono", monospace; font-size:8.5px; letter-spacing:0.14em; color:var(--gray-500); text-transform:uppercase; margin-top:2px;}
.nav-desktop{display:none;}
@media (min-width:960px){
  .nav-desktop{display:flex; align-items:center; gap:36px;}
  .nav-desktop a{font-size:14px; font-weight:500; color:var(--gray-700);}
  .nav-desktop a:hover{color:var(--black);}
}
.header-actions{display:flex; align-items:center; gap:12px;}
.header-hotline{
  display:none; align-items:center; gap:8px;
  font-family:"JetBrains Mono", monospace; font-size:13.5px; font-weight:600;
}
@media (min-width:960px){ .header-hotline{display:flex;} }
.header-hotline svg{width:16px; height:16px; stroke:var(--gold-dark); fill:none; stroke-width:1.8;}
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line-soft); background:var(--white);
  flex:none;
}
.icon-btn svg{width:18px; height:18px; stroke:var(--black); fill:none; stroke-width:1.8;}
@media (min-width:960px){ .icon-btn.mobile-only{display:none;} }
.menu-toggle{display:inline-flex;}
@media (min-width:960px){ .menu-toggle{display:none;} }

/* mobile drawer */
.mobile-nav{
  position:fixed; inset:0; z-index:110;
  background:var(--black); color:var(--white);
  transform:translateX(100%);
  transition:transform 0.3s ease;
  display:flex; flex-direction:column;
  padding:20px;
}
.mobile-nav.is-open{transform:translateX(0);}
.mobile-nav-top{display:flex; justify-content:flex-end; margin-bottom:40px;}
.mobile-nav-top .icon-btn{background:transparent; border-color:rgba(255,255,255,0.25);}
.mobile-nav-top .icon-btn svg{stroke:var(--white);}
.mobile-nav ul{display:flex; flex-direction:column; gap:26px;}
.mobile-nav a{font-family:"Oswald", sans-serif; font-size:30px; letter-spacing:0.02em;}
.mobile-nav-foot{margin-top:auto; padding-top:30px; border-top:1px solid rgba(255,255,255,0.15); display:flex; flex-direction:column; gap:14px;}

/* ---------- 5. HERO ---------- */
.hero{padding:36px 0 0; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1fr; gap:32px; align-items:center; padding-bottom:40px;}
@media (min-width:960px){ .hero-grid{grid-template-columns:1fr 1fr; gap:56px; padding-bottom:0;} }
.hero-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--black); color:var(--white);
  padding:8px 16px; border-radius:20px;
  font-family:"JetBrains Mono", monospace; font-size:11.5px; font-weight:500;
  letter-spacing:0.1em; text-transform:uppercase;
  margin-bottom:20px;
}
.hero-badge .dot{width:6px; height:6px; border-radius:50%; background:var(--gold);}
.hero h1{font-size:clamp(34px,6.4vw,60px); max-width:11ch;}
.hero .lede{margin:18px 0 0; font-size:16.5px; color:var(--gray-700); max-width:46ch;}
.hero-usps{display:flex; flex-wrap:wrap; gap:10px 22px; margin:26px 0 0;}
.hero-usps li{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500;}
.hero-usps li::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--gold);}
.hero-price-row{display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin:30px 0 0;}
.hero-combo-label{
  display:inline-block; font-size:11.5px;
  font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--gold-dark);
}
.hero-price{
  font-family:"Oswald", sans-serif; font-size:38px; letter-spacing:0.02em;
  color:var(--gold-dark);
  background:linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 55%, var(--gold-light) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-price-old{font-family:"JetBrains Mono", monospace; font-size:15px; color:var(--gray-500); text-decoration:line-through;}
.hero-price-off{
  background:var(--gold-light); color:var(--gold-dark);
  font-family:"JetBrains Mono", monospace; font-size:11.5px; font-weight:600;
  padding:4px 9px; border-radius:12px;
}
.hero-cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:28px;}
.hero-best-seller{
  position:absolute; top:18px; left:18px; z-index:2;
  background:var(--gold); color:var(--black);
  font-family:"JetBrains Mono", monospace; font-size:11px; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase;
  padding:7px 12px; border-radius:2px;
}
.hero-media{position:relative; border-radius:var(--radius-md); overflow:hidden; aspect-ratio:4/5; background:var(--gray-100);}
.hero-media img{width:100%; height:100%; object-fit:cover;}

.hero-colors{padding:0 0 40px;}
.hero-colors-label{display:block; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gray-500); margin-bottom:10px;}
.hero-colors-row{display:flex; gap:12px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px;}
.hero-colors-row::-webkit-scrollbar{display:none;}
.hero-color-item{flex:none; display:flex; flex-direction:column; align-items:center; gap:6px; width:60px; text-decoration:none;}
.hero-color-item img{width:60px; height:60px; object-fit:cover; border-radius:50%; border:1px solid var(--line-soft);}
.hero-color-item span{font-size:11px; font-weight:600; color:var(--charcoal); text-align:center;}

@media (max-width:959px){
  .hero{padding:20px 0 0;}
  .hero-grid{gap:20px; padding-bottom:22px;}
  .hero-badge{margin-bottom:14px; padding:6px 13px; font-size:10.5px;}
  .hero h1{font-size:clamp(28px,8vw,38px); max-width:none;}
  .hero .lede{margin-top:10px; font-size:14.5px;}
  .hero-usps{margin-top:16px; gap:8px 16px;}
  .hero-usps li{font-size:12.5px;}
  .hero-price-row{margin-top:16px;}
  .hero-price{font-size:32px;}
  .hero-cta-row{margin-top:16px; gap:10px;}
  .hero-media{aspect-ratio:4/3;}
  .hero-colors{padding-bottom:28px;}
}

/* ---------- 6. USP STRIP ---------- */
.usp-strip{background:var(--black); color:var(--white); padding:0;}
.usp-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,0.1);}
@media (min-width:720px){ .usp-grid{grid-template-columns:repeat(6,1fr);} }
.usp-item{
  background:var(--black); padding:14px 8px;
  display:flex; flex-direction:row; align-items:center; gap:8px;
}
.usp-item .usp-icon{width:18px; height:18px; stroke:var(--gold); fill:none; stroke-width:1.6; flex:none;}
.usp-item span{font-size:10.5px; font-weight:600; letter-spacing:0.01em; line-height:1.25;}
@media (min-width:720px){
  .usp-item{flex-direction:column; align-items:flex-start; gap:12px; padding:28px 20px;}
  .usp-item .usp-icon{width:26px; height:26px;}
  .usp-item span{font-size:13px;}
}

/* ---------- 7. PROBLEM ---------- */
.problem-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft);}
.problem-card{background:var(--white); padding:18px 16px;}
.problem-card .icon-wrap{
  width:36px; height:36px; border-radius:50%;
  background:var(--black); display:flex; align-items:center; justify-content:center;
  margin-bottom:12px;
}
.problem-card .icon-wrap svg{width:16px; height:16px; stroke:var(--gold); fill:none; stroke-width:1.7;}
.problem-card .num{font-family:"JetBrains Mono", monospace; font-size:11px; color:var(--gold-dark); font-weight:600;}
.problem-card h3{font-family:"Inter",sans-serif; text-transform:none; letter-spacing:0; font-weight:700; font-size:14.5px; margin:6px 0 6px;}
.problem-card p{font-size:12.5px; color:var(--gray-700);}
@media (min-width:720px){
  .problem-card{padding:30px 28px;}
  .problem-card .icon-wrap{width:44px; height:44px; margin-bottom:18px;}
  .problem-card .icon-wrap svg{width:20px; height:20px;}
  .problem-card h3{font-size:17px; margin:12px 0 8px;}
  .problem-card p{font-size:14.5px;}
}

/* ---------- 8. PRODUCT / GALLERY ---------- */
.product-layout{display:grid; grid-template-columns:1fr; gap:36px;}
@media (min-width:960px){ .product-layout{grid-template-columns:1.05fr 0.95fr; gap:56px;} }
.product-gallery-main{position:relative; border-radius:var(--radius-md); overflow:hidden; aspect-ratio:4/5; background:var(--gray-100); cursor:zoom-in;}
.product-gallery-main img{width:100%; height:100%; object-fit:cover; transition:opacity 0.2s ease;}
.product-thumbs{display:flex; gap:10px; margin-top:12px; overflow-x:auto; padding-bottom:4px;}
.product-thumbs button{
  flex:none; width:64px; height:80px; border-radius:var(--radius-sm);
  overflow:hidden; border:1.5px solid transparent; padding:0; background:none;
}
.product-thumbs button.is-active{border-color:var(--gold);}
.product-thumbs img{width:100%; height:100%; object-fit:cover;}

.product-info .product-name{font-size:clamp(24px,3.4vw,32px);}
.product-info .product-color-name{margin-top:8px; font-size:14px; color:var(--gray-700);}
.color-swatches{display:flex; gap:10px; margin-top:16px;}
.color-swatch{
  width:34px; height:34px; border-radius:50%;
  border:2px solid transparent; padding:2px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.color-swatch .dot{width:100%; height:100%; border-radius:50%; border:1px solid rgba(0,0,0,0.15);}
.color-swatch.is-active{border-color:var(--gold);}
.product-price-row{display:flex; align-items:baseline; gap:12px; margin:22px 0 4px;}
.product-price-note{font-size:14px; font-weight:600; color:var(--gold-dark);}
.product-price-note a{color:inherit; text-decoration:underline; text-underline-offset:2px;}
.product-price{font-family:"Oswald", sans-serif; font-size:32px;}
.product-form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:26px 0;}
/* Không dùng JetBrains Mono ở đây: font này bị lỗi hiển thị với các
   nguyên âm có dấu mũ + dấu thanh phía trên (ố, ề, ấ, ẩ...) — dấu thanh
   bị tách rời và đè lên chữ/khoảng trắng kế tiếp (VD: "Số điện thoại"
   hiện thành "SÔ´ĐIỆN THOẠI"). Dùng font mặc định (Inter) để tránh lỗi
   cho MỌI label hiện tại và sau này. */
.field label{display:block; font-size:11.5px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--gray-700); margin-bottom:8px;}
.field-hint{display:block; margin-top:6px; font-size:12.5px; color:var(--gold-dark); font-weight:600; min-height:16px;}
.field select, .field input{
  width:100%; height:46px; padding:0 14px;
  border:1px solid var(--line-soft); border-radius:var(--radius-sm);
  background:var(--white); font-size:14.5px; font-family:inherit;
}
.qty-stepper{display:flex; align-items:center; border:1px solid var(--line-soft); border-radius:var(--radius-sm); width:fit-content;}
.qty-stepper button{width:42px; height:44px; background:none; border:none; font-size:18px;}
.qty-stepper input{width:44px; height:44px; border:none; text-align:center; font-size:15px;}

/* Lưới chọn màu + số lượng riêng cho từng màu trong form đặt hàng — cho
   phép khách đặt nhiều màu khác nhau trong CÙNG một đơn (VD: 2 Xanh Navy,
   2 Đen Basic) thay vì chỉ chọn được 1 màu duy nhất cho cả đơn. */
.color-qty-grid{display:grid; grid-template-columns:1fr; gap:10px; margin-top:2px;}
@media (min-width:480px){ .color-qty-grid{grid-template-columns:1fr 1fr;} }
.color-qty-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 10px 10px 14px; min-width:0;
  border:1px solid var(--line-soft); border-radius:var(--radius-sm); background:var(--white);
}
.color-qty-dot{width:15px; height:15px; border-radius:50%; flex:0 0 auto; border:1px solid rgba(0,0,0,0.15);}
.color-qty-name{flex:1 1 auto; min-width:0; font-size:13.5px; font-weight:600; color:var(--charcoal); overflow-wrap:break-word;}
.field .qty-stepper-sm.qty-stepper-sm{width:fit-content; flex:0 0 auto;}
.field .qty-stepper-sm input{width:36px; height:34px; padding:0; font-size:14px;}
.qty-stepper-sm button{width:32px; height:34px; background:none; border:none; font-size:16px; line-height:1; cursor:pointer; color:var(--charcoal);}
.qty-stepper-sm input{-moz-appearance:textfield;}
.qty-stepper-sm input::-webkit-outer-spin-button,
.qty-stepper-sm input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.field.has-error .color-qty-item{border-color:var(--danger);}

/* ---------- 9. LIGHTBOX ---------- */
.lightbox{position:fixed; inset:0; z-index:200; background:rgba(13,13,13,0.94); display:none; align-items:center; justify-content:center; padding:24px;}
.lightbox.is-open{display:flex;}
.lightbox img{max-width:min(900px,92vw); max-height:86vh; object-fit:contain; border-radius:2px;}
.lightbox-close{position:absolute; top:20px; right:20px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.3); display:flex; align-items:center; justify-content:center;}
.lightbox-close svg{width:18px; height:18px; stroke:var(--white); fill:none; stroke-width:1.8;}

/* ---------- 10. MATERIAL ---------- */
.material-grid{display:grid; grid-template-columns:1fr; gap:20px;}
@media (min-width:720px){ .material-grid{grid-template-columns:repeat(2,1fr);} }
.material-card{border:1px solid var(--line-soft); border-radius:var(--radius-md); overflow:hidden; background:var(--white);}
.material-card .shot{aspect-ratio:4/3; background:var(--gray-100); overflow:hidden;}
.material-card .shot img{width:100%; height:100%; object-fit:cover;}
.material-card .body{padding:20px 22px;}
.material-card h3{font-family:"Inter",sans-serif; text-transform:none; letter-spacing:0; font-weight:700; font-size:15.5px; margin-bottom:6px;}
.material-card p{font-size:14px; color:var(--gray-700);}
.material-card .placeholder-tag{display:inline-block; margin-top:8px; font-family:"JetBrains Mono",monospace; font-size:10.5px; color:var(--danger); border:1px dashed var(--danger); padding:3px 8px; border-radius:10px;}

/* ---------- 11. SIZE TABLE + FINDER ---------- */
.size-table-wrap{overflow-x:auto; border:1px solid var(--line-soft); border-radius:var(--radius-md);}
table.size-table{width:100%; min-width:520px; border-collapse:collapse; background:var(--white);}
.size-table thead th{background:var(--black); color:var(--white); font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; padding:14px 20px; text-align:left;}
.size-table tbody td{padding:15px 20px; border-bottom:1px solid var(--line-soft); font-size:15px; font-variant-numeric:tabular-nums;}
.size-table tbody tr:last-child td{border-bottom:none;}
.size-table td.size-name{font-family:"Oswald",sans-serif; font-size:20px; color:var(--gold-dark); letter-spacing:0.02em;}

.size-finder{
  margin-top:40px; background:var(--black); color:var(--white);
  border-radius:var(--radius-md); padding:32px 26px;
}
@media (min-width:720px){ .size-finder{padding:40px 44px;} }
.size-finder h3{font-size:clamp(20px,2.6vw,26px); margin-bottom:8px;}
.size-finder p.sub{color:var(--gray-300); font-size:14.5px; margin-bottom:24px;}
.size-finder-form{display:grid; grid-template-columns:1fr; gap:16px;}
@media (min-width:600px){ .size-finder-form{grid-template-columns:1fr 1fr auto;} }
.size-finder-form .field label{color:var(--gray-300);}
.size-finder-form .field select, .size-finder-form .field input{background:var(--charcoal); border-color:rgba(255,255,255,0.15); color:var(--white);}
.size-finder-result{
  margin-top:20px; padding:18px 20px; border-radius:var(--radius-sm);
  background:rgba(185,154,91,0.12); border:1px solid rgba(185,154,91,0.35);
  display:none;
}
.size-finder-result.is-visible{display:block;}
.size-finder-result .result-size{font-family:"Oswald",sans-serif; font-size:24px; color:var(--gold-light);}
.size-finder-disclaimer{margin-top:14px; font-size:12.5px; color:var(--gray-500);}

/* ---------- 12. COMBO ---------- */
.combo-grid{display:grid; grid-template-columns:1fr; gap:18px; max-width:640px; margin:0 auto;}
@media (min-width:600px){ .combo-grid{grid-template-columns:repeat(2,1fr);} }
.combo-card{
  position:relative; border:1px solid var(--line-soft); border-radius:var(--radius-md);
  padding:28px 24px; background:var(--white); cursor:pointer;
  transition:border-color 0.15s ease, transform 0.15s ease;
}
.combo-card:hover{transform:translateY(-2px);}
.combo-card.is-selected{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold);}
.combo-card .combo-badge{
  position:absolute; top:-11px; left:24px;
  background:var(--gold); color:var(--black);
  font-family:"JetBrains Mono",monospace; font-size:10.5px; font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase;
  padding:4px 10px; border-radius:10px;
}
.combo-card .combo-label{font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gray-500);}
.combo-card .combo-qty{font-family:"Oswald",sans-serif; font-size:26px; margin:10px 0 6px;}
.combo-card .combo-price{font-size:20px; font-weight:700;}
.combo-card .combo-price.is-placeholder{font-size:14px; font-weight:500; color:var(--gray-500); font-style:italic;}
.combo-card .combo-unit{font-size:12.5px; color:var(--gray-500); margin-top:4px;}
.combo-card input[type="radio"]{position:absolute; opacity:0; pointer-events:none;}

/* ---------- 13. REVIEWS ---------- */
.review-track{display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; -webkit-overflow-scrolling:touch;}
.review-track::-webkit-scrollbar{height:4px;}
.review-card{
  flex:0 0 82%; scroll-snap-align:start;
  border:1px solid var(--line-soft); border-radius:var(--radius-md);
  padding:26px 24px; background:var(--white);
}
@media (min-width:720px){ .review-card{flex-basis:340px;} }
.review-card .stars{color:var(--gold); font-size:15px; letter-spacing:2px;}
.review-card p{margin:14px 0 18px; font-size:15px;}
.review-card .reviewer{display:flex; align-items:center; gap:10px;}
/* Chữ cái đầu tên thay cho ảnh đại diện — không dùng ảnh thật của khách
   (không xin phép dùng ảnh cá nhân), nhưng vẫn có điểm nhấn thị giác. */
.review-card .reviewer .avatar{
  flex:none; width:38px; height:38px; border-radius:50%;
  background:var(--black); color:var(--gold-light);
  font-family:"Oswald", sans-serif; font-weight:600; font-size:16px;
  display:flex; align-items:center; justify-content:center;
}
.review-card .reviewer .name{font-weight:700; font-size:13.5px;}
.review-card .reviewer .verified{font-size:10px; font-weight:600; letter-spacing:0.02em; color:var(--gold-dark); text-transform:uppercase;}
.review-card.is-placeholder{border-style:dashed; color:var(--gray-500); display:flex; align-items:center; justify-content:center; text-align:center; font-size:13.5px;}

/* ---------- 14. VIDEO ---------- */
.video-grid{display:grid; grid-template-columns:1fr; gap:20px; max-width:320px; margin:0 auto;}
.video-card{position:relative; aspect-ratio:9/16; border-radius:var(--radius-md); overflow:hidden; background:var(--gray-900);}
.video-card img{width:100%; height:100%; object-fit:cover; opacity:0.75;}
.video-card .play-btn{
  position:absolute; inset:0; margin:auto; width:56px; height:56px;
  border-radius:50%; background:rgba(255,255,255,0.92);
  display:flex; align-items:center; justify-content:center;
}
.video-card .play-btn svg{width:20px; height:20px; fill:var(--black); margin-left:2px;}
.video-card .label{position:absolute; left:14px; bottom:14px; color:var(--white); font-size:11px; letter-spacing:0.06em; text-transform:uppercase;}
/* Video sản phẩm thật (MP4 tự upload, khổ ngang 4:3, 1920x1440) — cần khung rộng hơn khung dọc 9:16 mặc định */
.video-grid--wide{max-width:480px;}
.video-card--landscape{aspect-ratio:4/3; background:var(--black);}
.video-card video{width:100%; height:100%; object-fit:cover; display:block;}

/* ---------- 15. SOCIAL PROOF ---------- */
.proof-strip{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:rgba(255,255,255,0.1);}
@media (min-width:720px){ .proof-strip{grid-template-columns:repeat(3,1fr);} }
.proof-item{background:var(--black); padding:30px 24px; text-align:center;}
.proof-item .num{font-family:"Oswald",sans-serif; font-size:clamp(28px,4vw,40px); color:var(--gold-light);}
.proof-item .lbl{margin-top:6px; font-size:12.5px; color:var(--gray-300); text-transform:uppercase; letter-spacing:0.05em;}

/* ---------- 16. CAM KẾT ---------- */
.commit-grid{display:grid; grid-template-columns:1fr; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--radius-md); overflow:hidden;}
@media (min-width:720px){ .commit-grid{grid-template-columns:repeat(2,1fr);} }
.commit-card{background:var(--white); padding:26px 24px; display:flex; gap:16px; align-items:flex-start;}
.commit-card .icon-wrap{flex:none; width:36px; height:36px; border-radius:50%; background:var(--gray-100); display:flex; align-items:center; justify-content:center;}
.commit-card .icon-wrap svg{width:17px; height:17px; stroke:var(--gold-dark); fill:none; stroke-width:1.7;}
.commit-card h3{font-family:"Inter",sans-serif; text-transform:none; letter-spacing:0; font-weight:700; font-size:15.5px; margin-bottom:5px;}
.commit-card p{font-size:14px; color:var(--gray-700);}

/* ---------- 16b. BẢO CHỨNG MUA HÀNG (trust badges — nền tối, khác cách
   trình bày với khối Cam kết ở trên để không lặp lại y hệt) ---------- */
.trust-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:32px 20px; margin-top:12px;}
@media (min-width:720px){ .trust-grid{grid-template-columns:repeat(4,1fr); gap:24px;} }
.trust-item{text-align:center; display:flex; flex-direction:column; align-items:center;}
.trust-icon{
  width:56px; height:56px; border-radius:50%; flex:none;
  background:rgba(185,154,91,0.12); border:1px solid rgba(185,154,91,0.35);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.trust-icon svg{width:23px; height:23px; stroke:var(--gold); fill:none; stroke-width:1.6;}
.trust-item h3{font-family:"Inter",sans-serif; text-transform:none; letter-spacing:0; font-weight:700; font-size:14.5px; color:var(--white); margin-bottom:8px;}
.trust-item p{font-size:13px; color:var(--gray-300); line-height:1.6; max-width:24ch;}
.trust-link{text-align:center; margin-top:40px;}
.trust-link a{font-size:13.5px; font-weight:600; color:var(--gold-light); text-decoration:underline; text-underline-offset:3px;}
.trust-link a:hover{color:var(--white);}

/* ---------- 17. FAQ ---------- */
.faq-list{border-top:1px solid var(--line-soft);}
.faq-item{border-bottom:1px solid var(--line-soft);}
.faq-item summary{
  cursor:pointer; list-style:none; padding:20px 4px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-weight:600; font-size:15.5px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-family:"Oswald",sans-serif; font-size:22px; color:var(--gold-dark); flex:none;}
.faq-item[open] summary::after{content:"–";}
.faq-item .faq-answer{margin:0 4px 20px; color:var(--gray-700); font-size:14.5px; max-width:64ch;}

/* ---------- 18. ORDER FORM ---------- */
.order-card{background:var(--white); border:1px solid var(--line-soft); border-radius:var(--radius-md); padding:30px 26px;}
@media (min-width:720px){ .order-card{padding:44px;} }
.order-grid{display:grid; grid-template-columns:1fr; gap:16px;}
@media (min-width:640px){ .order-grid{grid-template-columns:1fr 1fr;} }
.order-grid .field.full{grid-column:1/-1;}
.field .error-msg{display:none; margin-top:6px; font-size:12.5px; color:var(--danger);}
.field.has-error select, .field.has-error input, .field.has-error textarea{border-color:var(--danger);}
.field.has-error .error-msg{display:block;}
.field textarea{width:100%; min-height:90px; padding:12px 14px; border:1px solid var(--line-soft); border-radius:var(--radius-sm); font-family:inherit; font-size:14.5px; resize:vertical;}
.honeypot-field{position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden;}
.order-summary{
  margin:26px 0; padding:18px 20px;
  background:var(--off-white); border:1px solid var(--line-soft); border-radius:var(--radius-md);
}
.order-summary dl{display:grid; grid-template-columns:auto 1fr; gap:9px 14px; margin:0; font-size:14px;}
.order-summary dt{color:var(--gray-500);}
.order-summary dd{margin:0; font-weight:600; text-align:right; font-variant-numeric:tabular-nums;}
.order-summary dt.total-row, .order-summary dd.total-row{
  border-top:1px solid var(--line-soft); padding-top:10px; margin-top:2px;
  color:var(--black); font-weight:700; font-size:16px;
}
.order-summary dd.total-row{font-family:"Oswald",sans-serif; font-size:22px; letter-spacing:0.02em;}
.order-summary dd.total-row.is-estimate{font-family:"Inter",sans-serif; font-size:13.5px; font-weight:600; color:var(--gray-500); font-style:italic;}
.order-summary-note{margin:12px 0 0; font-size:12.5px; color:var(--gray-500);}
.order-policy-check{display:flex; align-items:flex-start; gap:10px; margin:22px 0; font-size:13px; color:var(--gray-700);}
.order-policy-check input{margin-top:3px;}
.order-policy-check span{
  font-family:"Inter", sans-serif; text-transform:none; letter-spacing:0;
  font-weight:400; font-size:13.5px; line-height:1.5;
}
.order-fine{margin-top:16px; font-size:12.5px; color:var(--gray-500);}
.form-status{display:none; margin-top:16px; padding:12px 16px; border-radius:var(--radius-sm); font-size:13.5px;}
.form-status.is-visible{display:block;}
.form-status.is-error{background:#FBEAE8; color:var(--danger);}
.form-status.is-success{background:#EAF3EC; color:#2F6A44;}

/* ---------- 19. THANK YOU STATE ---------- */
.thankyou{display:none; text-align:center; padding:60px 24px;}
.thankyou.is-visible{display:block;}
.thankyou .check-circle{width:64px; height:64px; border-radius:50%; background:var(--black); display:flex; align-items:center; justify-content:center; margin:0 auto 22px;}
.thankyou .check-circle svg{width:28px; height:28px; stroke:var(--gold); fill:none; stroke-width:2;}
.thankyou h2{font-size:clamp(24px,4vw,32px);}
.thankyou p{margin-top:12px; color:var(--gray-700); max-width:44ch; margin-left:auto; margin-right:auto;}
.thankyou-summary{margin:26px auto 0; max-width:380px; text-align:left; border:1px solid var(--line-soft); border-radius:var(--radius-md); padding:20px 22px;}
.thankyou-summary dl{display:grid; grid-template-columns:auto 1fr; gap:8px 14px; margin:0; font-size:14px;}
.thankyou-summary dt{color:var(--gray-500);}
.thankyou-summary dd{margin:0; font-weight:600; text-align:right;}

/* ---------- 20. STICKY MOBILE CTA ---------- */
.sticky-cta{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:90;
  background:var(--black); padding:10px 14px;
  box-shadow:0 -4px 20px rgba(0,0,0,0.25);
}
.sticky-cta.is-visible{display:flex; align-items:center; gap:10px;}
.sticky-cta .btn{flex:1;}
.sticky-cta .call-btn{flex:none; width:48px; height:48px; border-radius:50%; background:var(--charcoal); display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.15);}
.sticky-cta .call-btn svg{width:19px; height:19px; stroke:var(--gold); fill:none; stroke-width:1.8;}
.sticky-cta .close-btn{flex:none; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:center; border:none;}
.sticky-cta .close-btn svg{width:11px; height:11px; stroke:var(--gray-300); fill:none; stroke-width:2;}
@media (max-width:719px){ body.has-sticky-cta{padding-bottom:74px;} }

/* ---------- 21. FLOATING BUTTONS ---------- */
.floating-actions{position:fixed; right:18px; bottom:90px; z-index:80; display:flex; flex-direction:column; gap:12px;}
@media (min-width:720px){ .floating-actions{bottom:28px;} }
.fab{position:relative; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-elev); transition:transform 0.15s ease;}
.fab:hover{transform:translateY(-2px) scale(1.04);}
/* Vòng sóng lan tỏa nhẹ phía sau nút nổi — báo hiệu "có thể bấm vào đây",
   không dùng cho .fab-call vì icon gọi điện đã đủ rõ mục đích. */
.fab::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1.5px solid currentColor; opacity:0; pointer-events:none;
}
.fab.fab-messenger::before{color:#0084FF; animation:fabPulse 2.6s ease-out infinite;}
@keyframes fabPulse{
  0%{transform:scale(1); opacity:0.55;}
  100%{transform:scale(1.55); opacity:0;}
}
.fab.fab-call{background:var(--black);}
.fab.fab-call svg{width:22px; height:22px; stroke:var(--gold); fill:none; stroke-width:1.8;}
.fab.fab-messenger{background:#0084FF;}
.fab.fab-messenger svg{width:24px; height:24px; fill:var(--white); stroke:none;}

/* ---------- 22. COUNTDOWN ---------- */
.countdown-bar{background:var(--gold-dark); color:var(--white); padding:12px 0; text-align:center;}
.countdown-bar .container{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;}
.countdown-bar .label{font-size:13px; font-weight:600; letter-spacing:0.02em;}
.countdown-timer{display:flex; gap:8px; font-family:"JetBrains Mono",monospace; font-weight:700; font-size:15px;}
.countdown-timer span.unit{font-size:9px; font-weight:500; display:block; letter-spacing:0.04em; opacity:0.8;}
.countdown-timer .seg{text-align:center;}
.countdown-bar.is-ended .countdown-timer{display:none;}
.countdown-bar.is-hidden{display:none;}

/* ---------- 23. POPUP ---------- */
.popup-overlay{position:fixed; inset:0; z-index:150; background:rgba(13,13,13,0.6); display:none; align-items:flex-end; justify-content:center; padding:0;}
.popup-overlay.is-open{display:flex;}
@media (min-width:640px){ .popup-overlay{align-items:center;} }
.popup-box{
  background:var(--white); width:100%; max-width:420px;
  border-radius:var(--radius-md) var(--radius-md) 0 0;
  padding:30px 26px; position:relative;
}
@media (min-width:640px){ .popup-box{border-radius:var(--radius-md);} }
.popup-close{position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%; background:var(--gray-100); border:none; display:flex; align-items:center; justify-content:center;}
.popup-close svg{width:13px; height:13px; stroke:var(--black); fill:none; stroke-width:2;}
.popup-box h3{font-size:22px; margin-bottom:8px;}
.popup-box p{font-size:14px; color:var(--gray-700); margin-bottom:20px;}
.popup-box .field{margin-bottom:14px;}

/* ---------- 24. FOOTER ---------- */
footer{background:var(--black); color:var(--gray-300); padding:56px 0 28px;}
.footer-grid{display:grid; grid-template-columns:1fr; gap:32px;}
@media (min-width:720px){ .footer-grid{grid-template-columns:1.3fr 1fr 1fr;} }
.footer-grid h4{font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gray-500); margin:0 0 14px;}
.footer-grid p, .footer-grid a{font-size:14px; line-height:1.8;}
.footer-grid a:hover{color:var(--white);}
.footer-brand{font-family:"Oswald",sans-serif; font-size:22px; color:var(--white); letter-spacing:0.03em;}
.footer-bottom{margin-top:40px; padding-top:22px; border-top:1px solid rgba(255,255,255,0.1); display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--gray-500);}

/* ---------- 25. UTILITIES ---------- */
.skip-link{position:absolute; left:-9999px; top:0; background:var(--gold); color:var(--black); padding:12px 18px; z-index:300;}
.skip-link:focus{left:12px; top:12px;}

/* ---------- 26. TRANG CHÍNH SÁCH (chinh-sach.html) ---------- */
.policy-hero{padding-bottom:32px;}
.back-link{
  display:inline-flex; align-items:center; gap:6px; margin-bottom:22px;
  font-size:13.5px; font-weight:600; color:var(--gray-700);
}
.back-link:hover{color:var(--black);}
.policy-toc{display:grid; grid-template-columns:1fr; gap:10px; max-width:640px; margin-top:8px;}
@media (min-width:600px){ .policy-toc{grid-template-columns:1fr 1fr;} }
.policy-toc a{
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  border:1px solid var(--line-soft); border-radius:var(--radius-sm);
  font-size:14px; font-weight:600; background:var(--white);
  transition:border-color 0.18s ease, background 0.18s ease;
}
.policy-toc a:hover{border-color:var(--gold); background:var(--off-white);}
.policy-toc a span{
  font-family:"JetBrains Mono", monospace; font-size:11.5px; font-weight:600;
  color:var(--gold-dark); flex:none;
}
.policy-section{padding:56px 0;}
@media (min-width:768px){ .policy-section{padding:72px 0;} }
.policy-section.is-alt{background:var(--gray-100);}
.policy-body{max-width:720px;}
.policy-body h2{font-size:clamp(24px,3.4vw,32px); margin-bottom:18px;}
.policy-body h3{font-size:15px; text-transform:none; font-family:"Inter",sans-serif; font-weight:700; letter-spacing:0; color:var(--black); margin:28px 0 10px;}
.policy-body h3:first-of-type{margin-top:26px;}
.policy-body p{color:var(--gray-700); font-size:14.5px; line-height:1.75; max-width:66ch; margin-bottom:4px;}
.policy-body p.policy-lede{font-size:15.5px; max-width:64ch;}
.policy-body ul, .policy-body ol{margin:0 0 4px; padding-left:20px; max-width:66ch;}
.policy-body ul{list-style:disc;}
.policy-body ol{list-style:decimal;}
.policy-body li{color:var(--gray-700); font-size:14.5px; line-height:1.75; margin-bottom:6px;}
.policy-body li::marker{color:var(--gold-dark);}
.policy-body strong{color:var(--black); font-weight:700;}
.policy-meta{margin-top:26px; padding-top:16px; border-top:1px solid var(--line-soft); font-size:12.5px; color:var(--gray-500);}