/* ══════════════════════════════════════════════════════════════════════
   SBH PERSONAL TAILORING™ — trang /may-do-ca-nhan/
   Design language: PERSONAL QUIET LUXURY.
   Cùng bộ mã màu & chất liệu với SBH SHIRT STUDIO (không tạo hệ riêng):
     --muc #1B2A4A (mực navy)   --chi #2E3192 (xanh thương hiệu — màu logo thật)
     --vai #F6F4F0 (nền vải mộc) --duong-may #C7B79A (chỉ lược / phấn thợ may)
     --than #5F5B54              --dat #7C5E33 (nhấn ấm — gợi ý Kathy)
   Chữ: Georgia (serif) cho tiêu đề, hệ thống cho nội dung — KHÔNG tải font ngoài.
   Mobile-first. Mọi hiệu ứng nằm trong @media (prefers-reduced-motion).
   ══════════════════════════════════════════════════════════════════════ */

#sbh-pt{
  --muc:#1B2A4A; --chi:#2E3192; --chi-nhat:#EDEDF7; --vai:#F6F4F0; --vai-sau:#EDEAE4;
  --the:#FFFFFF; --duong-may:#C7B79A; --than:#5F5B54; --dat:#7C5E33;
  --vien:rgba(27,42,74,.14); --vien-dam:rgba(27,42,74,.28);
  --muc-nen:#15203A; --muc-nen-2:#1B2A4A; --muc-nen-3:#0F1626;
  --bo-sm:2px; --bo-md:3px; --bo-lg:4px;
  --bong:0 1px 2px rgba(27,42,74,.06), 0 8px 24px -12px rgba(27,42,74,.18);
  --bong-lon:0 2px 4px rgba(27,42,74,.08), 0 18px 48px -20px rgba(27,42,74,.28);
  --k-xs:.35rem; --k-sm:.6rem; --k-md:1rem; --k-lg:1.6rem; --k-xl:2.4rem;
  --nhanh:.16s; --vua:.24s;
  box-sizing:border-box; background:var(--vai); color:var(--muc);
  font-family:inherit; line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
#sbh-pt *,#sbh-pt *::before,#sbh-pt *::after{box-sizing:border-box}
#sbh-pt img,#sbh-pt svg{max-width:100%;height:auto}
#sbh-pt [hidden]{display:none!important}

.sbh-pt-wrap{max-width:1160px;margin:0 auto;padding:clamp(1.4rem,4vw,3rem) clamp(1rem,4vw,2rem)}
.sbh-pt-wrap--narrow{max-width:860px}

