:root{
  --blue:#2F5FD8; --blue-dark:#1E45B0;
  --green:#16A34A; --green-bg:#EAF8EE;
  --pink-bg:#FBDCE0; --pink-text:#C2185B;
  --black:#111111; --paypal:#FFC439;
  --paper:#FFFFFF; --mist:#F4F6F8; --mist2:#EFE9DC;
  --line:#E5E7EB; --text:#1F2937; --text-soft:#6B7280;
  /* Bí danh để dùng chung checkout.css với theme khác */
  --ink:#111111; --shield:#2F5FD8; --amber:#2F5FD8; --amber-deep:#1E45B0; --cloud:#FFFFFF;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden; max-width:100%;}
body{background:var(--paper); color:var(--text); font-family:'Inter',sans-serif; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; max-width:100%;}
h1,h2,h3{font-family:'Inter',sans-serif; font-weight:900; color:#111; letter-spacing:-0.01em; overflow-wrap:break-word; word-break:break-word;}
p{overflow-wrap:break-word;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
button{font-family:inherit; cursor:pointer;}

/* HEADER */
header{border-bottom:1px solid var(--line); background:#fff;}
.nav{display:flex; align-items:center; justify-content:space-between; padding:18px 24px; max-width:1180px; margin:0 auto;}
.nav-left{display:flex; gap:22px; font-size:13.5px; color:var(--text-soft);}
.nav-left a:hover{color:var(--blue);}
.logo{font-size:22px; font-weight:900; letter-spacing:2px; color:#111;}
.nav-right{display:flex; align-items:center; gap:18px;}
.icon-btn{background:none; border:none; color:#111; position:relative;}
.cart-count{
  position:absolute; top:-7px; right:-8px; background:var(--blue); color:#fff;
  font-size:10px; font-weight:700; min-width:16px; height:16px; border-radius:100px;
  display:flex; align-items:center; justify-content:center; padding:0 3px;
}
@media(max-width:700px){ .nav-left{display:none;} }

/* HERO */
.hero{padding:36px 0 40px;}
.hero-grid{display:grid; grid-template-columns:minmax(0,740px) 1fr; gap:48px; align-items:start;}
.hero-grid > *{min-width:0;}
@media(max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:28px;} }

.hero-gallery{display:flex; flex-direction:column; gap:12px; max-width:740px; margin:0 auto; width:100%;}
@media(min-width:900px){ .hero-gallery{margin:0;} }
.hero-art{position:relative; border-radius:14px; overflow:hidden; background:var(--mist); aspect-ratio:1/1; max-width:740px;}
.hero-art img, .hero-art video{width:100%; height:100%; object-fit:cover; display:block;}
.gallery-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:36px; height:36px; border-radius:50%; border:none; background:rgba(255,255,255,0.9);
  color:#111; font-size:20px; line-height:1; display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,0.15); transition:background .15s ease;
}
.gallery-nav:hover{background:#fff;}
.gallery-nav.prev{left:12px;}
.gallery-nav.next{right:12px;}
.hero-thumbs{display:flex; gap:10px; overflow-x:auto; padding-bottom:4px;}
.thumb{
  position:relative; width:64px; height:64px; border-radius:8px; overflow:hidden; cursor:pointer;
  border:2px solid transparent; background:var(--mist); flex-shrink:0; transition:border-color .15s ease;
}
.thumb img, .thumb video{width:100%; height:100%; object-fit:cover;}
.thumb.active{border-color:var(--blue);}
.thumb:hover{border-color:#9CB4E8;}
.thumb-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.15);
}
.thumb-play svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,0.4));}

.hero-copy{min-width:0;}
.hero-copy h1{font-size:26px; line-height:1.25; margin-bottom:12px; overflow-wrap:break-word; word-break:break-word;}

.order-badge{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.order-avatars{display:flex;}
.order-avatars .av{
  width:30px; height:30px; border-radius:50%; border:2px solid #fff; margin-left:-8px;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff;
  position:relative;
}
.order-avatars .av:first-child{margin-left:0;}
.order-avatars .av .check{
  position:absolute; bottom:-2px; right:-2px; width:12px; height:12px; border-radius:50%;
  background:var(--green); border:1.5px solid #fff; display:flex; align-items:center; justify-content:center;
}
.order-badge-text{
  background:var(--pink-bg); color:var(--pink-text); font-size:11.5px; font-weight:700;
  padding:5px 12px; border-radius:100px; line-height:1.3;
}
.order-badge-text span{display:block; font-weight:500; font-size:10.5px;}

.price-row{display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap;}
.price-sale{font-size:24px; font-weight:800; color:var(--blue);}
.price-regular{font-size:16px; color:#9CA3AF; text-decoration:line-through;}
.save-badge{
  background:var(--blue); color:#fff; font-size:11.5px; font-weight:700;
  padding:4px 10px; border-radius:6px; display:inline-flex; align-items:center; gap:4px;
}

.tagline{font-size:15px; font-weight:700; color:var(--green); margin-bottom:4px;}
.tagline-sub{font-size:12.5px; color:var(--text-soft); margin-bottom:20px;}

.selector-block{margin-bottom:18px;}
.selector-label{font-size:13.5px; font-weight:700; color:#111; margin-bottom:10px;}
.color-options{display:flex; gap:10px; flex-wrap:wrap;}
.color-pill{
  padding:8px 16px; border-radius:100px; border:1.5px solid var(--line);
  font-size:13px; font-weight:600; color:#111; background:#fff; cursor:pointer;
  display:flex; align-items:center; gap:7px; transition:.15s ease;
}
.color-pill .dot{width:14px; height:14px; border-radius:50%; flex-shrink:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.15);}
.color-pill:hover{border-color:var(--blue);}
.color-pill.active{background:#111; border-color:#111; color:#fff;}

.size-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:8px;}
@media(max-width:420px){ .size-grid{grid-template-columns:repeat(3, 1fr);} }
.size-cell{
  padding:10px 4px; border-radius:8px; border:1.5px solid var(--line);
  font-size:12.5px; font-weight:600; color:#111; background:#fff; cursor:pointer;
  text-align:center; transition:.15s ease;
}
.size-cell:hover{border-color:var(--blue);}
.size-cell.active{background:#111; border-color:#111; color:#fff;}

.buy-more-banner{
  background:var(--green-bg); border:1.5px dashed var(--green); border-radius:10px;
  padding:12px 16px; text-align:center; margin-bottom:16px;
}
.buy-more-banner strong{display:block; color:var(--green); font-size:13.5px; font-weight:800;}
.buy-more-banner span{font-size:11.5px; color:#3A8256;}

.sizing-chart-link{
  display:inline-flex; align-items:center; gap:7px; background:none; border:none;
  font-size:13px; font-weight:600; color:#111; text-decoration:underline; padding:0; margin-bottom:16px;
}

.qty-row{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.qty-row .qbox{display:flex; align-items:center; border:1.5px solid var(--line); border-radius:8px; overflow:hidden;}
.qty-row .qbox button{width:36px; height:42px; border:none; background:#fff; font-size:17px; color:#111;}
.qty-row .qbox button:hover{background:var(--mist);}
.qty-row .qbox span{width:34px; text-align:center; font-weight:600;}

.btn-add-cart{
  width:100%; background:var(--blue); color:#fff; border:none; border-radius:8px;
  padding:15px; font-size:14.5px; font-weight:700; letter-spacing:0.3px; margin-bottom:10px; transition:.15s ease;
}
.btn-add-cart:hover{background:var(--blue-dark);}
.btn-checkout-outline{
  width:100%; background:#fff; color:#111; border:1.5px solid #111; border-radius:8px;
  padding:14px; font-size:14.5px; font-weight:700; letter-spacing:0.3px; margin-bottom:10px; transition:.15s ease;
}
.btn-checkout-outline:hover{background:#111; color:#fff;}
.btn-apple-pay{
  width:100%; background:#000; color:#fff; border:none; border-radius:8px;
  padding:14px; font-size:15px; font-weight:700; margin-bottom:10px; display:flex; align-items:center; justify-content:center; gap:6px;
}
.btn-paypal{
  width:100%; background:var(--paypal); color:#003087; border:none; border-radius:8px;
  padding:14px; font-size:15px; font-weight:800; font-style:italic; margin-bottom:18px;
}

.accordion{border-top:1px solid var(--line);}
.accordion:last-of-type{border-bottom:1px solid var(--line);}
.accordion-head{
  display:flex; align-items:center; gap:8px; padding:14px 0; cursor:pointer;
  font-size:13.5px; font-weight:700; color:var(--blue);
}
.accordion-body{
  max-height:0; overflow:hidden; transition:max-height .25s ease;
  font-size:13px; color:var(--text-soft);
}
.accordion.open .accordion-body{max-height:120px; padding-bottom:14px;}
.accordion-chevron{transition:transform .2s ease; margin-left:auto;}
.accordion.open .accordion-chevron{transform:rotate(180deg);}

.payment-icons-row{display:flex; gap:6px; flex-wrap:wrap; margin-top:18px;}
.payment-icons-row img, .payment-icons-row svg{height:22px;}

/* INTRO SECTION */
.intro-section{padding:56px 0; text-align:center;}
.intro-section h2{font-size:24px; color:var(--blue); max-width:640px; margin:0 auto 16px;}
.intro-section p{font-size:14.5px; color:var(--text-soft); max-width:640px; margin:0 auto 36px;}

.tiered-discount{
  max-width:760px; margin:0 auto; background:linear-gradient(180deg,#EAF1FE,#fff);
  border-radius:20px; padding:32px; display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center;
  border:1px solid var(--line);
}
@media(max-width:640px){ .tiered-discount{grid-template-columns:1fr;} }
.tiered-headline{text-align:left;}
.tiered-headline .big{font-size:38px; font-weight:900; color:#D92B2B; line-height:1;}
.tiered-headline .sub{font-size:15px; font-weight:800; color:#111; margin-top:4px;}
.tiered-tiers{display:flex; flex-direction:column; gap:10px;}
.tiered-tier{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--blue); color:#fff; border-radius:10px; padding:10px 16px;
}
.tiered-tier .label{font-size:13px; font-weight:600;}
.tiered-tier .off{font-size:16px; font-weight:900;}

/* FEATURES */
.feature{padding:64px 0;}
.feature-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
.feature-grid > *{min-width:0;}
.feature.reverse .feature-grid{direction:rtl;}
.feature.reverse .feature-grid > *{direction:ltr;}
@media(max-width:860px){ .feature-grid{grid-template-columns:1fr; gap:24px;} .feature.reverse .feature-grid{direction:ltr;} }
.feature-visual{border-radius:18px; overflow:hidden; background:var(--mist2);}
.feature-visual img, .feature-visual video{width:100%; display:block;}
.feature h2{font-size:22px; color:var(--blue); margin-bottom:12px;}
.feature p{color:var(--text-soft); font-size:14.5px; max-width:440px;}
.feature p strong{color:#111;}

/* SIZE CHART */
.size-chart-section{padding:56px 0; background:var(--mist);}
.size-chart-section h2{font-size:24px; text-align:center; color:var(--blue); margin-bottom:28px;}
.size-chart-table-wrap{overflow-x:auto; max-width:820px; margin:0 auto;}
table.size-chart-table{width:100%; border-collapse:collapse; background:#fff; border-radius:12px; overflow:hidden; min-width:560px;}
table.size-chart-table th{background:var(--blue); color:#fff; font-size:12px; padding:12px 10px; text-align:center;}
table.size-chart-table td{font-size:13px; padding:11px 10px; text-align:center; border-bottom:1px solid var(--line);}
table.size-chart-table tr:nth-child(even) td{background:#F8FAFF;}
.size-chart-notes{max-width:820px; margin:20px auto 0; display:flex; flex-direction:column; gap:10px;}
.size-chart-note{
  display:flex; gap:10px; align-items:flex-start; background:#fff; border:1px solid var(--line);
  border-radius:10px; padding:12px 16px; font-size:13px; color:var(--text-soft);
}
.size-chart-note .num{
  width:22px; height:22px; border-radius:50%; background:var(--blue); color:#fff; font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

/* REAL BODIES */
.real-bodies-section{padding:64px 0; text-align:center;}
.real-bodies-section h2{font-size:24px; color:var(--blue); margin-bottom:14px;}
.real-bodies-section p{max-width:640px; margin:0 auto 32px; color:var(--text-soft); font-size:14.5px;}
.real-bodies-img{max-width:760px; margin:0 auto; border-radius:18px; overflow:hidden;}

/* EASY CARE / MOVEMENTS */
.easy-care-section{padding:64px 0;}
.easy-care-section h2{font-size:22px; color:var(--blue); margin-bottom:12px; text-align:center;}
.easy-care-section > .wrap > p{max-width:600px; margin:0 auto 32px; text-align:center; color:var(--text-soft); font-size:14.5px;}
.movements-single{max-width:820px; margin:0 auto; border-radius:16px; overflow:hidden;}
.movements-single img{width:100%; display:block;}

/* PRODUCT DETAILS */
.product-details-section{padding:56px 0; background:var(--mist);}
.product-details-section .wrap{max-width:600px;}
.product-details-section h2{font-size:22px; color:var(--blue); margin-bottom:20px;}
.details-list{display:flex; flex-direction:column; gap:10px;}
.details-list .row{display:flex; gap:8px; font-size:14px;}
.details-list .row .k{font-weight:700; color:#111; min-width:110px;}
.details-list .row .v{color:var(--text-soft);}

/* WHY US */
.why-us-section{padding:64px 0;}
.why-us-section h2{font-size:24px; color:var(--blue); text-align:center; margin-bottom:32px;}
.why-us-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:820px; margin:0 auto;}
@media(max-width:640px){ .why-us-grid{grid-template-columns:1fr;} }
.why-us-card{display:flex; gap:14px;}
.why-us-icon{font-size:26px; flex-shrink:0;}
.why-us-card h3{font-size:15px; color:var(--blue); margin-bottom:6px;}
.why-us-card p{font-size:13.5px; color:var(--text-soft);}

/* FINAL CTA */
.final-cta-section{padding:64px 0; text-align:center; background:var(--mist);}
.final-cta-section h2{font-size:28px; color:#D92B2B; margin-bottom:24px;}
.btn-final-cta{
  display:inline-block; background:var(--blue); color:#fff; border:none; border-radius:100px;
  padding:16px 40px; font-size:15px; font-weight:700;
}
.btn-final-cta:hover{background:var(--blue-dark);}

/* FOOTER */
footer{padding:40px 0; border-top:1px solid var(--line);}
.footer-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; font-size:13px; color:var(--text-soft);}

/* ============ DRAWER (giỏ hàng) ============ */
.drawer-overlay{
  position:fixed; inset:0; background:rgba(17,17,17,0.45); z-index:200;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.drawer-overlay.open{opacity:1; pointer-events:auto;}
.drawer{
  position:fixed; top:0; right:0; height:100%; width:400px; max-width:92vw;
  background:#fff; z-index:201; box-shadow:-12px 0 40px rgba(0,0,0,0.15);
  transform:translateX(100%); transition:transform .25s ease;
  display:flex; flex-direction:column;
}
.drawer.open{transform:translateX(0);}
.drawer-head{padding:20px 22px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between;}
.drawer-head h3{font-size:16px;}
.drawer-close{background:none; border:none; font-size:20px; color:var(--text-soft); line-height:1;}
.drawer-body{padding:20px 22px; overflow-y:auto; flex:1;}
.drawer-foot{padding:16px 22px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:12px;}

.cart-empty{display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--text-soft); font-size:13.5px; padding:50px 0;}
.cart-items{display:flex; flex-direction:column; gap:14px;}
.cart-item{display:flex; gap:12px; border:1px solid var(--line); border-radius:10px; padding:10px;}
.cart-item-thumb{width:56px; height:56px; border-radius:8px; overflow:hidden; flex-shrink:0; background:var(--mist);}
.cart-item-thumb img{width:100%; height:100%; object-fit:cover;}
.cart-item-info{flex:1;}
.cart-item-title{font-weight:700; font-size:13.5px; display:flex; justify-content:space-between; gap:8px;}
.cart-item-remove{background:none; border:none; color:#9CA3AF; font-size:15px;}
.cart-item-remove:hover{color:#D92B2B;}
.cart-item-sub{font-size:11.5px; color:var(--text-soft); margin-top:3px;}
.cart-item-price{font-weight:700; font-size:13px; margin-top:5px;}
.cart-total-row{display:flex; justify-content:space-between; font-size:14px; font-weight:700;}
.cart-total-amount{font-size:19px; color:var(--blue);}

.toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px);
  background:#111; color:#fff; padding:12px 22px; border-radius:100px; font-size:13.5px;
  z-index:300; opacity:0; pointer-events:none; transition:.25s ease;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

section{scroll-margin-top:24px;}

/* ============ MOBILE STICKY ADD-TO-CART BAR ============ */
.mobile-sticky-bar{display:none;}
@media(max-width:900px){
  .mobile-sticky-bar{
    display:flex; align-items:center; gap:12px;
    position:fixed; bottom:0; left:0; right:0; z-index:150;
    background:#fff; border-top:1px solid var(--line);
    padding:10px 16px; padding-bottom:calc(10px + env(safe-area-inset-bottom));
    box-shadow:0 -4px 16px rgba(0,0,0,0.08);
  }
  .mobile-sticky-bar .msb-price{display:flex; flex-direction:column; flex-shrink:0; min-width:70px;}
  .mobile-sticky-bar .now{font-weight:800; font-size:16px; color:var(--blue);}
  .mobile-sticky-bar .old{font-size:11px; color:#9CA3AF; text-decoration:line-through;}
  .mobile-sticky-bar button{
    flex:1; background:var(--blue); color:#fff; border:none; border-radius:8px;
    padding:13px; font-size:14px; font-weight:700; letter-spacing:0.3px;
  }
  body{padding-bottom:66px;}
}

/* ============ MOBILE: KHUNG ẢNH VỪA MÀN HÌNH (KHÔNG TRÀN VIỀN) + VUỐT CHUYỂN ẢNH ============ */
@media(max-width:800px){
  .hero-gallery{max-width:none; width:100%; margin:0;}
  .hero-art{max-width:none; border-radius:14px; aspect-ratio:3/4;}
  .hero-thumbs{padding:0;}
  .gallery-nav{width:40px; height:40px; font-size:22px;}
}
@media(max-width:540px){
  .hero-gallery{margin:0;}
  .hero-thumbs{padding:0;}
}

/* ============ MOBILE: TOUCH TARGET LỚN HƠN, DỄ BẤM ============ */
@media(max-width:640px){
  .color-pill{padding:11px 18px; font-size:13.5px;}
  .size-cell{padding:13px 4px; font-size:13px;}
  .qty-row .qbox button{width:42px; height:46px; font-size:19px;}
  .btn-add-cart, .btn-checkout-outline, .btn-apple-pay, .btn-paypal{padding:16px;}
  .sizing-chart-link{padding:6px 0; font-size:13.5px;}
  .accordion-head{padding:16px 0;}
  .thumb{width:56px; height:56px;}
}

/* ============ MOBILE: HEADER GỌN HƠN ============ */
@media(max-width:640px){
  .nav{padding:14px 18px;}
  .logo{font-size:19px;}
  .nav-right{gap:14px;}
}
@media(max-width:640px){
  .hero{padding:24px 0 24px;}
  .hero-copy h1{font-size:21px;}
  .price-sale{font-size:21px;}

  .intro-section{padding:36px 0;}
  .intro-section h2{font-size:19px;}
  .tiered-discount{padding:20px; border-radius:16px;}
  .tiered-headline .big{font-size:28px;}

  .feature{padding:36px 0;}
  .feature h2{font-size:19px;}

  .size-chart-section{padding:36px 0;}
  .size-chart-section h2{font-size:19px; margin-bottom:18px;}

  .real-bodies-section{padding:40px 0;}
  .real-bodies-section h2{font-size:19px;}

  .easy-care-section{padding:40px 0;}
  .easy-care-section h2{font-size:18px;}

  .product-details-section{padding:36px 0;}
  .product-details-section h2{font-size:18px;}

  .why-us-section{padding:40px 0;}
  .why-us-section h2{font-size:19px; margin-bottom:22px;}

  .final-cta-section{padding:40px 0;}
  .final-cta-section h2{font-size:21px;}

  .wrap{padding:0 18px;}
}