/* ==========================================================================
   Landing — Gối GoCoSo (bổ sung cho landing-demsinh.css: hệ .ds-* dùng chung)
   Chỉ chứa phần riêng của GoCoSo: size-picker M/L trên hero navy.
   ========================================================================== */
/* Chọn loại = dropdown (hero navy) */
.gc-typesel{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.gc-typesel select{appearance:none;-webkit-appearance:none;font-family:inherit;font-weight:800;font-size:1.02rem;color:#fff;cursor:pointer;
  min-width:210px;padding:12px 42px 12px 18px;border:2px solid rgba(255,255,255,.3);border-radius:12px;
  background:rgba(255,255,255,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='m3 5 3 3 3-3'/%3E%3C/svg%3E") no-repeat right 15px center}
.gc-typesel select:focus{outline:none;border-color:var(--dn-gold2);box-shadow:0 0 0 3px rgba(230,184,69,.25)}
.gc-typesel select option{color:#12233a;background:#fff;font-weight:600}
.ds-sizepick{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.ds-sizepick__lab{font-size:.95rem;color:rgba(255,255,255,.8);font-weight:700}
.ds-sizebtn{background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.3);color:#fff;
  display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.15;
  padding:9px 18px;border-radius:12px;cursor:pointer;
  transition:transform .15s,border-color .15s,background .15s}
.ds-sizebtn b{font-size:1rem;font-weight:800}
.ds-sizebtn small{font-size:.72rem;font-weight:600;color:rgba(255,255,255,.66);font-variant-numeric:tabular-nums;white-space:nowrap}
.ds-sizebtn.is-active small{color:rgba(255,255,255,.88)}
.ds-sizebtn:hover{transform:translateY(-1px);border-color:rgba(230,184,69,.6)}
.ds-sizebtn.is-active{border-color:var(--dn-gold2);background:rgba(230,184,69,.16);box-shadow:0 0 0 3px rgba(230,184,69,.25)}
.ds-sizenote{font-size:.9rem;color:rgba(255,255,255,.7);margin-bottom:16px}

/* Giá: đơn vị "/ trọn bộ" (hero navy) */
.ds-price__unit{font-size:.95rem;color:rgba(255,255,255,.72);font-weight:600}

/* Form đặt hàng — hộp tạm tính giá theo loại × size (JS cập nhật) */
.gc-osum{grid-column:1/-1;display:flex;flex-direction:column;gap:9px;
  background:var(--dn-soft);border:1.6px solid var(--dn-line);border-radius:12px;padding:14px 16px}
.gc-osum__line{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.gc-osum__name{font-size:.92rem;font-weight:700;color:var(--dn-navy)}
.gc-osum__unit{display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap}
.gc-osum__unit b{font-size:1.05rem;font-weight:800;color:var(--dn-price)}
.gc-osum__unit s{font-size:.85rem;color:var(--dn-muted)}
.gc-osum__total{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  border-top:1px dashed var(--dn-line);padding-top:9px}
.gc-osum__total span{font-size:.9rem;color:var(--dn-muted);font-weight:600}
.gc-osum__total b{font-size:1.3rem;font-weight:800;color:var(--dn-price);font-variant-numeric:tabular-nums}

/* Review wall = carousel video 16:9 (khách hàng thật). Desktop 4/khung · ≤900 3 · ≤640 2/khung.
   1 hàng, cuộn ngang, tự chạy qua JS [data-reels] (landing-demsinh.js). */
.gc-vreel{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 42px)/4);gap:14px;margin-top:26px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding-bottom:2px}
.gc-vreel::-webkit-scrollbar{display:none}
.gc-vreel>.gc-rcard{scroll-snap-align:start;margin:0}
.gc-vreel .gc-rcard__media{aspect-ratio:16/9}
.gc-vreel .gc-rcard__media img{transition:transform .4s}
.gc-vreel .gc-rcard__foot{padding:13px 14px 15px;text-align:center}
.gc-vreel .gc-rcard__foot p{font-size:.9rem;line-height:1.45;margin:6px 0 8px}
.gc-vreel .gc-rcard__foot b{display:block;font-size:.85rem}
.gc-vreel .gc-rcard__media[data-yt]:hover img{transform:scale(1.05)}
.gc-vreel .gc-rcard__media[data-yt]:hover .gc-rcard__play{transform:scale(1.1);background:var(--dn-accent)}
@media (max-width:900px){.gc-vreel{grid-auto-columns:calc((100% - 28px)/3)}}
@media (max-width:640px){.gc-vreel{grid-auto-columns:calc((100% - 14px)/2)}}

/* Chi tiết từng gối — card ảnh thật */
.gc-pillows{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:980px;margin:34px auto 0}
.gc-pillow{background:var(--dn-surface);border:1px solid var(--dn-line);border-radius:18px;padding:16px 16px 20px;box-shadow:var(--dn-shadow-sm);display:flex;flex-direction:column}
.gc-pillow__img{background:var(--dn-soft);border-radius:12px;aspect-ratio:4/3;overflow:hidden;display:grid;place-items:center;margin-bottom:14px}
.gc-pillow__img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.gc-pillow__name{font-size:1.3rem;font-weight:900;color:var(--dn-navy);line-height:1.15}
.gc-pillow__tag{color:var(--dn-accent-dark);font-weight:700;font-size:.95rem;margin:3px 0 13px}
.gc-pillow__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.gc-pillow__list li{display:flex;align-items:flex-start;gap:9px;font-size:.98rem;color:var(--dn-ink);line-height:1.4}
.gc-pillow__list svg{width:19px;height:19px;color:var(--dn-trust);flex:none;margin-top:2px}
@media (max-width:820px){.gc-pillows{grid-template-columns:1fr;max-width:460px}}
/* Mobile: 1 dòng carousel tự lướt (2s), vuốt tay được */
@media (max-width:560px){
  .gc-pillows{display:grid;grid-auto-flow:column;grid-auto-columns:82%;grid-template-columns:none;
    max-width:none;gap:12px;margin-top:26px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 2px 8px}
  .gc-pillows::-webkit-scrollbar{display:none}
  .gc-pillow{scroll-snap-align:center;min-width:0}
}

/* ---- Bộ 3 gối: desktop 3 cột / mobile auto-play slideshow ----
   .gc-3col + @keyframes gc-slide đã chuyển sang landing-demsinh.css (dùng chung dem-sinh + gocoso). */

/* Video 16:9 / stat bar / review wall / mid CTA → chuyển sang landing-demsinh.css (dùng chung).
   Hero cân đối (ô đếm ngược full-width + nút CTA thu gọn) cũng đã chuyển sang landing-demsinh.css
   scope .demsinh-landing (body gocoso mang cả 2 class → áp dụng cho cả hai). */

/* ============================================================================
   GoCoSo — 4 KHỐI BỔ SUNG (demo: goi-gocoso-khoi-moi.html)
   Scope .gcs. Giữ nguyên hệ màu site navy–cam–gold; font kế thừa theme (inherit).
   Đỏ/xanh lá chỉ dùng làm tín hiệu đúng/sai ở khối So sánh.
   ============================================================================ */
.gcs{
  --navy:#1E3A6B;--navy-d:#12294F;--orange:#F2971E;--orange-d:#D97E10;
  --gold:#C99A3E;--gold-l:#E7C583;--ink:#132844;--muted:#5D6B87;--line:#DCE4F2;
  --tile:#EAF0FA;--card:#FFFFFF;--cream:#FFF6EA;--bg:#F5F8FF;
  --coral:#E86B5A;--coral-d:#C0432E;--green:#2FA36B;
  font-family:inherit;color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;display:block}
.gcs *{box-sizing:border-box;margin:0;padding:0}
.gcs .wrap{max-width:1140px;margin:0 auto;padding:0 22px}
.gcs .sec{padding:64px 0}
.gcs .head{text-align:center;margin-bottom:40px}
.gcs .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--navy);margin-bottom:14px}
.gcs .eyebrow::before,.gcs .eyebrow::after{content:"";width:24px;height:2px;background:var(--gold);border-radius:2px}
.gcs h2{font-size:clamp(28px,5vw,45px);font-weight:800;letter-spacing:-.02em;color:var(--navy-d);line-height:1.07}
.gcs h2 em{font-style:normal;color:var(--orange)}
.gcs .sub{margin-top:12px;color:var(--muted);font-size:17.5px;font-weight:500}

/* D1. NỖI ĐAU (nền navy brand — sao lấp lánh + zzZ) */
.gcs .night{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--navy),var(--navy-d))}
.gcs .night .stars{position:absolute;inset:0;opacity:.55;pointer-events:none}
.gcs .night .star{position:absolute;background:#fff;border-radius:50%;animation:gcs-tw 3s ease-in-out infinite}
@keyframes gcs-tw{0%,100%{opacity:.2}50%{opacity:.9}}
.gcs .zzz{position:absolute;top:44px;right:8%;font-weight:800;color:var(--gold-l)}
.gcs .zzz span{display:inline-block;animation:gcs-fl 3s ease-in-out infinite}
.gcs .zzz span:nth-child(1){font-size:22px}.gcs .zzz span:nth-child(2){font-size:30px;animation-delay:.4s}
.gcs .zzz span:nth-child(3){font-size:40px;animation-delay:.8s}
@keyframes gcs-fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.gcs .night .eyebrow{color:var(--gold-l)}.gcs .night .eyebrow::before,.gcs .night .eyebrow::after{background:var(--gold)}
.gcs .night h2{color:#fff}.gcs .night h2 em{color:var(--orange)}
.gcs .night .sub{color:#AFC0DA}
.gcs .ngrid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;z-index:2}
.gcs .ncard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:20px;
  padding:26px 20px;text-align:center;transition:transform .3s,background .3s}
.gcs .ncard:hover{transform:translateY(-6px);background:rgba(255,255,255,.11)}
.gcs .nico{width:60px;height:60px;margin:0 auto 15px;border-radius:16px;
  background:linear-gradient(140deg,var(--orange),var(--orange-d));display:flex;align-items:center;justify-content:center}
.gcs .nico svg{width:30px;height:30px;stroke:#fff}
.gcs .ncard h3{font-size:16.5px;font-weight:700;color:#fff;margin-bottom:5px}
.gcs .ncard p{font-size:13.5px;color:#AFC0DA}
.gcs .nbridge{position:relative;z-index:2;text-align:center;margin-top:34px;font-size:clamp(18px,2.6vw,23px);font-weight:700;color:#fff}
.gcs .nbridge em{font-style:normal;color:var(--orange)}

/* D2. CƠ CHẾ — đường cong cột sống (SVG) + 3 zone */
.gcs .mech{background:linear-gradient(180deg,#fff,var(--bg))}
.gcs .mrow{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}
.gcs .spine-photo{margin:0;border-radius:18px;overflow:hidden;box-shadow:0 18px 44px rgba(30,58,107,.10)}
.gcs .spine-photo img{width:100%;height:auto;display:block}
.gcs .zones{display:flex;flex-direction:column;gap:16px}
.gcs .zone{display:grid;grid-template-columns:60px 1fr;gap:16px;align-items:center;background:#fff;
  border:1.5px solid var(--line);border-radius:16px;padding:16px 18px;transition:border-color .3s,transform .3s}
.gcs .zone:hover{border-color:var(--orange);transform:translateX(4px)}
.gcs .zbadge{width:60px;height:60px;border-radius:14px;background:linear-gradient(140deg,var(--gold-l),var(--gold));
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;color:#fff}
.gcs .zone h4{font-size:17.5px;font-weight:700;color:var(--navy);margin-bottom:2px}
.gcs .zone p{font-size:14px;color:var(--muted)}
.gcs .mtags{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap}
.gcs .mtag{display:inline-flex;align-items:center;gap:7px;background:var(--cream);color:var(--orange-d);
  border:1px solid #F3D9A9;border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:700}

/* D3. SO SÁNH TƯ THẾ — gối thường (đỏ) vs GoCoSo (xanh) */
.gcs .cmp{background:var(--bg)}
.gcs .cgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.gcs .cmp-photo{margin:0;border-radius:18px;overflow:hidden;box-shadow:0 18px 44px rgba(30,58,107,.10)}
.gcs .cmp-photo img{width:100%;height:auto;display:block}

/* Hướng dẫn sử dụng bộ 3 gối — 4 step card (file goi-gocoso-huong-dan.html) */
.gcs .hdsec{background:linear-gradient(180deg,#fff,var(--bg))}
.gcs .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}
.gcs .steps::before{content:"";position:absolute;top:34px;left:12%;right:12%;height:2px;
  background:linear-gradient(90deg,var(--navy),var(--orange));opacity:.28;z-index:0}
.gcs .step{z-index:1;background:var(--card);border:2px solid var(--line);border-radius:22px;
  padding:34px 20px 26px;text-align:center;position:relative;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
.gcs .step:hover{transform:translateY(-6px);border-color:var(--orange);box-shadow:0 22px 44px rgba(242,151,30,.18)}
.gcs .num{position:absolute;top:-18px;left:50%;transform:translateX(-50%);width:46px;height:46px;border-radius:50%;
  background:linear-gradient(140deg,var(--gold-l),var(--gold));color:#fff;font-size:21px;font-weight:800;
  display:flex;align-items:center;justify-content:center;border:3px solid #fff;box-shadow:0 8px 18px rgba(201,154,62,.45)}
.gcs .art{width:104px;height:104px;margin:16px auto 16px;border-radius:24px;background:var(--tile);
  display:flex;align-items:center;justify-content:center;position:relative}
.gcs .art svg{width:60px;height:60px}
.gcs .pos{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.03em;padding:4px 12px;border-radius:999px;white-space:nowrap}
.gcs .step h3{font-size:19px;font-weight:800;color:var(--navy);margin:8px 0 7px}
.gcs .step p{font-size:14.5px;color:var(--muted);font-weight:500}
.gcs .note{margin-top:40px;display:flex;align-items:center;justify-content:center;gap:12px;
  background:linear-gradient(120deg,var(--navy-d),var(--navy));border-radius:18px;padding:19px 26px;
  font-size:16.5px;font-weight:600;color:#fff;text-align:center;flex-wrap:wrap}
.gcs .note svg{width:26px;height:26px;stroke:var(--gold-l);fill:none;flex-shrink:0}
.gcs .note b{color:var(--gold-l)}

/* Responsive chung cho 4 khối .gcs */
@media(max-width:900px){
  .gcs .ngrid{grid-template-columns:repeat(2,1fr)}
  .gcs .mrow{grid-template-columns:1fr;gap:30px}
  .gcs .spine-photo{max-width:420px;margin:0 auto}
  .gcs .cgrid{grid-template-columns:1fr}
  .gcs .steps{grid-template-columns:repeat(2,1fr);gap:28px 18px}
  .gcs .steps::before{display:none}
}
@media(max-width:560px){
  .gcs .sec{padding:48px 0}
  .gcs .ngrid{grid-template-columns:repeat(2,1fr);gap:12px}
  .gcs .ncard{padding:20px 12px;border-radius:16px}
  .gcs .nico{width:50px;height:50px;margin-bottom:11px;border-radius:13px}
  .gcs .nico svg{width:25px;height:25px}
  .gcs .ncard h3{font-size:14.5px}
  .gcs .ncard p{font-size:12px}
  .gcs .steps{grid-template-columns:1fr;gap:30px}
  .gcs .step{display:grid;grid-template-columns:104px 1fr;align-items:center;gap:8px 20px;text-align:left;padding:26px 20px}
  .gcs .num{left:36px;transform:none;top:-15px}
  .gcs .step .art{margin:2px 0;grid-row:1 / span 2}
  .gcs .pos{left:52px}
  .gcs .step h3{font-size:20px;align-self:end;margin:0}
  .gcs .step p{font-size:15px;align-self:start}
}