/* ── tiêu đề chung ── */
#sbh-pt h1,#sbh-pt h2,#sbh-pt h3{font-family:Georgia,"Times New Roman",serif;font-weight:600;line-height:1.18;text-wrap:balance}
.sbh-pt-h1{font-size:clamp(1.7rem,5.4vw,3rem)}
.sbh-pt-h2{font-size:clamp(1.35rem,3.6vw,2rem);margin:0 0 var(--k-md)}
.sbh-pt-h3-ish{font-family:Georgia,"Times New Roman",serif;font-weight:600;font-size:clamp(1.1rem,2.8vw,1.45rem);line-height:1.3}
.sbh-pt-kicker{display:inline-block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dat);margin:0 0 var(--k-sm);font-weight:600}
.sbh-pt-kicker--light{color:#D8C9A8}
.sbh-pt-lead{max-width:60ch;color:var(--than);font-size:.98rem;margin:0 0 var(--k-lg)}
.sbh-pt-lead--light{color:rgba(246,244,240,.78)}
.sbh-pt-quote,.sbh-pt-quote-small{color:var(--than);font-size:.96rem;margin:var(--k-lg) 0 0;text-align:center}
.sbh-pt-quote strong{color:var(--muc)}
.sbh-pt-quote-small{text-align:left;font-size:.9rem}
.sbh-pt-micro{font-size:.85rem;color:var(--than)}
/* 11/09/2026: --than là xám đậm, đọc tốt trên nền sáng nhưng CHÌM HẲN trên các khối
   nền tối (đo được 1.8/21 ở hero). Trên nền tối phải dùng chữ sáng. */
.sbh-pt-hero .sbh-pt-micro,
.sbh-pt-section--dark-kathy .sbh-pt-micro,
.sbh-pt-section--fit .sbh-pt-micro,
.sbh-pt-section--studio .sbh-pt-micro,
.sbh-pt-section--future .sbh-pt-micro,
.sbh-pt-section--end .sbh-pt-micro{color:rgba(246,244,240,.82)}

/* ═══ HERO ═══ */
.sbh-pt-hero{
  position:relative;color:#F6F4F0;
  background:radial-gradient(1200px 700px at 78% -10%, #24345C 0%, var(--muc-nen) 45%, var(--muc-nen-3) 100%);
}
.sbh-pt-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(115deg, rgba(246,244,240,.028) 0 1px, transparent 1px 9px)}
.sbh-pt-hero .sbh-pt-wrap{position:relative;z-index:1;padding-top:clamp(2.4rem,6vw,4.4rem);padding-bottom:clamp(2.4rem,6vw,4rem)}
.sbh-pt-badge{display:inline-block;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  color:#D8C9A8;border:1px solid rgba(199,183,154,.5);border-radius:999px;padding:.45rem .95rem;margin-bottom:var(--k-lg)}
.sbh-pt-h1{max-width:22ch;margin:0 0 var(--k-lg)}
.sbh-pt-h1-gold{color:var(--duong-may)}
.sbh-pt-hero-sub{max-width:62ch;font-size:clamp(.95rem,2.4vw,1.08rem);color:rgba(246,244,240,.85);margin:0 0 var(--k-lg)}
.sbh-pt-hero-sub strong{color:#fff}
.sbh-pt-hero-proof{display:flex;flex-wrap:wrap;gap:var(--k-md) var(--k-xl);margin:0 0 var(--k-lg)}
.sbh-pt-proof-item{display:flex;flex-direction:column;gap:.15rem}
.sbh-pt-proof-num{font-family:Georgia,"Times New Roman",serif;font-size:1.5rem;color:#fff}
.sbh-pt-proof-lbl{font-size:.78rem;color:rgba(246,244,240,.7);letter-spacing:.02em}
.sbh-pt-proof-note{font-size:.75rem;color:rgba(246,244,240,.55);margin:var(--k-md) 0 0;max-width:56ch}

/* ── nút ── */
.sbh-pt-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 1.4rem;border-radius:var(--bo-md);border:1px solid transparent;
  font-size:.92rem;font-weight:600;line-height:1.1;text-decoration:none;cursor:pointer;
  /* 11/09/2026: theme ép mọi <button> thành IN HOA + giãn chữ, còn <a> thì không —
     nên hai nút cạnh nhau cùng kiểu lại trông lệch (VD "ĐỀ XUẤT CHO TÔI" vs
     "Nhắn tin với shop"). Ép cùng một kiểu chữ cho cả <a> lẫn <button>. */
  text-transform:none;letter-spacing:normal;
  /* 11/09/2026: theme còn gán margin-bottom cho <button> mà <a> thì không. Hàng nút
     canh giữa nên nút có lề dưới bị ĐẨY LÊN đúng nửa lề đó (7px) — nhìn là lệch hẳn.
     Khoảng cách giữa các nút đã do `gap` của hàng lo, nên bỏ hết lề riêng của nút. */
  margin:0;
  transition:background var(--nhanh),border-color var(--nhanh),color var(--nhanh),transform var(--nhanh),box-shadow var(--vua)}
.sbh-pt-btn:focus-visible{outline:2px solid var(--chi);outline-offset:2px}
.sbh-pt-btn--gold{background:var(--duong-may);color:var(--muc)}
.sbh-pt-btn--gold:hover{background:#D6C29C;text-decoration:none;color:var(--muc)}
.sbh-pt-btn--gold-outline{background:transparent;color:var(--duong-may);border-color:rgba(199,183,154,.6)}
.sbh-pt-btn--gold-outline:hover{background:rgba(199,183,154,.12);color:#E4D5B4;text-decoration:none}
.sbh-pt-btn--blue{background:var(--chi);color:#fff}
.sbh-pt-btn--blue:hover{background:#25368C;color:#fff;text-decoration:none}
.sbh-pt-btn--ghost{background:transparent;color:var(--muc);border-color:var(--vien-dam)}
.sbh-pt-btn--ghost:hover{background:var(--the);text-decoration:none;color:var(--muc)}
.sbh-pt-btn--ghost-dark{background:transparent;color:#F6F4F0;border-color:rgba(246,244,240,.4)}
.sbh-pt-btn--ghost-dark:hover{background:rgba(246,244,240,.08);color:#fff;text-decoration:none}
/* 11/09/2026: vàng --duong-may trên nền trắng chỉ đạt 2.0/21 — gần như chìm.
   Dùng --dat (cùng hệ vàng, đậm hơn) đạt ~6.0/21, vẫn giữ chất nhận diện. */
.sbh-pt-btn--link{background:none;border:0;color:var(--dat);padding:.6rem .4rem;font-weight:500}
.sbh-pt-btn--link:hover{text-decoration:underline}
.sbh-pt-btn:disabled{opacity:.5;cursor:default}
.sbh-pt-hero-cta,.sbh-pt-actions{display:flex;flex-wrap:wrap;gap:var(--k-sm);margin:0 0 var(--k-sm)}

/* ═══ SECTION nền sáng chung ═══ */
.sbh-pt-section{background:var(--vai)}
.sbh-pt-section--tint{background:#EFECE5}
.sbh-pt-section--tint .sbh-pt-wrap{padding-top:clamp(2.2rem,5vw,3.6rem);padding-bottom:clamp(2.2rem,5vw,3.6rem)}

/* ═══ 01 · VẤN ĐỀ ═══ */
.sbh-pt-grid-problem{display:grid;grid-template-columns:1fr;gap:var(--k-md)}
@media (min-width:640px){.sbh-pt-grid-problem{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.sbh-pt-grid-problem{grid-template-columns:repeat(3,1fr)}}
.sbh-pt-card{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;text-align:left;
  width:100%;background:var(--the);border:1px solid var(--vien);border-radius:var(--bo-md);
  padding:var(--k-md) var(--k-md) var(--k-lg);cursor:pointer;font:inherit;color:inherit;
  transition:border-color var(--vua),box-shadow var(--vua),transform var(--vua)}
.sbh-pt-card:hover{border-color:var(--chi);box-shadow:var(--bong);transform:translateY(-2px)}
.sbh-pt-card:focus-visible{outline:2px solid var(--chi);outline-offset:2px}
.sbh-pt-card[aria-pressed="true"]{border-color:var(--chi);background:var(--chi-nhat)}
.sbh-pt-card-num{font-size:.64rem;letter-spacing:.12em;color:var(--dat);font-weight:600}
.sbh-pt-card h3{font-size:1.02rem;font-weight:600;margin:.1rem 0 .2rem}
.sbh-pt-card p{margin:0;font-size:.86rem;color:var(--than)}
.sbh-pt-pivot{margin-top:var(--k-xl);padding:var(--k-lg);border:1px solid var(--vien);
  border-radius:var(--bo-lg);background:var(--the);text-align:center;display:flex;flex-direction:column;gap:var(--k-md);align-items:center}
.sbh-pt-pivot .sbh-pt-h3-ish{max-width:34ch}

/* ═══ 02 · PHONG CÁCH ═══ */
.sbh-pt-grid-identity{display:grid;grid-template-columns:1fr 1fr;gap:var(--k-sm)}
@media (min-width:900px){.sbh-pt-grid-identity{grid-template-columns:repeat(3,1fr)}}
.sbh-pt-identity{display:flex;flex-direction:column;gap:.2rem;text-align:left;width:100%;
  background:var(--the);border:1px solid var(--vien);border-radius:var(--bo-md);
  padding:var(--k-md);cursor:pointer;font:inherit;color:inherit;
  transition:border-color var(--vua),box-shadow var(--vua),transform var(--vua)}
.sbh-pt-identity:hover{border-color:var(--chi);box-shadow:var(--bong);transform:translateY(-2px)}
.sbh-pt-identity:focus-visible{outline:2px solid var(--chi);outline-offset:2px}
.sbh-pt-identity[aria-selected="true"]{border-color:var(--chi);background:var(--chi-nhat);box-shadow:inset 0 0 0 1px var(--chi)}
.sbh-pt-id-tag{font-family:Georgia,"Times New Roman",serif;font-size:1.02rem;font-weight:600;color:var(--muc)}
.sbh-pt-identity[aria-selected="true"] .sbh-pt-id-tag{color:var(--chi)}
.sbh-pt-identity p{margin:0;font-size:.8rem;color:var(--than)}

/* ═══ 03 · KHÔNG CẦN BIẾT NGHỀ MAY ═══ */
.sbh-pt-grid3{display:grid;grid-template-columns:1fr;gap:var(--k-md)}
@media (min-width:760px){.sbh-pt-grid3{grid-template-columns:repeat(3,1fr)}}
.sbh-pt-item{background:var(--the);border:1px solid var(--vien);border-radius:var(--bo-md);padding:var(--k-md)}
.sbh-pt-item h3{font-size:1rem;font-weight:600;margin:0 0 .3rem}
.sbh-pt-item p{margin:0;font-size:.87rem;color:var(--than)}

/* ═══ KATHY ═══ */
.sbh-pt-section--dark-kathy{background:linear-gradient(160deg,var(--muc-nen-2) 0%,var(--muc-nen) 55%,var(--muc-nen-3) 100%);color:#F6F4F0}
.sbh-pt-section--dark-kathy .sbh-pt-wrap{padding-top:clamp(2.4rem,5vw,4rem);padding-bottom:clamp(2.4rem,5vw,4rem)}
.sbh-pt-h2--light{color:#F6F4F0}
.sbh-kt{margin-top:var(--k-lg)}
.sbh-kt-hoi,.sbh-kt-kqua{background:var(--the);color:var(--muc);border-radius:var(--bo-lg);padding:var(--k-lg);box-shadow:var(--bong-lon)}
.sbh-kt-q{margin:0 0 var(--k-lg)}
.sbh-kt-q h3{font-size:1rem;font-weight:600;margin:0 0 var(--k-sm)}
.sbh-kt-tu{font-family:inherit;font-style:normal;font-weight:400;font-size:.8rem;color:var(--than)}
.sbh-kt-chon{display:flex;flex-wrap:wrap;gap:var(--k-sm);border:0;padding:0;margin:0}
.sbh-kt-o{position:relative;display:block}
.sbh-kt-o input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0}
.sbh-kt-o>span{display:block;padding:.55rem .85rem;border:1px solid var(--vien);border-radius:var(--bo-sm);
  font-size:.86rem;cursor:pointer;background:transparent;line-height:1.35;
  transition:border-color var(--nhanh),background var(--nhanh),color var(--nhanh)}
.sbh-kt-o input:checked+span{border-color:var(--chi);color:var(--chi);background:var(--chi-nhat);box-shadow:inset 0 0 0 1px var(--chi);font-weight:500}
.sbh-kt-o input:focus-visible+span{outline:2px solid var(--chi);outline-offset:2px}
.sbh-kt-o small{display:block;font-size:.72rem;color:var(--than);margin-top:.1rem;font-weight:400}
.sbh-kt-o input:checked+span small{color:var(--chi)}
.sbh-kt-double{display:grid;grid-template-columns:1fr 1fr;gap:var(--k-md);max-width:420px}
.sbh-kt-field{display:flex;flex-direction:column;gap:.3rem;font-size:.8rem;color:var(--than)}
.sbh-kt-field input{padding:.6rem .75rem;border:1px solid var(--vien-dam);border-radius:var(--bo-sm);
  font:inherit;background:var(--the);color:var(--muc)}
.sbh-kt-field input:focus{outline:2px solid var(--chi);outline-offset:1px;border-color:var(--chi)}
.sbh-kt-chips{display:flex;flex-wrap:wrap;gap:var(--k-sm);margin-bottom:var(--k-md)}
.sbh-kt-chip{position:relative;display:block}
.sbh-kt-chip input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0}
.sbh-kt-chip span{display:block;padding:.5rem .8rem;border:1px solid var(--vien);border-radius:999px;
  font-size:.8rem;cursor:pointer;transition:border-color var(--nhanh),background var(--nhanh),color var(--nhanh)}
.sbh-kt-chip input:checked+span{border-color:var(--dat);color:var(--dat);background:#F4EDE0;box-shadow:inset 0 0 0 1px var(--dat);font-weight:500}
.sbh-kt-chip input:focus-visible+span{outline:2px solid var(--chi);outline-offset:2px}
.sbh-kt-actions{display:flex;flex-wrap:wrap;gap:var(--k-sm);align-items:center;margin-top:var(--k-md)}
/* 11/09/2026 (anh Tiền yêu cầu): các nút trong cùng một hàng phải BẰNG NHAU cho cân,
   không cái rộng cái hẹp theo độ dài chữ (VD "Đề xuất cho tôi" 152px vs
   "Nhắn tin với shop" 161px). Trừ nút dạng chữ (--link) vì nó không có nền. */
.sbh-kt-actions .sbh-pt-btn:not(.sbh-pt-btn--link){min-width:11rem}
.sbh-kt-ghi{margin:var(--k-md) 0 0;font-size:.88rem;color:var(--dat)}
.sbh-kt-nhan{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dat);margin:0 0 var(--k-md)}
/* Hộp "tiếp tục" (khách đã có bản thiết kế/fit — giữ context, không hỏi lại) */
#sbh-kt-resume{background:rgba(246,244,240,.07);border:1px solid rgba(199,183,154,.45);
  border-radius:var(--bo-md);padding:var(--k-md) var(--k-lg);margin:0 0 var(--k-lg)}
#sbh-kt-resume .sbh-kt-nhan{color:#D8C9A8;margin-bottom:.4rem}
.sbh-kt-resume-line{font-size:.92rem;color:rgba(246,244,240,.88);margin:0 0 .2rem}
.sbh-kt-resume-line b{color:#fff}
.sbh-kt-dexuat{display:grid;grid-template-columns:1fr;gap:.15rem .9rem;font-size:.92rem}
@media (min-width:620px){.sbh-kt-dexuat{grid-template-columns:auto minmax(0,1fr)}}
.sbh-kt-dexuat dt{color:var(--than);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;margin-top:.45rem}
/* Theme có luật biến toàn bộ dd thành chữ hoa — ghi đè để nội dung đề xuất
   giữ chữ thường (nhãn chữ hoa, nội dung chữ thường = dễ đọc, không gào) */
.sbh-kt-dexuat dd{text-transform:none;letter-spacing:normal}
.sbh-kt-dexuat dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.sbh-kt-dexuat .sbh-kt-vao{font-weight:600;color:var(--chi)}
.sbh-kt-luu-y{font-size:.82rem;color:var(--than);margin:var(--k-md) 0 0}
.sbh-kt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ═══ 04 · 6 BƯỚC ═══ */
.sbh-pt-steps{display:grid;grid-template-columns:1fr;gap:var(--k-md)}
@media (min-width:720px){.sbh-pt-steps{grid-template-columns:repeat(3,1fr)}}
.sbh-pt-step{background:var(--the);border:1px solid var(--vien);border-radius:var(--bo-md);padding:var(--k-md);position:relative}
.sbh-pt-step-num{font-family:Georgia,"Times New Roman",serif;font-size:1.6rem;color:var(--dat);display:block;margin-bottom:.4rem}
.sbh-pt-step h3{font-size:1.02rem;font-weight:600;margin:0 0 .3rem}
.sbh-pt-step p{margin:0;font-size:.86rem;color:var(--than)}
.sbh-pt-step--fit{border-color:var(--chi);background:var(--chi-nhat)}
.sbh-pt-step--fit .sbh-pt-step-num{color:var(--chi)}

/* ═══ FIT ID ═══ */
.sbh-pt-section--fit{background:linear-gradient(150deg,#1E2C50 0%,var(--muc-nen) 60%,var(--muc-nen-3) 100%);color:#F6F4F0}
.sbh-pt-section--fit .sbh-pt-h2{color:#F6F4F0}
.sbh-pt-section--fit .sbh-pt-kicker{color:#D8C9A8}
.sbh-pt-section--fit .sbh-pt-lead{color:rgba(246,244,240,.78)}
.sbh-pt-fit-grid{display:grid;grid-template-columns:1fr;gap:var(--k-xl);align-items:center}
@media (min-width:900px){.sbh-pt-fit-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}}
.sbh-pt-fit-check{display:flex;flex-wrap:wrap;gap:.45rem;margin:var(--k-md) 0}
.sbh-pt-fit-check span{font-size:.78rem;color:var(--muc);background:rgba(246,244,240,.92);
  border-radius:999px;padding:.4rem .75rem;font-weight:600}
.sbh-pt-fit-pref{font-size:.9rem;color:rgba(246,244,240,.85)}
.sbh-pt-fit-pref small{color:rgba(246,244,240,.6)}
.sbh-pt-fit-cta{display:flex;flex-wrap:wrap;gap:var(--k-sm);margin:var(--k-md) 0 var(--k-sm)}
.sbh-pt-fit-visual{display:flex;justify-content:center}
.sbh-pt-fit-card{width:min(300px,100%);background:var(--the);color:var(--muc);border-radius:var(--bo-lg);
  padding:var(--k-lg);box-shadow:var(--bong-lon);position:relative;transform:rotate(-1.2deg)}
.sbh-pt-fit-card::before{content:"";position:absolute;inset:8px;border:1px solid var(--vien-dam);border-radius:var(--bo-md);pointer-events:none}
.sbh-pt-fit-card-title{font-family:Georgia,"Times New Roman",serif;font-size:1.1rem;letter-spacing:.08em;margin:0 0 var(--k-md);color:var(--chi)}
.sbh-pt-fit-card ul{list-style:none;margin:0 0 var(--k-md);padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.3rem .6rem;font-size:.9rem}
.sbh-pt-fit-card li{display:flex;justify-content:space-between;gap:.5rem;color:var(--than)}
.sbh-pt-fit-card li b{color:var(--chi)}
.sbh-pt-fit-card-pref{font-size:.82rem;color:var(--muc);margin:0 0 .2rem}
.sbh-pt-fit-card-note{font-size:.75rem;color:var(--than);margin:0}

/* ═══ FIT LOOP ═══ */
.sbh-pt-loop{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin:0 0 var(--k-lg)}
.sbh-pt-loop span{background:var(--the);border:1px solid var(--vien);border-radius:999px;
  padding:.5rem .9rem;font-size:.82rem;font-weight:600;color:var(--muc)}
.sbh-pt-loop span:last-child{background:var(--chi);border-color:var(--chi);color:#fff}
.sbh-pt-loop i{color:var(--duong-may);font-style:normal;font-size:.9rem}
#sbh-feedback{display:flex;flex-wrap:wrap;gap:var(--k-sm);margin:var(--k-md) 0}
.sbh-pt-chip{background:var(--the);border:1px solid var(--vien);border-radius:999px;padding:.55rem .95rem;
  font-size:.84rem;cursor:pointer;color:var(--muc);transition:border-color var(--nhanh),background var(--nhanh),color var(--nhanh)}
.sbh-pt-chip:hover{border-color:var(--chi)}
.sbh-pt-chip[aria-pressed="true"]{border-color:var(--chi);background:var(--chi-nhat);color:var(--chi);font-weight:600}
.sbh-pt-chip:focus-visible{outline:2px solid var(--chi);outline-offset:2px}
.sbh-pt-feedback-kq{margin:0 0 var(--k-md);font-size:.9rem;color:var(--than)}

/* ═══ CHẤT LIỆU ═══ */
.sbh-pt-grid4{display:grid;grid-template-columns:1fr;gap:var(--k-md)}
@media (min-width:640px){.sbh-pt-grid4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.sbh-pt-grid4{grid-template-columns:repeat(4,1fr)}}
.sbh-pt-material{background:var(--the);border:1px solid var(--vien);border-radius:var(--bo-md);padding:var(--k-md)}
.sbh-pt-material h3{font-size:.98rem;font-weight:600;margin:0 0 .3rem}
.sbh-pt-material p{margin:0;font-size:.85rem;color:var(--than)}
.sbh-pt-material-img{margin:var(--k-lg) auto 0;max-width:420px}
.sbh-pt-material-img img{border-radius:var(--bo-lg);border:1px solid var(--vien);box-shadow:var(--bong)}

/* ═══ SHIRT STUDIO ═══ */
.sbh-pt-section--studio{background:var(--muc-nen-2);color:#F6F4F0}
.sbh-pt-section--studio .sbh-pt-h2{color:#F6F4F0}
.sbh-pt-section--studio .sbh-pt-kicker{color:#D8C9A8}
.sbh-pt-section--studio .sbh-pt-lead{color:rgba(246,244,240,.78)}
.sbh-pt-studio-grid{display:grid;grid-template-columns:1fr;gap:var(--k-xl);align-items:center}
@media (min-width:900px){.sbh-pt-studio-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.sbh-pt-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 var(--k-lg)}
.sbh-pt-chips span{font-size:.76rem;color:rgba(246,244,240,.85);border:1px solid rgba(246,244,240,.3);
  border-radius:999px;padding:.4rem .75rem}
.sbh-pt-studio-img img{border-radius:var(--bo-lg);border:1px solid rgba(246,244,240,.18);box-shadow:var(--bong-lon)}

/* ═══ SO SÁNH ═══ */
.sbh-pt-compare{display:grid;grid-template-columns:1fr;gap:var(--k-md)}
@media (min-width:760px){.sbh-pt-compare{grid-template-columns:1fr 1fr}}
.sbh-pt-compare-col{background:var(--the);border:1px solid var(--vien);border-radius:var(--bo-lg);padding:var(--k-lg);display:flex;flex-direction:column}
.sbh-pt-compare-col h3{font-size:1.15rem;font-weight:600;margin:0 0 var(--k-md)}
.sbh-pt-compare-col ul{list-style:none;margin:0 0 var(--k-lg);padding:0;display:grid;gap:.5rem;font-size:.9rem;color:var(--than)}
.sbh-pt-compare-col ul li{padding-left:1.25rem;position:relative}
.sbh-pt-compare-col ul li::before{content:"—";position:absolute;left:0;color:var(--duong-may)}
.sbh-pt-compare-col--featured .ul li::before,.sbh-pt-compare-col--featured li::before{content:"✓";color:var(--chi)}
.sbh-pt-compare-col--featured{border-color:var(--chi);box-shadow:inset 0 0 0 1px var(--chi)}
.sbh-pt-compare-col--featured h3{color:var(--chi)}
.sbh-pt-compare-col .sbh-pt-btn{align-self:flex-start;margin-top:auto}

/* ═══ SHOWROOM ═══ */
.sbh-pt-section--showroom{background:#EFECE5}
.sbh-pt-showroom-grid{display:grid;grid-template-columns:1fr;gap:var(--k-lg)}
@media (min-width:880px){.sbh-pt-showroom-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}}
.sbh-pt-showroom-list{list-style:none;margin:0;padding:0;display:grid;gap:.65rem;font-size:.95rem}
.sbh-pt-showroom-list li{padding-left:1.5rem;position:relative}
.sbh-pt-showroom-list li::before{content:"✓";position:absolute;left:0;color:var(--chi);font-weight:700}
.sbh-pt-address{display:flex;flex-direction:column;gap:.5rem;background:var(--the);
  border:1px solid var(--vien);border-radius:var(--bo-lg);padding:var(--k-lg);font-style:normal;box-shadow:var(--bong)}
.sbh-pt-address strong{font-family:Georgia,"Times New Roman",serif;font-size:1.1rem}
.sbh-pt-address a{color:var(--chi)}
.sbh-pt-map{font-size:.85rem;color:var(--chi);text-decoration:underline;text-underline-offset:3px}
.sbh-pt-map:hover{color:#25368C}
.sbh-pt-address .sbh-pt-btn{margin-top:var(--k-sm);align-self:flex-start}

/* ═══ FUTURE PACING ═══ */
.sbh-pt-section--future{background:radial-gradient(1100px 600px at 22% -10%,#24345C 0%,var(--muc-nen) 50%,var(--muc-nen-3) 100%);color:#F6F4F0}
.sbh-pt-future{max-width:52ch;font-size:clamp(.98rem,2.4vw,1.12rem);color:rgba(246,244,240,.85)}
.sbh-pt-future p{margin:0 0 var(--k-md)}
.sbh-pt-future-strong{font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.5rem,4.5vw,2.3rem);color:var(--duong-may);margin-top:var(--k-lg)!important}

/* ═══ FAQ ═══ */
.sbh-pt-faq{display:grid;gap:var(--k-sm)}
.sbh-pt-faq-item{background:var(--the);border:1px solid var(--vien);border-radius:var(--bo-md)}
.sbh-pt-faq-item>summary{display:flex;align-items:center;gap:var(--k-md);list-style:none;cursor:pointer;padding:var(--k-md)}
.sbh-pt-faq-item>summary::-webkit-details-marker{display:none}
.sbh-pt-faq-item>summary::after{content:"+";margin-left:auto;color:var(--dat);font-size:1.2rem;font-weight:500;transition:transform var(--vua)}
.sbh-pt-faq-item[open]>summary::after{transform:rotate(45deg)}
.sbh-pt-faq-item>summary:focus-visible{outline:2px solid var(--chi);outline-offset:-2px}
.sbh-pt-faq-item h3{font-size:.96rem;font-weight:600;margin:0}
.sbh-pt-faq-a{padding:0 var(--k-md) var(--k-md);font-size:.9rem;color:var(--than)}
.sbh-pt-faq-a a{color:var(--chi)}

/* ═══ END CTA ═══ */
.sbh-pt-section--end{background:linear-gradient(150deg,var(--muc-nen-2) 0%,var(--muc-nen) 60%,var(--muc-nen-3) 100%)}
.sbh-pt-cta-grid{display:grid;grid-template-columns:1fr;gap:var(--k-md)}
@media (min-width:840px){.sbh-pt-cta-grid{grid-template-columns:repeat(2,1fr)}}
.sbh-pt-cta-cell{display:flex;flex-direction:column;gap:.5rem}
.sbh-pt-cta-cap{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(246,244,240,.6)}
.sbh-pt-cta-wide{justify-content:center;width:100%;padding:1rem 1.4rem}

/* ═══ MOBILE STICKY BAR ═══ */
#sbh-pt-bar{position:fixed;left:0;right:0;bottom:0;z-index:9980;
  display:flex;gap:1px;background:var(--muc-nen-3);
  border-top:1px solid rgba(246,244,240,.14);
  padding:max(.35rem,env(safe-area-inset-bottom)) max(.5rem,env(safe-area-inset-right)) max(.35rem,env(safe-area-inset-bottom)) max(.5rem,env(safe-area-inset-left));
  box-shadow:0 -8px 24px -16px rgba(0,0,0,.5);
  transform:translateY(110%);transition:transform var(--vua)}
#sbh-pt-bar[data-show="1"]{transform:translateY(0)}
.sbh-pt-bar-main{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;gap:.4rem;
  background:var(--duong-may);color:var(--muc);border-radius:var(--bo-md);
  padding:.75rem .5rem;font-weight:700;text-decoration:none;
  /* 11/09/2026: chữ đổi thành "Để chúng tôi giúp chọn" — dài gần gấp đôi chữ cũ.
     Giữ một dòng, cỡ chữ co theo bề ngang máy để không tràn trên máy nhỏ. */
  white-space:nowrap;font-size:clamp(.78rem,3.4vw,.92rem)}
.sbh-pt-bar-lich{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:.35rem;
  background:transparent;color:#F6F4F0;border:1px solid rgba(246,244,240,.4);border-radius:var(--bo-md);
  padding:.75rem .9rem;font-weight:600;font-size:.88rem;text-decoration:none}
#sbh-pt-bar a:focus-visible{outline:2px solid var(--chi);outline-offset:2px}
/* Khi thanh đáy hiện, đẩy bong bóng liên hệ nổi lên trên (không che nhau).
   11/09/2026: nút Zalo xanh .sbh-zl đã gỡ theo yêu cầu anh Tiền, nay đẩy
   bong bóng tím #sbh-lc — nếu không, thanh đáy che mất nó ở trang này. */
body.sbh-pt-bar-show #sbh-lc{bottom:calc(64px + env(safe-area-inset-bottom,0px))}

/* ═══ REVEAL nhẹ (JS bật mới chạy; kính trọng reduced-motion) ═══ */
#sbh-pt.sbh-pt-js [data-sbh-reveal]{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
#sbh-pt.sbh-pt-js [data-sbh-reveal].sbh-pt-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  #sbh-pt.sbh-pt-js [data-sbh-reveal]{opacity:1;transform:none;transition:none}
  #sbh-pt-bar{transition:none}
}

/* ═══ MÀN HÌNH RẤT NHỎ ═══ */
@media (max-width:480px){
  .sbh-pt-hero-cta .sbh-pt-btn,.sbh-pt-actions .sbh-pt-btn{width:100%;justify-content:center}
  /* máy nhỏ: nút trong khối hỏi–đáp cũng trải hết bề ngang cho bằng nhau */
  .sbh-kt-actions .sbh-pt-btn:not(.sbh-pt-btn--link){width:100%;min-width:0;justify-content:center}
  .sbh-pt-kt-hoi,.sbh-pt-kt-kqua{padding:var(--k-md)}
  .sbh-pt-double{grid-template-columns:1fr 1fr}
}