/* songhe.css · Trang bán Trọn Bộ Song Hệ, bản 06/10/2026 (ghép Mẫu A và Mẫu C, Việt + Anh). */

/* Bố cục: một thanh chọn mẫu dính trên đầu. Mỗi mẫu là một trang bán hoàn chỉnh, kể một câu chuyện khác nhau
   bằng cùng một kho sự thật (ảnh trang thật, lời trích cuốn mẫu). Bộ video dùng chung một "máy chiếu" 9:16. */
:root{
  --kem:#fbf6ec; --kem2:#f3e9d2; --the:#fffaf0; --muc:#1c1410; --muc2:#5b4636; --nau:#8a6309;
  --do:#6E0E0A; --son:#8C1F14; --vang:#D4AF37; --vang2:#f0d98a; --ke:#d8c79b;
  --dem:#1b0b09; --dem2:#2a100d; --dem-chu:#f3e6cf; --dem-phu:#cdb98a; --xam:#3a3532; --xam2:#8b847c;
  --serif:"Noto Serif",Georgia,"Times New Roman",serif; --sans:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
body{background:var(--kem);color:var(--muc);font-family:var(--sans);font-size:16px;line-height:1.65;margin:0}
h1,h2,h3,h4{font-family:var(--serif);text-wrap:balance;margin:0;line-height:1.2}
p{margin:0}
img{display:block;max-width:100%;height:auto}
button{font:inherit;cursor:pointer}
a{color:inherit}
:focus-visible{outline:3px solid var(--vang);outline-offset:2px}
.wrap{max-width:1120px;margin-inline:auto;padding-inline:20px}

/* thanh chọn mẫu */
.chon{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(251,246,236,.96);border-bottom:1px solid var(--ke);backdrop-filter:blur(8px)}
.chon .wrap{display:flex;gap:8px;align-items:center;padding-block:10px;overflow-x:auto}
.chon b{font-family:var(--serif);color:var(--do);white-space:nowrap;margin-right:6px}
.chon button{border:1px solid var(--ke);background:var(--the);color:var(--muc2);border-radius:999px;padding:8px 14px;font-weight:600;font-size:.86rem;white-space:nowrap}
.chon button[aria-selected="true"]{background:var(--do);border-color:var(--do);color:var(--dem-chu)}
.ghi-mau{background:var(--kem2);border-bottom:1px solid var(--ke);font-size:.86rem;color:var(--muc2)}
.ghi-mau .wrap{padding-block:10px}
.ghi-mau b{color:var(--do)}

/* dùng chung */
.tren{font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--son)}
.nut{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:14px 26px;font-weight:800;font-size:1rem;text-decoration:none;background:linear-gradient(135deg,#8a1410,var(--do));color:#F5E6C8;box-shadow:0 8px 20px rgba(110,14,10,.28)}
.nut.vang{background:linear-gradient(135deg,#e9c46a,#c8963e);color:#241708;box-shadow:0 8px 20px rgba(0,0,0,.3)}
.nut.ma{background:transparent;color:var(--do);border:1.5px solid var(--ke);box-shadow:none}
.trang{border-radius:6px;border:1px solid var(--ke);box-shadow:0 14px 34px rgba(60,40,10,.2);background:#fff}
.muc{padding-block:64px}
.muc h2{font-size:clamp(1.6rem,3.6vw,2.4rem);color:var(--do)}
.dan{color:var(--muc2);max-width:62ch;margin-top:12px}

/* máy chiếu video 9:16 */
.may{width:290px;max-width:100%;flex:none}
.may-khung{position:relative;aspect-ratio:9/16;border-radius:26px;overflow:hidden;background:radial-gradient(120% 80% at 50% 0%,#8a1a12,#4a0806 60%,#2a0503);border:6px solid #120504;box-shadow:0 24px 50px rgba(30,8,4,.45);color:#F5E6C8;cursor:pointer;user-select:none}
.may-thanh{position:absolute;top:10px;left:12px;right:12px;display:flex;gap:4px;z-index:3}
.may-thanh i{flex:1;height:3px;border-radius:2px;background:rgba(245,230,200,.28);overflow:hidden}
.may-thanh i u{display:block;height:100%;width:0;background:#F5E6C8}
.may-hieu{position:absolute;top:22px;left:14px;right:14px;z-index:3;font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--vang2);display:flex;justify-content:space-between;gap:8px;white-space:nowrap}
.may-canh{position:absolute;inset:44px 14px 64px;display:flex;flex-direction:column;justify-content:center;gap:10px;text-align:center}
.may-canh .k{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--vang2)}
.may-canh .h{font-family:var(--serif);font-weight:800;font-size:1.32rem;line-height:1.22;color:#fff3d6}
.may-canh .h em{font-style:normal;color:var(--vang2)}
.may-canh .d{font-size:.8rem;line-height:1.45;color:#ecd9b6}
.may-canh .so{font-family:var(--serif);font-weight:800;font-size:3.4rem;line-height:1;color:var(--vang2)}
.may-canh .anh{position:relative;height:56%;flex:none}
.may-canh .anh img{position:absolute;left:50%;top:0;height:100%;width:auto;border-radius:4px;box-shadow:0 10px 24px rgba(0,0,0,.5)}
.may-canh .anh img:nth-child(1){transform:translateX(-50%) rotate(-3deg)}
.may-canh .anh img:nth-child(2){transform:translateX(-36%) rotate(4deg)}
.may-canh .anh img:nth-child(3){transform:translateX(-62%) rotate(-7deg)}
.may-canh .hai{display:grid;gap:8px;text-align:left}
.may-canh .hai div{border-radius:10px;padding:9px 11px;font-size:.74rem;line-height:1.4;background:rgba(255,243,214,.1);border:1px solid rgba(240,217,138,.35)}
.may-canh .hai div b{display:block;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--vang2)}
.may-canh .hai .xu{background:#F5E6C8;color:var(--do);border-color:#F5E6C8;font-weight:700}
.may-canh .hai .xu b{color:var(--son)}
.may-canh .huy{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.may-canh .huy span{font-size:.64rem;border:1px solid rgba(240,217,138,.5);border-radius:999px;padding:4px 9px}
.may-canh .lk{display:inline-block;align-self:center;background:#F5E6C8;color:var(--do);font-weight:800;border-radius:999px;padding:8px 16px;font-size:.82rem}
.may-cap{position:absolute;left:12px;right:12px;bottom:14px;z-index:3;background:rgba(18,5,4,.72);border-radius:10px;padding:8px 10px;font-size:.72rem;line-height:1.4;text-align:center;min-height:44px;display:grid;place-items:center}
.may-canh>*{animation:hien .5s ease both}
.may-canh>*:nth-child(2){animation-delay:.12s}.may-canh>*:nth-child(3){animation-delay:.24s}
@keyframes hien{from{opacity:.0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.may-canh>*{animation:none}}
.may-chu{margin-top:10px;font-size:.8rem;color:var(--muc2);text-align:center}
.may-chu b{display:block;color:var(--do);font-family:var(--serif);font-size:.95rem}
.toi .may-chu{color:var(--dem-phu)}.toi .may-chu b{color:var(--vang2)}

/* khối đặt cuốn (chung) */
.dat{border:2px solid var(--vang);border-radius:18px;background:linear-gradient(165deg,var(--the),#fdf1d8);padding:26px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:26px;align-items:center}
.dat h3{color:var(--do);font-size:1.5rem}
.dat ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.dat li{padding-left:22px;position:relative;color:#33261c}
.dat li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:10px;border-radius:50%;background:var(--son)}
.dat .gia{font-family:var(--serif);font-weight:800;font-size:2.4rem;color:var(--do);line-height:1}
.dat .gia small{display:block;font-family:var(--sans);font-size:.84rem;font-weight:500;color:var(--nau);margin-top:6px}
.dat .phai{display:grid;gap:14px;justify-items:start}
.nhan-dien{font-size:.76rem;color:var(--muc2);text-align:center;padding-block:26px;border-top:1px solid var(--ke)}

/* ───── MẪU A: chuyện một đời ───── */
.ma .hero{background:linear-gradient(180deg,#fbf6ec,#f3e9d2);border-bottom:2px solid var(--vang)}
.ma .hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:40px;align-items:center;padding-block:56px}
.ma h1{font-size:clamp(2rem,5vw,3.3rem);color:var(--do)}
.ma h1 em{font-style:normal;color:#a8782a}
.ma .mo{margin-top:16px;color:var(--muc2);max-width:54ch;font-size:1.05rem}
.ma .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.chuyen{display:grid;gap:56px;margin-top:40px}
.hoi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:34px;align-items:center}
.hoi:nth-child(even) .canh{order:2}
.canh{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--ke);box-shadow:0 16px 36px rgba(60,40,10,.18)}
.canh>img{width:100%;aspect-ratio:8/5;object-fit:cover}
.canh .tuoi{position:absolute;left:14px;top:14px;background:rgba(27,11,9,.78);color:var(--vang2);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:6px 12px}
.canh .tr{position:absolute;right:14px;bottom:-1px;width:30%;border-radius:4px 4px 0 0;box-shadow:0 -6px 20px rgba(0,0,0,.4)}
.hoi .cau{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.6vw,1.75rem);color:var(--do);line-height:1.3}
.hoi .tra{margin-top:14px;border-left:3px solid var(--son);padding:4px 0 4px 16px;color:#2c2018}
.hoi .tra small{display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--nau);margin-bottom:6px}
.hoi .o-dau{margin-top:14px;font-size:.86rem;color:var(--muc2)}
.hoi .o-dau b{color:var(--do)}
.doi{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.doi div{background:var(--the);border:1px solid var(--ke);border-radius:12px;padding:12px 14px;font-size:.9rem}
.doi div b{display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--son);margin-bottom:4px}
.doi .xu{grid-column:1/-1;background:var(--do);border-color:var(--do);color:var(--dem-chu);font-weight:600}
.doi .xu b{color:var(--vang2)}
.ma .phim{background:var(--dem);color:var(--dem-chu)}
.ma .phim h2{color:var(--vang2)}.ma .phim .dan{color:var(--dem-phu)}
.day-may{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;margin-top:32px}

/* ───── MẪU B: hai nhân chứng ───── */
.mb{background:var(--dem);color:var(--dem-chu)}
.mb .tren{color:var(--vang2)}
.mb .hero .wrap{padding-block:64px;display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:44px;align-items:center}
.mb h1{font-size:clamp(2.2rem,6vw,4rem);color:#fff3d6;letter-spacing:-.01em}
.mb h1 span{display:block;color:var(--vang2)}
.mb .mo{margin-top:18px;color:var(--dem-phu);max-width:52ch;font-size:1.06rem}
.mb .muc h2{color:var(--vang2)}.mb .dan{color:var(--dem-phu)}
.phien{margin-top:34px;display:grid;gap:26px}
.vu{border:1px solid rgba(212,175,55,.35);border-radius:18px;padding:22px;background:linear-gradient(180deg,var(--dem2),#200c0a)}
.vu h3{color:#fff3d6;font-size:1.3rem}
.vu .so-vu{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--vang2);margin-bottom:6px}
.vu .hai-ben{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.vu .ben{border-radius:14px;padding:16px;background:rgba(255,243,214,.06);border:1px solid rgba(240,217,138,.28)}
.vu .ben b{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--vang2);margin-bottom:6px}
.vu .ben small{display:block;margin-top:8px;color:var(--dem-phu);font-size:.78rem}
.vu .an{margin-top:14px;border-radius:14px;padding:18px;background:#F5E6C8;color:var(--do);display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}
.vu .an .dau{width:54px;height:54px;border-radius:50%;background:var(--do);color:#F5E6C8;display:grid;place-items:center;font-family:var(--serif);font-weight:800;font-size:.7rem;text-align:center;line-height:1.1}
.vu .an p{font-family:var(--serif);font-weight:700;font-size:1.08rem;line-height:1.4}
.vu .an small{display:block;font-family:var(--sans);font-weight:500;font-size:.8rem;color:var(--muc2);margin-top:4px}
.mb .ba{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:30px}
.mb .ba article{border-top:3px solid var(--vang);padding-top:14px}
.mb .ba h3{color:#fff3d6;font-size:1.15rem}
.mb .ba p{color:var(--dem-phu);font-size:.92rem;margin-top:8px}
.mb .ba img{margin-top:14px;border-radius:5px}
.mb .dat{background:linear-gradient(165deg,#F5E6C8,#ecd6a4)}
.mb .nhan-dien{color:var(--dem-phu);border-color:rgba(212,175,55,.3)}

/* ───── MẪU C: mở cuốn sách ───── */
.mc .hero .wrap{padding-block:56px;display:grid;grid-template-columns:300px minmax(0,1fr);gap:48px;align-items:center}
.mc .bia{width:300px;max-width:100%;position:relative}
.mc .bia img{border-radius:4px 10px 10px 4px;box-shadow:-10px 0 0 -4px #4a0806,-18px 0 0 -8px #c9b48a,0 26px 50px rgba(60,20,10,.4)}
.mc h1{font-size:clamp(2rem,5vw,3.4rem);color:var(--muc)}
.mc h1 em{font-style:italic;color:var(--do)}
.mc .mo{margin-top:16px;color:var(--muc2);max-width:54ch;font-size:1.05rem}
.mc .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.lat{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 2px 18px;margin-top:28px}
.lat figure{margin:0;flex:0 0 min(78%,300px);scroll-snap-align:start}
.lat figcaption{margin-top:12px;font-size:.9rem;color:var(--muc2)}
.lat figcaption b{display:block;font-family:var(--serif);color:var(--do);font-size:1rem}
.quyen{display:grid;gap:22px;margin-top:30px}
.q{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:28px;border-top:1px solid var(--ke);padding-top:22px}
.q .ten small{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--son);font-weight:700}
.q .ten h3{font-size:1.6rem;color:var(--do);margin-top:4px}
.q .tho{margin-top:14px;font-family:var(--serif);font-style:italic;color:var(--muc2);line-height:1.7;border-left:2px solid var(--vang);padding-left:14px}
.q .tho small{display:block;font-family:var(--sans);font-style:normal;font-size:.74rem;color:var(--nau);margin-top:6px}
.q ol{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
.q li{font-size:.9rem;padding:7px 0;border-bottom:1px dotted var(--ke);display:flex;gap:10px}
.q li i{font-style:normal;font-family:var(--serif);font-weight:700;color:var(--son);min-width:2.2em;font-variant-numeric:tabular-nums}
.q .noi{grid-column:1/-1;background:var(--the);border:1px solid var(--ke);border-radius:12px;padding:14px 16px;font-family:var(--serif);color:#2c2018}
.q .noi small{display:block;font-family:var(--sans);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--nau);font-weight:700;margin-bottom:6px}
.mc .xem{background:var(--kem2)}
.mc .xem .hang{display:grid;grid-template-columns:290px minmax(0,1fr);gap:36px;align-items:center}
.buoc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:28px}
.buoc div{border-top:3px solid var(--son);padding-top:12px;font-size:.92rem;color:var(--muc2)}
.buoc b{display:block;font-family:var(--serif);color:var(--do);font-size:1.05rem;margin-bottom:4px}

/* ───── BỘ VIDEO ───── */
.mv .dau .wrap{padding-block:44px}
.mv h1{font-size:clamp(1.8rem,4vw,2.6rem);color:var(--do)}
.phim-don{display:grid;grid-template-columns:290px minmax(0,1fr);gap:30px;padding-block:34px;border-top:1px solid var(--ke)}
.phim-don h2{font-size:1.5rem;color:var(--do)}
.phim-don .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.phim-don .meta span{font-size:.76rem;border:1px solid var(--ke);border-radius:999px;padding:4px 10px;color:var(--muc2);background:var(--the)}
.kb{overflow-x:auto;margin-top:16px}
.kb table{border-collapse:collapse;width:100%;min-width:520px;font-size:.88rem}
.kb th{text-align:left;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--nau);padding:8px 10px;border-bottom:2px solid var(--ke)}
.kb td{padding:9px 10px;border-bottom:1px solid var(--ke);vertical-align:top}
.kb td:first-child{font-family:var(--serif);font-weight:700;color:var(--son);font-variant-numeric:tabular-nums}
.dang{margin-top:14px;display:grid;gap:8px;font-size:.88rem}
.phim-don>div{min-width:0}
.dang div{overflow-wrap:anywhere;background:var(--the);border:1px solid var(--ke);border-radius:10px;padding:10px 12px}
.dang b{color:var(--do)}
.ke-hoach{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:22px}
.ke-hoach div{background:var(--the);border:1px solid var(--ke);border-radius:12px;padding:16px;font-size:.92rem;color:var(--muc2)}
.ke-hoach b{display:block;font-family:var(--serif);color:var(--do);margin-bottom:6px}

@media(max-width:860px){
  .ma .hero .wrap,.mb .hero .wrap,.mc .hero .wrap,.hoi,.dat,.q,.mc .xem .hang,.phim-don{grid-template-columns:minmax(0,1fr)}
  .hoi:nth-child(even) .canh{order:0}
  .may{margin-inline:auto}.mc .bia{margin-inline:auto}
  .mb .ba,.ke-hoach{grid-template-columns:minmax(0,1fr)}
  .buoc{grid-template-columns:1fr 1fr}
  .muc{padding-block:44px}
}
@media(max-width:520px){.vu .hai-ben,.doi,.q ol{grid-template-columns:minmax(0,1fr)}.vu .an{grid-template-columns:minmax(0,1fr)}}

/* ───── bản ghép A + C, song ngữ ───── */
.chon .wrap{overflow:visible;flex-wrap:wrap}
.nn{display:inline-flex;border:1px solid var(--ke);border-radius:999px;padding:3px;background:var(--the)}
.nn button{border:0;background:none;border-radius:999px;padding:7px 14px;font-weight:700;font-size:.84rem;color:var(--muc2)}
.nn button[aria-pressed="true"]{background:var(--son);color:#F5E6C8}
.chon .kb-nut{border-style:dashed}
.hero.mc{background:linear-gradient(180deg,var(--kem),var(--kem2));border-bottom:2px solid var(--vang)}
.hero.mc .wrap{padding-block:52px;display:grid;grid-template-columns:300px minmax(0,1fr);gap:48px;align-items:center}
.hero.mc .bia{width:300px;max-width:100%;position:relative}
.hero.mc .bia img{border-radius:4px 10px 10px 4px;box-shadow:-10px 0 0 -4px #4a0806,-18px 0 0 -8px #c9b48a,0 26px 50px rgba(60,20,10,.4)}
.hero.mc h1{font-size:clamp(2rem,5vw,3.3rem);color:var(--muc)}
.hero.mc h1 em{font-style:italic;color:var(--do)}
.hero.mc .mo{margin-top:16px;color:var(--muc2);max-width:54ch;font-size:1.05rem}
.hero.mc .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.ban-nn{margin-top:18px;display:inline-flex;align-items:center;gap:12px;background:var(--do);color:#F5E6C8;border-radius:14px;padding:10px 16px 10px 10px;font-size:.98rem;line-height:1.35}
.ban-nn b{color:var(--vang2)}
.hai-co{display:inline-flex;flex:none}
.hai-co i,.nn-the .co{font-style:normal;font-family:var(--serif);font-weight:800;font-size:.78rem;letter-spacing:.06em;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#F5E6C8;color:var(--do);border:2px solid var(--vang)}
.hai-co i+i{margin-left:-10px;background:var(--vang2)}
.loi{padding-block:44px 0}
.loi h2{font-size:clamp(1.5rem,3.4vw,2.2rem);color:var(--do);margin-top:6px}
.loi-nut{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.loi-nut button{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:center;text-align:left;border:2px solid var(--ke);background:var(--the);border-radius:18px;padding:14px;color:var(--muc)}
.loi-nut button b{display:block;font-family:var(--serif);font-size:1.2rem;color:var(--do);line-height:1.25}
.loi-nut button small{display:block;margin-top:6px;color:var(--muc2);font-size:.9rem;line-height:1.5}
.loi-nut button em{display:none;margin-top:8px;font-style:normal;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--son)}
.loi-nut button[aria-selected="true"]{border-color:var(--son);background:#fff;box-shadow:0 12px 28px rgba(110,14,10,.16)}
.loi-nut button[aria-selected="true"] em{display:block}
.tranh-nho{display:block;border-radius:12px;overflow:hidden;aspect-ratio:1/1;border:1px solid var(--ke)}
.tranh-nho img{width:100%;height:100%;object-fit:cover}
.tranh-nho.sach img{object-position:top}
.doi-loi{display:block;width:100%;margin-block:8px 0;border:1.5px dashed var(--son);background:none;color:var(--do);border-radius:14px;padding:16px;font-weight:700;font-size:1rem}
.nn-muc h2{color:var(--do)}
.nn-the{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
.nn-the article{border:2px solid var(--ke);border-radius:18px;padding:22px;background:var(--the);display:grid;gap:10px;justify-items:start;align-content:start}
.nn-the article.chon-roi{border-color:var(--son);background:#fff}
.nn-the h3{color:var(--do);font-size:1.3rem}
.nn-the p{color:var(--muc2)}
fieldset.o{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
fieldset.o legend{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--nau);padding:0;margin-bottom:6px}
fieldset.o label{cursor:pointer}
fieldset.o input{position:absolute;opacity:0}
fieldset.o span{display:block;border:1.5px solid var(--ke);border-radius:999px;padding:8px 16px;font-weight:600;background:#fff}
fieldset.o input:checked+span{background:var(--do);border-color:var(--do);color:#F5E6C8}
fieldset.o input:focus-visible+span{outline:3px solid var(--vang);outline-offset:2px}
.dat .se{font-weight:700;color:var(--do)}
@media(max-width:860px){.hero.mc .wrap{grid-template-columns:minmax(0,1fr)}.hero.mc .bia{margin-inline:auto;width:220px}.loi-nut,.nn-the{grid-template-columns:minmax(0,1fr)}}
@media(max-width:520px){.loi-nut button{grid-template-columns:84px minmax(0,1fr)}.chon b{display:none}}

/* ═══ Phần riêng của trang thật (06/10/2026) ═══ */
html{scroll-behavior:smooth}
[hidden]{display:none!important}
body{margin:0}
/* 25/09/2026 (Thầy chốt): trang này CHỈ để bán. Ẩn menu dưới, nút chat và bong bóng nhắc, thay bằng thanh "Đặt cuốn" dính đáy. */
html body #uk-menu-duoi,html body #ukc-btn,html body #ukc-greet,html body #uk-ndg,html body #uk-fs{display:none !important}
html body.uk-co-menu-duoi,html body{padding-bottom:0 !important}
html body.sg-co-thanh{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px)) !important}
#sgThanh{position:fixed;left:0;right:0;bottom:0;z-index:2900;background:#2a0604;border-top:2px solid #C79B26;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:center;gap:14px;transform:translateY(110%);transition:transform .25s ease;box-shadow:0 -6px 20px rgba(0,0,0,.35)}
#sgThanh.hien{transform:none}
#sgThanh .ch{color:#F3E2B6;font-size:14px;line-height:1.35;text-align:left}
#sgThanh .ch b{color:#FFD76A;font-size:16px}
#sgThanh a{flex:0 0 auto;background:linear-gradient(180deg,#E9C766,#C79B26);color:#3A2C05;font-weight:800;text-decoration:none;padding:12px 22px;border-radius:999px;font-size:15px;white-space:nowrap}
@media (prefers-reduced-motion:reduce){#sgThanh{transition:none}html{scroll-behavior:auto}}
@media print{#sgThanh{display:none}}
/* thanh đầu trang: đúng số đo logo của nav.html (.uk-logo-mark 42px, hình 36px) */
.thanh{position:sticky;top:0;z-index:40;background:rgba(251,246,236,.96);border-bottom:1px solid var(--ke);box-shadow:0 1px 8px rgba(60,40,10,.05);backdrop-filter:blur(8px)}
.thanh .wrap{display:flex;align-items:center;gap:12px;padding-block:8px}
.thanh a.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;min-width:0;margin-right:auto}
.thanh .dau-an{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 32% 28%,#f6d57a,#c8981e 72%);box-shadow:0 0 0 2px #f6e3a8,0 4px 12px rgba(212,175,55,.35)}
.thanh .logo-anh{width:36px;height:36px;object-fit:contain}
.thanh .ten-nha{display:grid;line-height:1.15}
.thanh .ten-nha b{font-family:var(--serif);color:var(--do);font-size:1.1rem;white-space:nowrap}
.thanh .ten-nha small{color:#b5946a;font-size:.64rem;letter-spacing:.06em;text-transform:uppercase}
.thanh .nn{display:inline-flex;border:1px solid rgba(212,175,55,.38);background:rgba(212,175,55,.12);border-radius:999px;padding:3px}
.thanh .nn a{color:var(--muc2);padding:6px 13px;border-radius:999px;font-weight:700;font-size:.84rem;text-decoration:none;white-space:nowrap}
.thanh .nn a[aria-current="true"]{background:var(--son);color:#fff}
.thanh .dat-nho{background:var(--do);color:#fff;border-radius:7px;padding:8px 14px;font-weight:700;font-size:.86rem;text-decoration:none;white-space:nowrap}
@media(max-width:560px){.thanh .dat-nho{display:none}.thanh .ten-nha small{display:none}.thanh .ten-nha b{font-size:1rem}}
/* ảnh trang: thẻ img có width/height nên PHẢI trả height về auto, kẻo ảnh bị kéo cao và cắt hai bên (bài học trang Trọn Đời 05/10/2026) */
img.trang,.canh .tr,.hero.mc .bia img,.tranh-nho img,.canh>img{height:auto}
img.trang,.canh .tr{aspect-ratio:1130/1596;object-fit:cover;object-position:top;width:100%}
.canh .tr{width:30%}
.canh>img{aspect-ratio:8/5;object-fit:cover;width:100%}
.tranh-nho img{height:100%}
.may-canh .anh img{aspect-ratio:1130/1596;object-fit:cover;object-position:top}
.hoi h3.cau{font-weight:500}
.lat a{display:block}
.may>.may-chu:only-child{border:1px dashed var(--ke);border-radius:26px;aspect-ratio:9/16;display:grid;place-items:center;padding:16px}
/* khối đặt, ghi chú, quà Tết, hỏi đáp */
.sg-note{max-width:560px;margin:14px auto 0;font-size:.92rem;color:var(--muc2);text-align:center}
#tbdNeo{margin-top:8px}
.tet{background:var(--kem2)}
.buoc.ba{grid-template-columns:repeat(3,minmax(0,1fr))}
.hd{display:grid;gap:10px;margin-top:22px;max-width:820px}
.hd details{background:var(--the);border:1px solid var(--ke);border-radius:12px;padding:14px 16px}
.hd summary{cursor:pointer;font-weight:700;color:var(--do);font-family:var(--serif);font-size:1.02rem}
.hd details p{margin-top:10px;color:var(--muc2)}
p.nhan-dien{margin-block:0}
@media(max-width:860px){.buoc.ba{grid-template-columns:minmax(0,1fr)}}