/* Web Trường Tiểu học Tô Hiệu — bố cục theo phong cách mariecurieschools.edu.vn (menu đỏ + trình chiếu, thẻ tin, chân trang tối) */
:root{
  --do:#b71c2b; --do2:#d23544; --do3:#9e1824; --xanh:#1d3c8f; --xanh2:#2c56b8; --vang:#e3a41c;
  --nen:#efefef; --chu:#333; --xam:#878e93;
  --khung:1200px; --menu-rong:380px;
  --f-chu:'Roboto',Arial,sans-serif; --f-hep:'Roboto Condensed','Roboto',Arial,sans-serif; --f-menu:'Cormorant SC','Times New Roman',serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--nen);color:var(--chu);font:15px/1.6 var(--f-chu);-webkit-text-size-adjust:100%}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit}
.khung{max-width:var(--khung);margin:0 auto;padding-inline:16px}

/* ---------- ĐẦU TRANG ---------- */
.dau{background:var(--nen)}
.dau-trong{display:flex;align-items:center;gap:18px;padding-block:14px;min-height:112px}
.logo{display:flex;align-items:center;gap:14px;min-width:0}
.logo img{width:86px;height:86px;flex:0 0 auto;filter:drop-shadow(0 1px 3px rgba(0,0,0,.25))}
.logo-chu{display:flex;flex-direction:column;min-width:0}
.logo-chu small{font:700 13px/1.2 var(--f-hep);color:var(--xanh);letter-spacing:1.5px;text-transform:uppercase}
.logo-chu b{font:700 34px/1.05 var(--f-hep);color:var(--do);text-transform:uppercase;letter-spacing:.5px}
.logo-chu span{font:500 13.5px/1.35 var(--f-chu);color:#555;margin-top:3px}
.khau-hieu{margin-left:auto;max-width:360px;text-align:right;border-left:3px solid var(--do);padding:4px 0 4px 16px;font:italic 600 17px/1.35 'Cormorant SC','Times New Roman',serif;color:var(--xanh);text-transform:none}
.khau-hieu i{display:block;font:400 12px var(--f-chu);color:#777;margin-top:4px;font-style:normal}
.nut-menu{display:none;margin-left:auto;background:var(--do);color:#fff;border:0;border-radius:4px;width:46px;height:42px;font-size:22px;line-height:1}
.doi-ngu{display:inline-flex;border:1px solid var(--do2);border-radius:16px;overflow:hidden;flex:0 0 auto;background:#fff}
.doi-ngu a{padding:4px 11px;font:700 12.5px/18px var(--f-chu);color:var(--do);cursor:pointer;letter-spacing:.4px}
.doi-ngu a.dang{background:var(--do2);color:#fff}

/* ---------- MENU ĐỎ + TRÌNH CHIẾU ---------- */
.dinh{display:flex;align-items:stretch;background:#ddd}
.menu{flex:0 0 var(--menu-rong);display:flex;flex-direction:column;background:var(--do2)}
.menu a{position:relative;flex:1;display:flex;align-items:center;justify-content:flex-start;gap:14px;min-height:56px;padding:6px 26px;
  color:#fff;font:700 18px/1.2 var(--f-menu);letter-spacing:.6px;text-transform:uppercase;
  background:linear-gradient(#c8283a,#c02536);border-bottom:1px solid rgba(255,255,255,.14)}
.menu a:nth-child(even){background:linear-gradient(#d23544,#c92f3f)}
.menu a svg{width:22px;height:22px;fill:#fff;flex:0 0 auto}
.menu a:hover,.menu a.dang-xem{background:var(--do3)}
.menu a.dang-xem::after{content:"";position:absolute;right:-1px;top:50%;transform:translateY(-50%);border:10px solid transparent;border-left:0;border-right-color:#222;z-index:2}
.trinh-chieu{position:relative;flex:1;min-width:0;overflow:hidden;background:#1a1a1a;aspect-ratio:2/1;max-height:640px}
.tc-anh{position:absolute;inset:0;opacity:0;transition:opacity .9s;cursor:zoom-in}
.tc-anh.hien{opacity:1;z-index:1}
.tc-anh .tc-nen{position:absolute;inset:-6%;width:112%;height:112%;max-width:none;object-fit:cover;filter:blur(26px) brightness(.62) saturate(1.1)}
.tc-anh .tc-chinh{position:relative;z-index:1;width:100%;height:100%;object-fit:contain}
.tc-mui{position:absolute;top:50%;z-index:3;width:44px;height:44px;margin-top:-22px;border:0;border-radius:50%;background:rgba(0,0,0,.35);color:#fff;display:grid;place-items:center;padding:0;opacity:.85}
.tc-mui:hover{background:var(--do2);opacity:1}
.tc-mui svg{width:24px;height:24px;fill:currentColor}
.tc-truoc{left:12px}.tc-sau{right:12px}
.tc-goi-y{position:absolute;right:14px;top:12px;z-index:3;display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.45);color:#fff;border-radius:14px;padding:3px 11px;font:500 12px var(--f-chu);pointer-events:none}
.tc-goi-y svg{width:14px;height:14px;fill:#fff}
.tc-cham{position:absolute;left:50%;bottom:12px;z-index:3;transform:translateX(-50%);display:flex;gap:5px;flex-wrap:wrap;justify-content:center;max-width:90%}
.tc-cham button{width:16px;height:4px;border:0;padding:0;background:rgba(255,255,255,.7);box-shadow:0 0 2px rgba(0,0,0,.4)}
.tc-cham button.hien{background:var(--do2)}

/* ---------- KHỐI NỘI DUNG ---------- */
.noi-dung{padding-block:34px 60px}
.muc{margin-bottom:46px}
.muc-tieu-de{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 18px;border-bottom:2px solid #ddd}
.muc-tieu-de h2{margin:0 0 -2px;padding-bottom:8px;border-bottom:2px solid var(--do2);color:var(--do);font:700 22px/1.2 var(--f-hep);text-transform:uppercase}
.muc-tieu-de a{color:var(--do);font:700 13px var(--f-hep);text-transform:uppercase;white-space:nowrap}
.muc-tieu-de a:hover{text-decoration:underline}
.the-do{position:relative;border-bottom:2px solid var(--do2);margin:0 0 22px}
.the-do h1,.the-do h2{display:inline-block;position:relative;margin:0;background:var(--do2);color:#fff;
  font:700 17px/1 var(--f-hep);text-transform:uppercase;padding:13px 40px 11px 14px;clip-path:polygon(0 0,calc(100% - 26px) 0,100% 100%,0 100%)}
.the{background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.22)}
.nut-vien{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--do);color:var(--do);border-radius:3px;padding:6px 10px 6px 12px;font:500 14px var(--f-chu);background:#fff}
.nut-vien:hover{background:var(--do);color:#fff}
.nut-vien i,.xem-them i{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--do);color:#fff;font:700 11px/1 Arial;font-style:normal}
.nut-vien:hover i{background:#fff;color:var(--do)}
.nut-do{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--do2);color:#fff;border:0;border-radius:4px;padding:11px 18px;font:700 15px var(--f-hep);text-transform:uppercase;letter-spacing:.3px}
.nut-do:hover{background:var(--do3)}
.nut-sang{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#fff;color:var(--do);border:1px solid var(--do2);border-radius:4px;padding:9px 16px;font:700 14px var(--f-hep);text-transform:uppercase}
.nut-sang:hover{background:#fff2f3}
.nut-sang svg{width:18px;height:18px;fill:currentColor}

/* hàng tin nổi bật + cột phải */
.hang-dau{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:26px;margin-bottom:46px;align-items:start}
.noi-bat{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:380px}
.nb-anh{position:relative;overflow:hidden;background:#222}
.nb-anh a{position:absolute;inset:0}
.nb-anh .nen-mo{position:absolute;inset:-8%;width:116%;height:116%;max-width:none;object-fit:cover;filter:blur(18px) brightness(.6)}
.nb-anh .anh-chinh{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1}
.nb-anh .nb-phu{position:absolute;z-index:2;left:0;right:0;bottom:0;background:rgba(40,40,40,.74);color:#fff;text-align:center;padding:12px 16px;font:500 14.5px/1.35 var(--f-chu);text-transform:uppercase;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.huy-hieu{position:absolute;left:8px;top:8px;z-index:3;background:rgba(183,28,43,.92);color:#fff;text-align:center;padding:6px 10px;border-radius:2px;min-width:62px}
.huy-hieu b{display:block;font:700 26px/1.1 var(--f-chu)}
.huy-hieu span{font-size:11px}
.nb-trang{position:absolute;right:10px;top:10px;z-index:3;display:flex;gap:4px}
.nb-trang button{width:22px;height:22px;border:0;background:#e4e4e4;color:#666;font:12px/22px var(--f-chu);padding:0}
.nb-trang button.hien{background:var(--do);color:#fff}
.nb-chu{padding:26px 18px 70px;position:relative}
.nb-chu h3{margin:0 0 8px;color:var(--do);font:700 18px/1.4 var(--f-chu);text-transform:uppercase}
.nb-chu p{margin:8px 0 0;color:#444;display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-line}
.nb-chu .nut-vien{position:absolute;left:18px;bottom:22px}
.ngay{font-style:italic;color:#9a9a9a;font-size:12px}
.hop{margin-bottom:18px}
.hop-dau{background:var(--do2);color:#fff;text-align:center;font:700 16px var(--f-chu);padding:9px;border-radius:5px 5px 0 0;text-transform:uppercase}
.hop-than{padding:12px 14px}
.dong-lh{display:flex;align-items:flex-start;gap:9px;padding:5px 0;font-size:14.5px;line-height:1.45}
.dong-lh a:hover{color:var(--do);text-decoration:underline}
.vong{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--do2)}
.vong.xanh{background:var(--xanh2)}
.vong svg{width:14px;height:14px;fill:#fff}
.tb-dong{display:block;padding:8px 0;border-top:1px dashed #e2e2e2}
.tb-dong:first-child{border-top:0;padding-top:2px}
.tb-dong b{display:block;font:700 13.5px/1.4 var(--f-hep);color:#222;text-transform:uppercase}
.tb-dong:hover b{color:var(--do)}
.hop-nhac{display:flex;align-items:center;gap:12px}
.hop-nhac button{flex:0 0 46px;height:46px;border-radius:50%;border:0;background:var(--do2);display:grid;place-items:center}
.hop-nhac button svg{width:22px;height:22px;fill:#fff}
.hop-nhac b{display:block;font:700 14.5px/1.35 var(--f-chu);color:var(--xanh)}
.hop-nhac small{color:#777;font-size:12.5px}

/* cụm 1 thẻ lớn + 4 thẻ nhỏ */
.cum{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:16px}
.cum-nho{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.the-lon{display:flex;flex-direction:column}
.the-lon .anh{position:relative;aspect-ratio:16/10;overflow:hidden;background:#ddd}
.the-lon .anh img,.the-nho .anh img,.dong-tin .anh img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.the-lon:hover .anh img,.the-nho:hover .anh img,.dong-tin:hover .anh img,.the-album:hover img{transform:scale(1.04)}
.the-lon .than{display:flex;flex:1}
.lich{flex:0 0 50px;background:#f1f1f1;padding-top:12px;display:flex;justify-content:center}
.lich div{width:36px;text-align:center;align-self:flex-start}
.lich span{display:block;background:var(--do);color:#fff;font:700 9px/1.25 var(--f-chu);padding:3px 0;border-radius:3px 3px 0 0;text-transform:uppercase}
.lich b{display:block;border:1.5px solid var(--do);border-top:0;color:var(--do);font:700 17px/26px var(--f-chu);background:#fff;border-radius:0 0 3px 3px}
.the-lon .chu{padding:12px 14px 16px;flex:1;display:flex;flex-direction:column}
.the-lon h3{margin:0;color:var(--do);font:700 15px/1.45 var(--f-chu);text-transform:uppercase;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.the-lon p{margin:6px 0 12px;font-size:13.5px;color:#444;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.the-lon .nut-vien{margin-top:auto;align-self:flex-end}
.the-nho{display:grid;grid-template-columns:45% 55%;min-height:200px}
.the-nho .anh{overflow:hidden;background:#ddd;position:relative}
.the-nho .anh img{position:absolute;inset:0}
.the-nho .chu{position:relative;padding:10px 10px 36px 12px}
.the-nho .chu::before{content:"";position:absolute;left:-7px;top:18px;border:7px solid transparent;border-left:0;border-right-color:#fff}
.the-nho h3{margin:0 0 2px;font:700 14px/1.4 var(--f-hep);color:#333;text-transform:uppercase;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.the-nho p{margin:3px 0 0;font-size:12.5px;line-height:1.5;color:#555;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.xem-them{position:absolute;right:12px;bottom:10px;display:inline-flex;align-items:center;gap:6px;color:var(--do);font:700 12.5px var(--f-hep)}
.the-nho:hover h3,.the-lon:hover h3{color:var(--do3)}
.nhan-anh{position:absolute;left:8px;bottom:8px;z-index:2;background:rgba(0,0,0,.62);color:#fff;font:500 12px var(--f-chu);padding:2px 8px;border-radius:10px}
.nhan-video{position:absolute;inset:0;z-index:2;display:grid;place-items:center;pointer-events:none}
.nhan-video span{width:54px;height:54px;border-radius:50%;background:rgba(183,28,43,.9);display:grid;place-items:center;box-shadow:0 0 0 4px rgba(255,255,255,.6)}
.nhan-video span::before{content:"";border:11px solid transparent;border-right:0;border-left:17px solid #fff;margin-left:5px}
.anh-tron{background:linear-gradient(135deg,#1d3c8f,#b71c2b)!important;display:grid;place-items:center}
.anh-tron img{width:62%!important;height:auto!important;position:static!important;object-fit:contain!important;transform:none!important}

/* danh sách tin */
.dong-tin{display:grid;grid-template-columns:200px 1fr;gap:18px;padding:18px 6px;border-bottom:1px dashed #9ab4c8}
.dong-tin:last-child{border-bottom:0}
.dong-tin .anh{position:relative;aspect-ratio:3/2;overflow:hidden;background:#ddd;align-self:start}
.dong-tin h3{margin:0 0 4px;color:var(--do2);font:500 15.5px/1.4 var(--f-chu);text-transform:uppercase}
.dong-tin p{margin:4px 0 0;font-size:14px;color:#333;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dong-tin:hover h3{text-decoration:underline}
.nhan-loai{display:inline-block;font:700 10.5px/1 var(--f-chu);color:#fff;background:var(--xanh2);border-radius:3px;padding:3px 6px;margin-right:6px;vertical-align:2px;letter-spacing:.3px;text-transform:uppercase}
.nhan-loai.tb{background:var(--do2)}
.nhan-loai.vd{background:#6b3fa0}
.tab-muc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.tab-muc a,.tab-muc button{border:1px solid #d5d5d5;background:#fff;border-radius:18px;padding:5px 14px;font:500 13.5px var(--f-chu);color:#444}
.tab-muc .dang-xem,.tab-muc a:hover,.tab-muc button:hover{background:var(--do2);border-color:var(--do2);color:#fff}
.tab-muc small{opacity:.75}
.giua{text-align:center;margin-top:24px}
.nap{padding:30px;text-align:center;color:#888}
.nap::before{content:"";display:inline-block;width:18px;height:18px;border:3px solid #ddd;border-top-color:var(--do2);border-radius:50%;animation:xoay .8s linear infinite;vertical-align:-4px;margin-right:10px}
.nap.het::before{display:none}
@keyframes xoay{to{transform:rotate(360deg)}}
.bao-loi{background:#fff4f4;border:1px solid #f1c6ca;color:#8a1c26;padding:14px 16px;border-radius:4px}
.ghi-nho{font-size:13px;color:#777;margin:10px 0 0}
.ghi-dich{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;background:#f4f7fb;border:1px solid #d6e2f0;color:#35506b;border-radius:4px;padding:8px 12px;font-size:13.5px;margin:0 0 14px}

/* bài viết Fanpage */
.bai h1{margin:0 0 6px;color:var(--do2);font:700 24px/1.35 var(--f-hep);text-transform:uppercase;border-bottom:1px solid #d9d9d9;padding-bottom:8px}
.bai-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;color:#888;font-size:13px;margin-bottom:16px}
.bai-meta span{display:inline-flex;align-items:center;gap:5px}
.bai-meta svg{width:15px;height:15px;fill:#aaa}
.bai-noi-dung{font-size:16px;line-height:1.75;color:#111;white-space:pre-line;overflow-wrap:anywhere}
.bai-noi-dung .the-tag{color:var(--xanh2)}
.bai-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin:18px 0}
.bai-luoi button{position:relative;border:0;padding:0;background:#222;aspect-ratio:1;overflow:hidden}
.bai-luoi button.ngang{grid-column:span 2;aspect-ratio:2/1}
.bai-luoi img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.bai-luoi button:hover img{transform:scale(1.04)}
.khung-fb{max-width:560px;margin:18px auto;background:#000;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.khung-fb iframe{display:block;width:100%;border:0}
.chia-se{border:1px solid #dcdcdc;border-left:4px solid var(--xanh2);background:#fafbfd;padding:12px 16px;margin:16px 0;border-radius:3px}
.chia-se b{color:var(--xanh);font-size:14px}
.chia-se p{white-space:pre-line;margin:6px 0 0;font-size:15px}
.nguon-bai{margin-top:26px;font-size:13px;color:#777;border-top:1px solid #ddd;padding-top:10px}
.nguon-bai a{color:var(--do);text-decoration:underline}

.co-vn{display:inline-block;width:1.3em;height:.87em;vertical-align:-.08em;margin:0 .12em;border-radius:1px;box-shadow:0 0 0 .5px rgba(0,0,0,.15);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23da251d'/%3E%3Cpolygon points='15,4 16.76,9.43 22.46,9.43 17.85,12.77 19.61,18.2 15,14.85 10.39,18.2 12.15,12.77 7.54,9.43 13.24,9.43' fill='%23ffff00'/%3E%3C/svg%3E") center/cover no-repeat}

/* album */
.luoi-album{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.the-album{display:flex;flex-direction:column}
.the-album .anh{position:relative;aspect-ratio:3/2;overflow:hidden;background:#ddd}
.the-album img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.the-album .chu{padding:12px 14px 14px;display:flex;gap:12px;flex:1}
.the-album h3{margin:0;color:var(--do);font:700 15px/1.4 var(--f-chu);text-transform:uppercase}
.the-album p{margin:4px 0 0;font-size:13px;color:#555;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.album-dau{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 20px;align-items:end;margin-bottom:16px}
.album-dau p{margin:6px 0 0;color:#444}
.album-nut{display:flex;flex-wrap:wrap;gap:8px}
/* lưới ảnh giữ nguyên tỷ lệ (không cắt): mỗi ô rộng theo tỷ lệ ảnh, hàng tự dàn đều */
.luoi-anh{display:flex;flex-wrap:wrap;gap:6px}
.luoi-anh::after{content:"";flex-grow:999999}
.luoi-anh .o{position:relative;flex-grow:var(--r);flex-basis:calc(var(--r) * 210px);border:0;padding:0;background:#ddd;overflow:hidden;cursor:zoom-in}
.luoi-anh .o i{display:block;padding-bottom:calc(100% / var(--r))}
.luoi-anh .o img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s,opacity .3s}
.luoi-anh .o:hover img{transform:scale(1.04)}
.o-dem{position:absolute;left:6px;bottom:6px;z-index:2;display:flex;gap:4px;pointer-events:none}
.o-dem span{display:inline-flex;align-items:center;gap:3px;background:rgba(0,0,0,.6);color:#fff;border-radius:10px;padding:1px 7px;font:500 11.5px var(--f-chu)}
.o-dem svg{width:12px;height:12px;fill:#fff}
.o-dem .tim svg{fill:#ff5a6e}

/* video */
.luoi-vt{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.luoi-vt.doc{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.the-vt{display:flex;flex-direction:column;border:0;padding:0;text-align:left;font:inherit;color:inherit;cursor:pointer;background:#fff}
.the-vt .anh{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#222}
.the-vt.doc .anh{aspect-ratio:9/16}
.the-vt .anh img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.the-vt:hover .anh img{transform:scale(1.05)}
.the-vt .chu{display:block;padding:10px 12px 12px}
.the-vt b{color:var(--do);font:700 14.5px/1.4 var(--f-chu);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.the-vt small{display:block;color:#888;font-size:12px;margin-top:3px}
.nhan-nen{position:absolute;left:8px;top:8px;z-index:2;background:var(--do2);color:#fff;font:700 11px/1 var(--f-hep);text-transform:uppercase;padding:4px 7px;border-radius:3px;letter-spacing:.4px}
.nhan-nen.drive{background:#1a73e8}
.nhan-nen.fb{background:#1877f2}
.nhan-gio{position:absolute;right:8px;bottom:8px;z-index:2;background:rgba(0,0,0,.72);color:#fff;font:500 12px var(--f-chu);padding:1px 7px;border-radius:3px}
.nhom-vt{margin:0 0 34px}
.nhom-vt h3{margin:0 0 12px;font:700 17px var(--f-hep);color:var(--xanh);text-transform:uppercase}

/* giới thiệu */
.gt-bia{margin:0 0 22px;cursor:zoom-in}
.gt-bia img{width:100%;height:auto;box-shadow:0 1px 6px rgba(0,0,0,.25)}
.gt-luoi{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:24px;align-items:start}
.doan{padding:20px 22px;margin-bottom:22px}
.doan h3{margin:0 0 8px;color:var(--do);font:700 18px var(--f-hep);text-transform:uppercase}
.doan p{margin:0 0 10px}
.doan ul{margin:0;padding-left:20px}
.doan li{margin:5px 0}
.so-lieu{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 24px}
.so-lieu div{background:#fff;text-align:center;padding:16px 8px;box-shadow:0 1px 6px rgba(0,0,0,.15);border-bottom:3px solid var(--do2)}
.so-lieu b{display:block;color:var(--do);font:700 30px/1.1 var(--f-hep)}
.so-lieu span{font-size:12.5px;color:#555}
.trich{margin:0 0 22px;padding:18px 24px;background:#fff;border-left:5px solid var(--xanh);font:italic 600 21px/1.45 'Cormorant SC','Times New Roman',serif;color:var(--xanh);box-shadow:0 1px 6px rgba(0,0,0,.12)}
.ban-do{aspect-ratio:4/3;border:0;width:100%;display:block}
.luoi-mxh{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
.luoi-mxh .the{padding:16px}
.luoi-mxh h3{margin:0 0 10px;color:var(--do);font:700 17px var(--f-hep);text-transform:uppercase}
.fb-khung{width:100%;height:720px;border:0;display:block;max-width:500px;margin:0 auto}

/* ---------- CHÂN TRANG ---------- */
.chan{background:#1b1e21;color:#e8e8e8;padding-block:28px 0;font-size:14px;line-height:1.6}
.chan-trong{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:30px}
.chan h2{margin:0 0 12px;font:700 25px/1.2 var(--f-menu);color:#fff;letter-spacing:.5px;text-transform:uppercase;border-bottom:1px solid #6b6b6b;padding-bottom:6px;display:inline-block}
.chan p{margin:0 0 10px}
.chan b{color:#fff}
.chan a:hover{color:#fff;text-decoration:underline}
.chan-mxh{display:flex;gap:10px;margin:4px 0 14px}
.chan-mxh a{width:34px;height:34px;border-radius:50%;background:#33383d;display:grid;place-items:center}
.chan-mxh a:hover{background:var(--do2);text-decoration:none}
.chan-mxh svg{width:17px;height:17px;fill:#ddd}
.chan-duoi{background:#000;margin-top:22px;padding:12px 16px 14px;text-align:center;font-size:12.5px;color:#cfcfcf}
.chan-duoi p{margin:2px 0}

/* ---------- XEM ẢNH / VIDEO PHÓNG TO ---------- */
.lb{position:fixed;inset:0;z-index:1000;background:#0b0b0c;display:flex;flex-direction:column;color:#fff;user-select:none;-webkit-user-select:none}
.lb-thanh{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:8px 10px;padding-top:calc(8px + env(safe-area-inset-top));background:#141416;border-bottom:1px solid #26262a;z-index:3}
.lb-dem{margin-right:auto;margin-left:6px;font-size:14px;color:#cfcfcf;white-space:nowrap}
.lb-zoom{display:flex;gap:2px;background:#232327;border-radius:22px;padding:2px}
.lb-nut{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:42px;height:42px;padding:0 13px;border:0;border-radius:21px;background:#232327;color:#fff;font:500 14px var(--f-chu);white-space:nowrap;cursor:pointer;text-decoration:none}
.lb-zoom .lb-nut{background:transparent;min-width:40px;height:38px;padding:0 10px}
.lb-nut:hover,.lb-nut:focus-visible{background:var(--do2);color:#fff}
.lb-nut svg{width:20px;height:20px;fill:currentColor;flex:0 0 auto}
.lb-muc{font-size:13px;min-width:56px!important}
.lb-thich.da,.lb-thich.da:hover{background:#1877f2}
.lb-tim.da,.lb-tim.da:hover{background:#e0245e}
.lb-thich b,.lb-tim b{font-weight:700}
@keyframes nay{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.lb-thich.nay svg,.lb-tim.nay svg{animation:nay .45s}
.lb-san{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;cursor:zoom-in}
.lb.da-phong .lb-san{cursor:grab}
.lb.da-phong .lb-san:active{cursor:grabbing}
.lb-san img{max-width:100%;max-height:100%;object-fit:contain;transform-origin:50% 50%;will-change:transform;-webkit-user-drag:none}
.lb.dang-tai .lb-san::after{content:"";position:absolute;left:50%;top:50%;margin:-17px 0 0 -17px;width:34px;height:34px;border:3px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:xoay .8s linear infinite}
.lb-truoc,.lb-sau{position:absolute;top:50%;z-index:3;width:52px;height:52px;margin-top:-6px;border-radius:50%;border:0;background:rgba(20,20,22,.6);color:#fff;display:grid;place-items:center;padding:0;cursor:pointer}
.lb-truoc{left:12px}
.lb-sau{right:12px}
.lb-truoc svg,.lb-sau svg{width:28px;height:28px;fill:currentColor}
.lb-truoc:hover,.lb-sau:hover{background:var(--do2)}
.lb-chu{flex:0 0 auto;text-align:center;font-size:13.5px;color:#bdbdbd;padding:8px 16px;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
html.khoa-cuon,html.khoa-cuon body{overflow:hidden}
html.xem-video .nhac{display:none}
.lb-san-video{cursor:default;touch-action:auto;padding:10px}
.khung-phat{width:min(calc(100% - 140px),calc((100vh - 150px) * 16 / 9));aspect-ratio:16/9;background:#000;box-shadow:0 4px 30px rgba(0,0,0,.6)}
.khung-phat.doc{width:min(100%,calc((100vh - 150px) * 9 / 16));aspect-ratio:9/16}
.khung-phat iframe{width:100%;height:100%;border:0;display:block}
.lb-video .lb-chu{font-size:14px;color:#e5e5e5}

/* nút về trang chủ nổi (trang con) */
.nut-ve-nha{position:fixed;right:16px;bottom:16px;z-index:60;display:inline-flex;align-items:center;gap:7px;background:var(--do2);color:#fff;border-radius:24px;padding:10px 16px 10px 13px;box-shadow:0 3px 12px rgba(0,0,0,.32);font:700 13.5px var(--f-hep);text-transform:uppercase}
.nut-ve-nha svg{width:19px;height:19px;fill:#fff}
.nut-ve-nha:hover{background:var(--do3)}

/* ---------- NHẠC NỀN ---------- */
.nhac{position:fixed;left:14px;bottom:14px;z-index:1001;display:flex;align-items:center;gap:2px;background:rgba(255,255,255,.97);border-radius:28px;padding:4px;box-shadow:0 3px 14px rgba(0,0,0,.3);border:1px solid #eee}
.nhac button{width:40px;height:40px;border:0;border-radius:50%;background:transparent;display:grid;place-items:center;padding:0;color:var(--do)}
.nhac button:hover{background:#fdecee}
.nhac button svg{width:21px;height:21px;fill:currentColor}
.nhac .nhac-nut{background:var(--do2);color:#fff;width:44px;height:44px}
.nhac .nhac-nut:hover{background:var(--do3)}
.nhac-song{display:flex;align-items:flex-end;gap:2px;height:14px;margin:0 6px 0 4px}
.nhac-song i{width:3px;background:var(--do2);border-radius:1px;height:4px}
.nhac.dang-phat .nhac-song i{animation:song 1s ease-in-out infinite}
.nhac.dang-phat .nhac-song i:nth-child(2){animation-delay:.2s}
.nhac.dang-phat .nhac-song i:nth-child(3){animation-delay:.4s}
.nhac.dang-phat .nhac-song i:nth-child(4){animation-delay:.1s}
@keyframes song{0%,100%{height:4px}50%{height:14px}}
.nhac-am{min-width:34px;text-align:center;font:700 12px var(--f-chu);color:#555}
.nhac-ten{max-width:0;overflow:hidden;white-space:nowrap;font:500 12.5px var(--f-chu);color:#444;transition:max-width .4s}
.nhac:hover .nhac-ten,.nhac.cho .nhac-ten{max-width:230px;margin:0 10px 0 4px}
.nhac.cho{animation:moi 1.6s ease-in-out infinite}
@keyframes moi{0%,100%{box-shadow:0 3px 14px rgba(0,0,0,.3)}50%{box-shadow:0 0 0 6px rgba(210,53,68,.35)}}
.nhac .nhac-thu{display:none}
.nhac.mo .nhac-thu{display:grid}

/* gợi ý bản tiếng Anh cho khách nước ngoài */
.goi-y-en{position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:80;display:flex;align-items:center;gap:10px;background:#1d3c8f;color:#fff;border-radius:24px;padding:6px 8px 6px 16px;box-shadow:0 4px 16px rgba(0,0,0,.3);font:500 14px var(--f-chu);max-width:calc(100% - 20px)}
.goi-y-en a{background:#fff;color:#1d3c8f;border-radius:16px;padding:4px 12px;font-weight:700;white-space:nowrap}
.goi-y-en button{border:0;background:transparent;color:#fff;font-size:18px;line-height:1;padding:2px 6px}

/* ---------- MÀN NHỎ ---------- */
@media (max-width:1100px){
  :root{--menu-rong:300px}
  .menu a{font-size:16px;padding:6px 18px}
  .hang-dau{grid-template-columns:1fr}
  .hang-dau aside{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .hang-dau aside .hop{margin:0}
  .cum{grid-template-columns:1fr}
  .khau-hieu{display:none}
  .dau-trong .doi-ngu{margin-left:auto}
}
@media (max-width:860px){
  .dau-trong{min-height:0;padding-block:10px;gap:10px}
  .logo{flex:1}
  .logo img{width:58px;height:58px}
  .logo-chu b{font-size:22px}
  .logo-chu small{font-size:11px;letter-spacing:1px}
  .logo-chu span{font-size:12px}
  .nut-menu{display:block;flex:0 0 46px;margin-left:0}
  .dinh{display:block}
  .menu{display:none}
  .menu.mo{display:flex;position:relative;z-index:20}
  .menu a{min-height:48px;padding-left:22px}
  .menu a.dang-xem::after{display:none}
  .trinh-chieu{aspect-ratio:3/2;max-height:none}
  .tc-mui{width:36px;height:36px;margin-top:-18px}
  .tc-goi-y{display:none}
  .tc-cham{bottom:8px;gap:4px}
  .tc-cham button{width:9px;height:3px}
  .noi-bat{grid-template-columns:1fr}
  .nb-anh{aspect-ratio:4/3}
  .nb-chu p{-webkit-line-clamp:4}
  .hang-dau aside{grid-template-columns:1fr}
  .cum-nho{grid-template-columns:1fr}
  .gt-luoi,.luoi-mxh,.chan-trong{grid-template-columns:1fr}
  .so-lieu{grid-template-columns:repeat(2,minmax(0,1fr))}
  .album-dau{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:14.5px}
  .logo-chu b{font-size:19px}
  .logo-chu small{font-size:9.5px;letter-spacing:.3px}
  .logo-chu span{font-size:11.5px}
  .logo img{width:50px;height:50px}
  .tc-cham{gap:3px}
  .tc-cham button{width:7px;height:3px}
  .nhac button{width:36px;height:36px}
  .nhac .nhac-nut{width:40px;height:40px}
  .doi-ngu a{padding:3px 8px;font-size:11.5px}
  .muc-tieu-de h2{font-size:18px}
  .the-nho{grid-template-columns:40% 60%;min-height:160px}
  .dong-tin{grid-template-columns:118px 1fr;gap:12px;padding:14px 2px}
  .dong-tin h3{font-size:14px}
  .dong-tin p{font-size:13px}
  .luoi-anh .o{flex-basis:calc(var(--r) * 118px)}
  .luoi-anh{gap:4px}
  .luoi-album{grid-template-columns:1fr}
  .luoi-vt{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .luoi-vt.doc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .the-vt b{font-size:13px}
  .bai h1{font-size:19px}
  .bai-luoi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bai-luoi button.ngang{grid-column:span 2}
  .the-do h1,.the-do h2{font-size:15px}
  .trich{font-size:18px;padding:14px 16px}
  .lb-nut span{display:none}
  .lb-nut{min-width:40px;height:40px;padding:0 9px}
  .lb-thich,.lb-tim{padding:0 10px}
  .lb-thich span,.lb-tim span{display:none}
  .lb-muc{display:none!important}
  .lb-thanh{gap:4px;padding:6px;flex-wrap:wrap}
  .lb-dem{font-size:13px;margin-left:2px}
  .lb-truoc,.lb-sau{width:42px;height:42px;background:rgba(20,20,22,.45)}
  .lb-truoc{left:6px}
  .lb-sau{right:6px}
  .nut-ve-nha{right:12px;bottom:12px;padding:10px 12px}
  .nut-ve-nha span{display:none}
  .khung-phat{width:min(100%,calc((100vh - 150px) * 16 / 9))}
  .lb-video .lb-truoc,.lb-video .lb-sau{top:auto;bottom:calc(64px + env(safe-area-inset-bottom));margin:0}
  .lb-video .lb-truoc{left:calc(50% - 56px)}
  .lb-video .lb-sau{right:calc(50% - 56px)}
  .fb-khung{height:620px}
  .chan h2{font-size:20px}
  .chan-duoi{padding-bottom:70px}
  .nhac{left:10px;bottom:10px}
  .nhac-ten{display:none}
}

/* số thẳng hàng cho font menu — phải đứng SAU mọi khai báo `font:` (shorthand đặt lại font-feature-settings) */
.menu a,.chan h2,.khau-hieu,.trich{font-feature-settings:"lnum" 1}