/* trondoi.css · cụm trang /tron-doi/ · 05/10/2026 */
/* Bố cục: sơn son thếp vàng. Mở bằng những câu khách muốn biết nhất, chứng minh bằng trang sách thật,
   rồi tới lá số làm mục lục, đường vận, bảng so sánh, song ngữ, phiếu đặt và ô trả tiền tại chỗ.
   Một giao diện duy nhất theo hệ màu thayungkhiem.vn, cố ý không làm bản tối. */
:root{
  --bg:#fbf6ec; --bg2:#f3e9d2; --ink:#1c1410; --ink-soft:#5b4636; --gold:#D4AF37; --gold-soft:#f6e3a8;
  --red:#6E0E0A; --red-2:#a32a2a; --son:#8C1F14; --line:#d8c79b; --card:#fffaf0; --hung:#24211C; --xam:#8a8378;
  --dem:#140c09; --dem2:#2a0f0b; --dem-chu:rgba(255,250,240,.86); --dem-nhat:rgba(255,250,240,.6); --dem-vien:rgba(212,175,55,.3);
  --serif:"Noto Serif",Georgia,"Times New Roman",serif; --sans:"Be Vietnam Pro","Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65}
h1,h2,h3{font-family:var(--serif);text-wrap:balance;margin:0}
p{margin:0}
button,input,select{font-family:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
img{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding-inline:18px}
section{padding-block:64px}
.toi{background:radial-gradient(ellipse at 20% 0%,#3a120d 0%,var(--dem) 55%);color:var(--dem-chu)}
.tren{font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:var(--red-2);font-weight:700}
.toi .tren{color:var(--gold)}
.h2{font-size:clamp(1.5rem,3.6vw,2.3rem);line-height:1.25;color:var(--red);margin:10px 0 14px;max-width:22ch}
.toi .h2{color:#fff}
.giua{text-align:center}.giua .h2,.giua .lead{margin-inline:auto}
.lead{color:var(--ink-soft);max-width:62ch;margin-bottom:34px;font-size:1.04rem}
.toi .lead{color:var(--dem-nhat)}
.nut{display:inline-block;background:linear-gradient(180deg,#F0D27A,#C79B26);color:#2e2203;font-weight:800;padding:16px 34px;border-radius:999px;border:0;font-size:1.05rem;text-decoration:none;box-shadow:0 10px 30px rgba(199,155,38,.35)}
.nut.ma{background:transparent;color:var(--gold-soft);border:1.5px solid var(--dem-vien);box-shadow:none}

/* thanh trên */
.thanh{position:sticky;top:0;z-index:30;background:rgba(20,12,9,.94);color:var(--gold-soft);border-bottom:1px solid var(--dem-vien)}
.thanh .wrap{display:flex;align-items:center;gap:12px;padding-block:9px;flex-wrap:wrap}
.thanh b{font-family:var(--serif);color:#fff;font-size:.98rem}
.thanh small{color:var(--dem-nhat);font-size:.74rem}
.nn{margin-left:auto;display:flex;background:rgba(255,255,255,.08);border-radius:999px;padding:3px}
.nn button{border:0;background:transparent;color:var(--gold-soft);padding:6px 14px;border-radius:999px;font-weight:700;font-size:.84rem}
.nn button[aria-pressed="true"]{background:var(--gold);color:#2e2203}

/* đầu trang */
.hero{padding-block:56px 64px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center}
.hero h1{font-size:clamp(2rem,5.2vw,3.5rem);line-height:1.14;color:#fff;margin:14px 0 18px}
.hero h1 em{font-style:normal;color:#F0D27A}
.hero p.mo{font-size:1.1rem;color:var(--dem-chu);max-width:52ch;margin-bottom:26px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.huy{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}
.huy span{border:1px solid var(--dem-vien);border-radius:999px;padding:6px 14px;font-size:.84rem;color:var(--gold-soft)}
.huy span.sn{background:var(--son);border-color:var(--son);color:#fff;font-weight:700}
.quat{position:relative;aspect-ratio:1/1.02;max-width:500px;margin-inline:auto;width:100%}
.quat img{position:absolute;width:62%;border-radius:6px;box-shadow:0 24px 60px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.1);aspect-ratio:1130/1596;object-fit:cover;object-position:top}
.quat img:nth-child(1){left:0;top:10%;transform:rotate(-8deg)}
.quat img:nth-child(2){right:0;top:4%;transform:rotate(7deg)}
.quat img:nth-child(3){left:19%;top:14%;transform:rotate(-1deg)}

/* dải con số */
.so{background:var(--son);color:#fff;padding-block:26px}
.so .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;text-align:center}
.so b{display:block;font-family:var(--serif);font-size:2.2rem;line-height:1.1;color:#F0D27A;font-variant-numeric:tabular-nums}
.so span{font-size:.86rem;color:rgba(255,255,255,.9)}

/* sáu chặng đời */
.chang{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:center;padding-block:30px}
.chang:nth-child(even) .tranh{order:2}
.tranh{border-radius:20px;overflow:hidden;box-shadow:0 22px 50px rgba(60,30,10,.22);line-height:0;outline:1px solid rgba(212,175,55,.55);outline-offset:-9px}
.tranh svg{width:100%;height:auto;display:block;aspect-ratio:8/5}
.chang .so-c{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--mau)}
.chang .so-c i{font-style:normal;width:36px;height:36px;border-radius:50%;background:var(--mau);color:#fff;display:grid;place-items:center;font-family:var(--serif);font-size:1.05rem;letter-spacing:0}
.chang h3{font-size:clamp(1.3rem,2.8vw,1.75rem);color:var(--red);margin:10px 0 8px;line-height:1.3}
.chang .cau{font-family:var(--serif);font-style:italic;font-size:1.16rem;color:var(--ink);border-left:3px solid var(--mau);padding-left:14px;margin:14px 0}
.chang ul{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:8px}
.chang li{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 13px;font-size:.94rem}
.chang li b{color:var(--mau);font-family:var(--serif)}
.chang .nhan{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;margin-top:14px}
.nguon{font-size:.84rem;color:var(--ink-soft);margin-top:18px}

/* trang thật */
.that{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.that figure{margin:0;min-width:0}
.that button{border:0;padding:0;background:none;display:block;width:100%;border-radius:8px;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.55)}
.that img{width:100%;aspect-ratio:1130/1596;object-fit:cover;object-position:top}
.that figcaption{margin-top:12px;font-size:.92rem;color:var(--dem-chu)}
.that figcaption b{display:block;font-family:var(--serif);color:var(--gold-soft);font-size:1.02rem}
.chu-nho{font-size:.82rem;color:var(--dem-nhat);margin-top:20px}

/* lá số làm mục lục */
.haicot{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:30px;align-items:start}
.ls{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;background:var(--line);padding:5px;border-radius:12px}
.ls button{border:0;background:var(--card);border-radius:7px;aspect-ratio:1/1;padding:4px;font-family:var(--serif);font-weight:700;color:var(--red);font-size:clamp(.66rem,1.6vw,.92rem);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;min-width:0;text-align:center;line-height:1.2}
.ls button small{font-family:var(--sans);font-weight:500;color:var(--ink-soft);font-size:.72em}
.ls button[aria-pressed="true"]{background:var(--son);color:#FBEEC3}
.ls button[aria-pressed="true"] small{color:var(--gold-soft)}
.ls .tam{grid-column:2/4;grid-row:2/4;background:var(--bg);border-radius:7px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:8px;font-size:.82rem;color:var(--ink-soft)}
.ls .tam b{font-family:var(--serif);color:var(--red);font-size:1.05rem}
.tt{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tt button{border:1px solid var(--line);border-radius:14px;padding:18px 6px;font-family:var(--serif);color:var(--red);font-weight:700;font-size:clamp(.82rem,2vw,1.08rem);display:grid;gap:8px;min-width:0;background:var(--card)}
.tt button small{font-family:var(--sans);font-weight:500;font-size:.72rem;color:var(--ink-soft)}
.tt button span{display:block;border-top:1px dashed var(--line);padding-top:8px;font-size:.8em}
.tt button[aria-pressed="true"]{background:var(--son);color:#FBEEC3;border-color:var(--son)}
.tt button[aria-pressed="true"] small{color:var(--gold-soft)}
.the{border-left:4px solid var(--son);background:var(--card);border-radius:0 14px 14px 0;padding:20px 22px}
.the .ch{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--red-2);font-weight:700}
.the h3{color:var(--red);font-size:1.25rem;margin:4px 0 8px}
.the p{color:var(--ink-soft)}
.the ul{margin:12px 0 0;padding-left:18px;font-size:.94rem;display:grid;gap:4px}

/* đường vận */
.vt-cuon{overflow-x:auto;padding-bottom:8px}
.vt-hang{display:flex;gap:8px;align-items:flex-end;min-width:640px;height:210px;border-bottom:1px solid var(--dem-vien)}
.vt-hang button{flex:1;border:0;background:transparent;color:var(--dem-nhat);display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:0;height:100%;font-size:.8rem}
.vt-hang .cot{border-radius:8px 8px 0 0;background:linear-gradient(180deg,#E5503C,#B3121B)}
.vt-hang .thu .cot{background:var(--xam)}
.vt-hang button[aria-pressed="true"]{color:#fff;font-weight:700}
.vt-hang button[aria-pressed="true"] .cot{outline:2px solid var(--gold);outline-offset:2px}
.vt-chu{display:flex;gap:16px;flex-wrap:wrap;font-size:.8rem;color:var(--dem-nhat);margin-top:10px}
.vt-chu i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.vt-the{margin-top:20px;border:1px solid var(--dem-vien);border-radius:14px;padding:20px 22px;background:rgba(255,255,255,.04);max-width:780px}
.vt-the h3{color:var(--gold-soft);font-size:1.15rem;margin-bottom:6px}
.vt-the ul{margin:8px 0 0;padding-left:18px;display:grid;gap:4px;font-size:.95rem}

/* ba quyển */
.bq{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.bq article{background:var(--card);border:1px solid var(--line);border-top:5px solid var(--son);border-radius:14px;padding:22px;min-width:0}
.bq .q{font-size:.74rem;letter-spacing:.14em;color:var(--son);text-transform:uppercase;font-weight:700}
.bq h3{color:var(--red);font-size:1.18rem;margin:4px 0 10px}
.bq ol{margin:0;padding-left:20px;display:grid;gap:6px;font-size:.94rem}

/* so sánh */
.ss-cuon{overflow-x:auto}
.ss{width:100%;min-width:640px;border-collapse:collapse;font-size:.94rem}
.ss th,.ss td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.ss thead th{font-family:var(--serif);color:var(--ink-soft);font-size:.92rem}
.ss th[scope=row]{color:var(--ink-soft);font-weight:600;width:22%}
.ss td{color:var(--xam)}
.ss .ta{background:var(--red);color:#fff;font-weight:600}
.ss thead .ta{color:#F0D27A;border-radius:12px 12px 0 0;font-size:1rem}
.ss tbody tr:last-child .ta{border-radius:0 0 12px 12px}

/* song ngữ */
.sn{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--dem-vien);border-radius:16px;overflow:hidden;max-width:900px}
.sn div{padding:24px;min-width:0}
.sn div+div{border-left:1px solid var(--dem-vien);background:rgba(255,255,255,.04)}
.sn .n{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:8px}
.sn p{font-family:var(--serif);font-size:1.02rem;color:#fff}

/* Thầy, cảm nhận */
.thay{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;align-items:start}
.thay blockquote{margin:0;font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--red);border-left:4px solid var(--gold);padding-left:18px}
.thay cite{display:block;margin-top:12px;font-style:normal;font-family:var(--sans);font-size:.9rem;color:var(--ink-soft)}
.cho-cn{border:2px dashed var(--line);border-radius:14px;padding:20px;color:var(--ink-soft);font-size:.92rem}
.cho-cn b{color:var(--red);font-family:var(--serif);display:block;margin-bottom:4px}

/* đặt cuốn */
.dat-luoi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:24px;align-items:start}
.gia{background:var(--red);color:var(--gold-soft);border-radius:18px;padding:28px}
.gia .ten{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:#F0D27A;font-weight:700}
.gia .gs{font-family:var(--serif);font-size:3.6rem;color:#fff;line-height:1.05;margin:8px 0 2px}
.gia .gs small{font-size:1.2rem;color:#F0D27A}
.gia .quy{font-size:.88rem}
.gia ul{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:8px}
.gia li{padding-left:24px;position:relative;font-size:.96rem;color:#fff}
.gia li::before{content:"✦";position:absolute;left:0;color:#F0D27A}
.phieu{background:#fffdf7;border:2px solid rgba(212,175,55,.55);border-radius:18px;padding:22px 20px}
.phieu h3{font-family:var(--sans);font-size:1.05rem;color:#4A2E14;font-weight:800;margin-bottom:4px}
.phieu .phu{font-size:.92rem;color:#6B5233;margin-bottom:14px}
.o{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;min-width:0}
.o label,.o .lb{font-size:.82rem;font-weight:700;color:#5A431F}
.o input:not([type=radio]),.o select{width:100%;font-size:1rem;padding:10px 11px;border:1.5px solid #D9C89A;border-radius:10px;background:#fff;color:#33240F;min-width:0}
.ba{display:grid;grid-template-columns:1fr 1.2fr 1.25fr;gap:8px}
.hai{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gt{display:flex;gap:8px}
.gt label{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;border:1.5px solid #D9C89A;border-radius:10px;padding:9px 6px;background:#fff;font-size:.95rem;color:#33240F}
.gt input{accent-color:#B3121B;width:18px;height:18px;margin:0}
.gt label:has(input:checked){border-color:#B3121B;background:#FFF4F3;color:#8E0E16}
.mach{font-size:.85rem;color:#6B5233;margin:4px 0 0}
.nut-do{width:100%;margin-top:14px;border:0;font-weight:800;font-size:1.06rem;padding:15px 18px;border-radius:999px;color:#fff;background:linear-gradient(180deg,#C6212C,#93101A);box-shadow:0 8px 20px rgba(150,20,30,.28)}
.nut-do span{display:block;font-weight:600;font-size:.86rem;opacity:.94;margin-top:2px}
.loi{margin-top:10px;padding:10px 12px;border-radius:10px;background:#f0efed;border:1.5px solid var(--xam);color:var(--hung);font-size:.92rem}
.buoc{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:34px}
.buoc div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;min-width:0}
.buoc b{font-family:var(--serif);color:var(--red);display:block;margin-bottom:4px}
.buoc p{font-size:.93rem;color:var(--ink-soft)}

/* ô trả tiền, xem ảnh lớn */
.phu-man{position:fixed;inset:0;background:rgba(20,12,6,.8);z-index:50;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:calc(18px + env(safe-area-inset-top,0px)) 14px 24px}
.hop{background:#fffdf7;color:var(--ink);border-radius:18px;max-width:480px;width:100%;padding:22px 20px;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.hop.anh{max-width:760px;padding:10px;background:#fff}
.hop .dong{position:absolute;top:8px;right:10px;border:0;background:rgba(255,255,255,.9);border-radius:50%;width:36px;height:36px;font-size:1.4rem;color:var(--ink-soft);line-height:1;z-index:2}
.hop h3{color:var(--red);font-size:1.2rem;margin-bottom:4px;padding-right:34px}
.hop .mp{display:inline-block;background:var(--hung);color:#fff;border-radius:6px;font-size:.72rem;padding:2px 8px;margin-bottom:12px}
.don{background:var(--bg2);border-radius:12px;padding:12px 14px;font-size:.92rem;margin-bottom:14px}
.don b{color:var(--red)}
.pm{display:grid;gap:8px;margin:6px 0 4px}
.pm label{display:flex;gap:10px;align-items:flex-start;border:1.5px solid #D9C89A;border-radius:12px;padding:11px 12px;cursor:pointer;font-size:.92rem}
.pm label:has(input:checked){border-color:#B3121B;background:#FFF4F3}
.pm input{accent-color:#B3121B;margin-top:4px}
.pm b{display:block;color:var(--red)}
.qr{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:center}
.qr .o-qr{aspect-ratio:1/1;border:2px dashed var(--line);border-radius:12px;display:grid;place-items:center;text-align:center;font-size:.78rem;color:var(--ink-soft);padding:10px;background:repeating-linear-gradient(45deg,#fff,#fff 6px,#f3e9d2 6px,#f3e9d2 12px)}
.qr dl{margin:0;display:grid;gap:6px;font-size:.92rem}
.qr dt{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.qr dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;word-break:break-word}
.cho{font-size:.88rem;color:var(--ink-soft);margin-top:12px;text-align:center}
.xong{text-align:center}
.xong .dau{width:64px;height:64px;border-radius:50%;background:var(--son);color:#FBEEC3;display:grid;place-items:center;font-size:2rem;margin:4px auto 12px;font-family:var(--serif)}
.nut-phu{width:100%;margin-top:10px;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:11px;font-weight:700;color:var(--ink-soft)}

.faq{max-width:800px;display:grid;gap:10px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 18px}
.faq summary{font-family:var(--serif);font-weight:700;color:var(--red);cursor:pointer}
.faq p{margin-top:8px;color:var(--ink-soft);font-size:.95rem}
.chan{background:var(--dem);color:var(--dem-nhat);font-size:.8rem;text-align:center;padding:26px 18px}

/* Đầu trang theo màu nav, chân trang theo màu footer của thayungkhiem.vn */
.thanh{background:rgba(251,246,236,.96);color:var(--ink-soft);border-bottom:1px solid var(--line);box-shadow:0 1px 8px rgba(60,40,10,.05)}
.thanh b{color:var(--red)}
.thanh small{color:#b5946a}
.dau-an{width:28px;height:28px;border-radius:50%;flex:none;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)}
.nn{background:rgba(212,175,55,.12);border:1px solid rgba(212,175,55,.38)}
.nn button{color:var(--ink-soft)}
.nn button[aria-pressed="true"]{background:#8C1F14;color:#fff}
.hero{background:linear-gradient(180deg,#fbf6ec 0%,#f6ecd4 100%);color:var(--ink);border-bottom:2px solid var(--gold)}
.hero h1{color:var(--red)}
.hero h1 em{color:#a8741c}
.hero p.mo{color:var(--ink-soft)}
.hero .nut{background:var(--red);color:#fff;box-shadow:0 3px 10px rgba(110,14,10,.25)}
.hero .nut.ma{background:rgba(212,175,55,.12);color:var(--ink-soft);border:1px solid rgba(212,175,55,.5);box-shadow:none}
.hero .huy span{background:rgba(212,175,55,.12);border:1px solid rgba(212,175,55,.38);color:var(--ink-soft)}
.hero .huy span.sn{background:#8C1F14;border-color:#8C1F14;color:#fff}
.hero .quat img{box-shadow:0 20px 46px rgba(60,40,10,.28);border:1px solid var(--line)}
.chan{background:#6E0E0A;color:#F5EFE3;border-top:3px solid #D4AF37;padding:30px 18px 24px}
.chan .ban-quyen{margin-top:12px;color:#cdb98a;font-size:.75rem;letter-spacing:3px}
@media(max-width:860px){.chang{grid-template-columns:1fr;gap:18px}.chang:nth-child(even) .tranh{order:0}.hero .wrap,.haicot,.dat-luoi,.thay{grid-template-columns:1fr;gap:24px}.that{grid-template-columns:1fr 1fr}.sn{grid-template-columns:1fr}.sn div+div{border-left:0;border-top:1px solid var(--dem-vien)}section{padding-block:46px}.nn{margin-left:0}}
@media(max-width:480px){.that{grid-template-columns:1fr}.qr{grid-template-columns:1fr}.qr .o-qr{max-width:170px;margin:0 auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.thanh a.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;min-width:0}
.thanh .ten-nha{display:grid;line-height:1.15}
.thanh .ten-nha b{font-family:var(--serif);color:var(--red);font-size:1rem}
.thanh .ten-nha small{color:#b5946a;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}
.thanh .dat{margin-left:8px;background:var(--red);color:#fff;border-radius:7px;padding:8px 14px;font-weight:700;font-size:.86rem;text-decoration:none;box-shadow:0 3px 10px rgba(110,14,10,.25);white-space:nowrap}
.nn a{color:var(--ink-soft);padding:6px 14px;border-radius:999px;font-weight:700;font-size:.84rem;text-decoration:none}
.nn a[aria-current="true"]{background:#8C1F14;color:#fff}
.vun{font-size:.84rem;color:var(--ink-soft);padding-block:12px 0}
.vun a{color:var(--red-2)}
.tranh img{width:100%;height:auto;display:block;aspect-ratio:8/5}
#uk-camnhan:empty{display:none}
#thay .wrap{display:grid;gap:26px}
.loi-thay{margin:0;max-width:760px;font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--red);border-left:4px solid var(--gold);padding-left:18px}
.loi-thay cite{display:block;margin-top:12px;font-style:normal;font-family:var(--sans);font-size:.9rem;color:var(--ink-soft)}
.tbd-an{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cung-cum{font-size:.95rem;color:var(--ink-soft);margin-top:26px}
.cung-cum a{color:var(--red-2);font-weight:600}
/* trang tổng */
.hai-cuon{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.cuon{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:grid;min-width:0}
.cuon img{width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;display:block}
.cuon .trong{padding:22px;display:grid;gap:10px;align-content:start}
.cuon h2{color:var(--red);font-size:1.4rem}
.cuon ul{margin:0;padding-left:18px;display:grid;gap:4px;font-size:.95rem}
.cuon .gia-dong{font-family:var(--serif);color:var(--red);font-size:1.15rem;font-weight:700}
.cuon .nut{justify-self:start;background:var(--red);color:#fff;box-shadow:0 3px 10px rgba(110,14,10,.25);padding:12px 26px;font-size:1rem}
@media(max-width:560px){.thanh .dat{display:none}}

/* 05/10/2026: the img mang height="1410" nen aspect-ratio bi bo qua, anh cao 1410px va bi cat hai ben. Tra chieu cao ve auto de hien TRON trang. */
.quat img,.that img{height:auto}
/* 05/10/2026: logo that cua nha (cung tep voi nav.html) thay cho dia vang */
.thanh .logo-anh{width:36px;height:36px;object-fit:contain;flex:none}