/* Web HS GoodMOS (bản xem thử). Màu theo logo: xanh đậm + cam; màu môn theo Office (docs/PHAN_CHUNG.md mục 5). */
:root{
  --nen:#F4F6FB; --the:#FFFFFF; --vien:#E3E8F2; --vien2:#CDD5E3;
  --chu:#16223D; --chu2:#4A5672; --mo:#74809A;
  --dam:#14213D; --dam2:#1C3766; --cam:#F7931E; --cam-dam:#D9741A; --xanh:#2F6FE0; --xanh-nhat:#E9F1FE;
  --ppt:#C43E1C; --word:#2B579A; --excel:#1D6F42;
  --tot:#1E9E50; --tb:#E0A100; --kem:#D64533; --chua:#A9B2C3;
  --bo:10px; --bo-nut:5px; --bong:0 1px 2px rgba(20,33,61,.05), 0 8px 24px rgba(20,33,61,.06);
  --rong:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--nen); color:var(--chu2); font:400 16px/1.6 Inter,"Segoe UI",system-ui,sans-serif; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Be Vietnam Pro",Inter,"Segoe UI",sans-serif; color:var(--chu); margin:0; line-height:1.2; text-wrap:balance}
p{margin:0}
a{color:var(--xanh)}
button,input,select{font:inherit}
:focus-visible{outline:2px solid var(--xanh); outline-offset:2px; border-radius:6px}
svg.ic{width:1.15em; height:1.15em; flex:none; vertical-align:-.2em; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}

.xem-thu{background:#FFE9A8; color:#5A3D00; padding:5px 16px; font-size:13px; text-align:center}

/* ---------- thanh trên ---------- */
.top{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.86); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid transparent; transition:border-color .2s, box-shadow .2s}
.top.cuon{border-color:var(--vien); box-shadow:0 4px 18px rgba(20,33,61,.06)}
.top-in{max-width:var(--rong); margin:0 auto; padding:0 20px; height:64px; display:flex; align-items:center; gap:28px}
.logo img{height:30px; display:block}
.menu{display:flex; gap:6px; align-self:stretch}
.menu a{display:flex; align-items:center; padding:0 12px; color:var(--chu2); text-decoration:none; font-weight:500; font-size:15px; border-bottom:3px solid transparent; border-top:3px solid transparent; transition:color .15s, border-color .15s}
.menu a:hover{color:var(--chu); border-bottom-color:var(--vien2)}
.menu a.chon{color:var(--chu); font-weight:600; border-bottom-color:var(--cam)}
.sp{flex:1}
.nguoi{display:flex; align-items:center; gap:10px; padding:4px 14px 4px 4px; border:1px solid var(--vien); border-radius:var(--bo-nut); background:var(--the); text-decoration:none; color:var(--chu); transition:border-color .15s, box-shadow .15s}
.nguoi:hover{border-color:var(--dam2)}
.nguoi .av{width:34px; height:34px; border-radius:3px; background:linear-gradient(135deg,var(--dam2),var(--xanh)); color:#fff; display:grid; place-items:center; font:700 13px "Be Vietnam Pro",sans-serif}
.nguoi b{display:block; font-size:14px; line-height:1.2; font-weight:600}
.nguoi small{display:block; font-size:12px; color:var(--mo); line-height:1.2}

/* ---------- nút ---------- */
.nut{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 18px; border-radius:var(--bo-nut); border:1px solid transparent; font-weight:600; font-size:15px; cursor:pointer; text-decoration:none; transition:background .15s, border-color .15s, color .15s; white-space:nowrap}
.nut:active{filter:brightness(.94)}
.nut.chinh{background:var(--cam); color:#fff; border-color:var(--cam-dam)}
.nut.chinh:hover{background:var(--cam-dam)}
.nut.dam{background:var(--dam); color:#fff; border-color:var(--dam)}
.nut.dam:hover{background:var(--dam2)}
.nut.vien{background:var(--the); color:var(--chu); border-color:var(--vien2)}
.nut.vien:hover{border-color:var(--dam); background:var(--nen)}
.nut.sang{background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.28)}
.nut.sang:hover{background:rgba(255,255,255,.18)}
.nut.nho{padding:8px 13px; font-size:14px}
.nut.lon{padding:13px 24px; font-size:16px}
.nut[disabled]{opacity:.6; cursor:default}

/* ---------- khung trang ---------- */
#page{min-height:60vh; outline:none}
.trang{max-width:var(--rong); margin:0 auto; padding:36px 20px 72px; animation:hien .28s ease both}
@keyframes hien{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important} html{scroll-behavior:auto}}
.dau-trang{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:24px}
.dau-trang h1{font-size:clamp(1.6rem,3.2vw,2.1rem)}
.dau-trang p{margin-top:6px; max-width:62ch}
.nhan-nho{font:600 12px Inter,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--cam-dam)}

/* ---------- trang chủ ---------- */
.hero{background:radial-gradient(1200px 500px at 85% -10%, #26498A 0%, transparent 60%), linear-gradient(160deg,var(--dam) 0%, #0F1A33 100%); color:#C9D4EA; position:relative; overflow:hidden}
.hero::before,.hero::after{content:""; position:absolute; border-radius:50%; pointer-events:none}
.hero::before{width:520px; height:520px; right:-140px; bottom:-300px; border:46px solid rgba(247,147,30,.42)}
.hero::after{width:760px; height:760px; right:-320px; top:-380px; border:60px solid rgba(77,163,255,.14)}
.hero-in{max-width:var(--rong); margin:0 auto; padding:72px 20px 84px; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:48px; align-items:center; position:relative; z-index:1}
.hero h1{color:#fff; font-size:clamp(2.1rem,4.8vw,3.4rem); font-weight:800; letter-spacing:-.02em; line-height:1.12}
.hero h1 em{font-style:normal; color:var(--cam)}
.hero .nhan-nho{color:var(--cam)}
.hero p.dan{font-size:1.1rem; margin:18px 0 28px; max-width:54ch}
.hero .nuts{display:flex; gap:12px; flex-wrap:wrap}
.hero .mon-dong{display:flex; gap:14px 28px; margin-top:38px; flex-wrap:wrap; font:600 18px "Be Vietnam Pro",sans-serif; color:#fff}
.hero .mon-dong span{display:inline-flex; align-items:center; gap:11px}
.hero .mon-dong small{font:400 14px Inter,sans-serif; color:#AEBBD6}
.hero .mon-dong .o-mon{width:40px; height:40px; border-radius:6px; font-size:21px}
.o-mon{width:24px; height:24px; border-radius:4px; display:inline-grid; place-items:center; color:#fff; font:700 13px "Be Vietnam Pro",sans-serif; flex:none}
.o-mon.PowerPoint{background:var(--ppt)} .o-mon.Word{background:var(--word)} .o-mon.Excel{background:var(--excel)}

.chong-khung{width:100%; max-width:360px; margin:0 70px 0 auto}
.chong{display:grid; padding-top:34px}
.phieu{grid-area:1/1; background:#fff; color:var(--chu2); border-radius:var(--bo); padding:22px; cursor:pointer; transition:transform .65s cubic-bezier(.2,.7,.2,1), filter .65s, box-shadow .65s}
.phieu.vt0{z-index:3; transform:rotate(-2deg); box-shadow:0 24px 60px rgba(0,0,0,.4); cursor:default}
.phieu.vt1{z-index:2; transform:translate(74px,-24px) rotate(8deg) scale(.92); filter:brightness(.86); box-shadow:0 12px 30px rgba(0,0,0,.3)}
.phieu.vt2{z-index:1; transform:translate(-74px,-30px) rotate(-10deg) scale(.92); filter:brightness(.86); box-shadow:0 12px 30px rgba(0,0,0,.3)}
.phieu.gv{display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px}
.phieu.gv .anh{position:relative; width:100%; flex:1; min-height:170px; margin-bottom:12px; border-radius:6px; overflow:hidden; background:var(--nen); border:1px dashed var(--vien2); display:grid; place-items:center}
.phieu.gv .anh span{display:flex; flex-direction:column; align-items:center; gap:6px; font-size:13px; color:var(--mo)}
.phieu.gv .anh span svg{width:40px; height:40px}
.phieu.gv .anh img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 28%}
.phieu.gv small{font:600 11px Inter,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--cam-dam)}
.phieu.gv b{font:700 1.2rem "Be Vietnam Pro",sans-serif; color:var(--chu)}
.phieu.gv p{font-size:14px}
.chong-nut{display:flex; justify-content:center; gap:8px; margin-top:26px}
.chong-nut button{width:26px; height:4px; padding:0; border:0; border-radius:2px; background:rgba(255,255,255,.28); cursor:pointer; transition:background .2s}
.chong-nut button.chon{background:var(--cam)}
.phieu.sau1{transform:translate(-46px,-34px) rotate(-10deg)}
.phieu.sau2{transform:translate(42px,-16px) rotate(8deg)}
.phieu .dau{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--mo)}
.phieu .dau b{color:var(--chu); font-size:14px}
.phieu .giua{display:flex; align-items:center; gap:18px; margin:16px 0}
.vong{position:relative; width:104px; height:104px; flex:none}
.vong svg{width:100%; height:100%; transform:rotate(-90deg)}
.vong circle{fill:none; stroke-width:10; stroke:var(--vien)}
.vong circle.c{stroke:var(--tot); stroke-linecap:round; stroke-dasharray:283; animation:ve 1.2s .3s ease-out both}
@keyframes ve{from{stroke-dashoffset:283}}
.vong div{position:absolute; inset:0; display:grid; place-items:center; text-align:center; font:800 26px "Be Vietnam Pro",sans-serif; color:var(--chu); line-height:1}
.vong small{display:block; font:500 11px Inter,sans-serif; color:var(--mo); margin-top:3px}
.phieu .pj{display:grid; grid-template-columns:70px 1fr 34px; gap:10px; align-items:center; font-size:13px; padding:5px 0}
.phieu .pj b{font-weight:600; text-align:right; color:var(--chu)}

.thanh{height:8px; border-radius:99px; background:var(--vien); overflow:hidden}
.thanh i{display:block; height:100%; border-radius:99px; background:var(--tot); transition:width .5s ease}
.thanh i.tb{background:var(--tb)} .thanh i.kem{background:var(--kem)}

.khoi{max-width:var(--rong); margin:0 auto; padding:72px 20px 0}
.khoi > h2{font-size:clamp(1.5rem,3vw,2rem); margin:8px 0 10px}
.khoi > p{max-width:60ch}
.luoi4{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:28px}
.diem-manh{background:var(--the); border:1px solid var(--vien); border-radius:var(--bo); padding:22px; transition:transform .2s, box-shadow .2s}
.diem-manh:hover{transform:translateY(-3px); box-shadow:var(--bong)}
.diem-manh .bt{width:44px; height:44px; border-radius:6px; background:var(--xanh-nhat); color:var(--xanh); display:grid; place-items:center; font-size:20px; margin-bottom:14px}
.diem-manh:nth-child(2) .bt{background:#FFF1DE; color:var(--cam-dam)}
.diem-manh:nth-child(3) .bt{background:#E6F5EC; color:var(--tot)}
.diem-manh:nth-child(4) .bt{background:#EEE9FB; color:#6B4BC9}
.diem-manh h3{font-size:1.05rem; margin-bottom:6px}
.diem-manh p{font-size:15px}

.luoi3{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin-top:28px}
.the-mon{position:relative; border-radius:var(--bo); padding:24px; color:#fff; text-decoration:none; overflow:hidden; display:block; transition:transform .2s, box-shadow .2s}
.the-mon:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(20,33,61,.18)}
.the-mon.PowerPoint{background:linear-gradient(140deg,#D2502B,#A9300F)} .the-mon.Word{background:linear-gradient(140deg,#3568B5,#22467F)} .the-mon.Excel{background:linear-gradient(140deg,#258552,#165634)}
.the-mon .chu-to{position:absolute; right:-6px; bottom:-34px; font:800 150px "Be Vietnam Pro",sans-serif; opacity:.14; line-height:1}
.the-mon small{font-size:13px; opacity:.85; letter-spacing:.06em; text-transform:uppercase; font-weight:600}
.the-mon h3{color:#fff; font-size:1.5rem; margin:4px 0 22px}
.the-mon p{font-size:14px; opacity:.92; display:flex; align-items:center; gap:6px}

.keu-goi{margin:72px auto 0; max-width:var(--rong); padding:0 20px}
.keu-goi div{background:linear-gradient(120deg,var(--dam),var(--dam2)); border-radius:var(--bo); padding:40px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; color:#C9D4EA}
.keu-goi h2{color:#fff; font-size:1.6rem}
.keu-goi p{margin-top:6px}

/* ---------- bài học ---------- */
.thanh-loc{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:22px}
.tab-mon{display:flex; background:var(--the); border:1px solid var(--vien); border-radius:var(--bo-nut); padding:3px; gap:2px}
.tab-mon button{display:flex; align-items:center; gap:8px; border:0; background:none; padding:8px 14px; border-radius:3px; cursor:pointer; color:var(--chu2); font-weight:600; font-size:15px; transition:background .15s, color .15s}
.tab-mon button:hover{background:var(--nen)}
.tab-mon button.chon{background:var(--dam); color:#fff}
.tim{position:relative; flex:1; min-width:200px; max-width:320px; margin-left:auto}
.tim input{width:100%; padding:10px 12px 10px 38px; border:1px solid var(--vien); border-radius:var(--bo-nut); background:var(--the); color:var(--chu)}
.tim input:focus{outline:none; border-color:var(--xanh); box-shadow:0 0 0 3px var(--xanh-nhat)}
.tim svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--mo)}
.nhom{font:700 1.15rem "Be Vietnam Pro",sans-serif; color:var(--chu); margin:30px 0 14px; display:flex; align-items:center; gap:10px}
.nhom span{font:500 13px Inter,sans-serif; color:var(--mo); background:var(--the); border:1px solid var(--vien); border-radius:4px; padding:1px 8px}
.luoi-bai{display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px}
.bai{background:var(--the); border:1px solid var(--vien); border-radius:var(--bo); padding:18px; display:flex; flex-direction:column; gap:14px; transition:transform .2s, box-shadow .2s, border-color .2s}
.bai:hover{transform:translateY(-2px); box-shadow:var(--bong); border-color:var(--vien2)}
.bai .tren{display:flex; gap:14px; align-items:flex-start}
.o-ma{width:48px; height:48px; border-radius:6px; display:grid; place-items:center; font:700 15px "Be Vietnam Pro",sans-serif; flex:none}
.o-ma.PowerPoint{background:#FBE9E4; color:var(--ppt)} .o-ma.Word{background:#E6EDF8; color:var(--word)} .o-ma.Excel{background:#E3F2EA; color:var(--excel)}
.bai h3{font-size:1.02rem; line-height:1.3}
.bai .mt{font-size:14px; margin-top:2px}
.bai .so{display:flex; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--mo)}
.bai .so span{display:inline-flex; align-items:center; gap:5px}
.bai .tien{font-size:13px; display:grid; grid-template-columns:1fr auto; gap:6px 10px; align-items:center}
.bai .tien b{color:var(--chu)}
.bai .tien .thanh{grid-column:1/-1}
.bai .nuts{display:flex; gap:8px; flex-wrap:wrap; margin-top:auto}
.bai .nuts .nut{flex:1}
.the-tu-hoc{display:inline-flex; align-items:center; gap:5px; font:600 12px Inter,sans-serif; color:var(--tot); background:#E6F5EC; border-radius:4px; padding:2px 8px; margin-left:8px; vertical-align:middle; white-space:nowrap}
.trong{text-align:center; padding:56px 20px; background:var(--the); border:1px dashed var(--vien2); border-radius:var(--bo)}
.trong .bt{font-size:34px; color:var(--chua)}
.trong h3{margin:8px 0 6px}
.trong .nut{margin-top:16px}

/* ---------- lịch sử ---------- */
.o-so{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:24px}
.o-so div{background:var(--the); border:1px solid var(--vien); border-radius:var(--bo); padding:16px 18px}
.o-so small{display:block; font-size:13px; color:var(--mo)}
.o-so b{font:800 1.8rem "Be Vietnam Pro",sans-serif; color:var(--chu); line-height:1.25}
.o-so b span{font:500 14px Inter,sans-serif; color:var(--mo)}
.chip-loc{display:flex; gap:6px; flex-wrap:wrap}
.chip-loc button{border:1px solid var(--vien); background:var(--the); color:var(--chu2); border-radius:var(--bo-nut); padding:7px 14px; font-weight:500; font-size:14px; cursor:pointer; transition:all .15s}
.chip-loc button:hover{border-color:var(--vien2)}
.chip-loc button.chon{background:var(--dam); border-color:var(--dam); color:#fff}
.ds-luot{display:flex; flex-direction:column; gap:10px; min-height:120px; position:relative}
.luot{background:var(--the); border:1px solid var(--vien); border-radius:var(--bo); overflow:hidden; transition:border-color .2s, box-shadow .2s}
.luot:hover,.luot.mo{border-color:var(--vien2); box-shadow:var(--bong)}
.luot > button{width:100%; border:0; background:none; cursor:pointer; text-align:left; padding:14px 18px; display:grid; grid-template-columns:44px minmax(0,1.6fr) 110px 150px 132px 24px; gap:16px; align-items:center; color:inherit}
.luot .o-ma{width:44px; height:44px; font-size:14px}
.luot .ten b{display:block; color:var(--chu); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.luot .ten small{color:var(--mo); font-size:13px}
.che-do{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; border-radius:4px; padding:3px 9px; justify-self:start}
.che-do.luyen_tap{background:var(--xanh-nhat); color:var(--xanh)} .che-do.thi_thu{background:#FFF1DE; color:var(--cam-dam)}
.diem b{font:700 1.15rem "Be Vietnam Pro",sans-serif; color:var(--chu)}
.diem small{color:var(--mo); font-size:12px}
.diem .thanh{margin-top:4px; height:6px}
.kq{display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-size:14px; font-weight:600; color:var(--chu)}
.cham{width:10px; height:10px; border-radius:50%; flex:none; background:var(--chua)}
.cham.tot{background:var(--tot)} .cham.tb{background:var(--tb)} .cham.kem{background:var(--kem)}
.luot .mui{color:var(--mo); transition:transform .2s}
.luot.mo .mui{transform:rotate(180deg)}
.chi-tiet{display:grid; grid-template-rows:0fr; transition:grid-template-rows .25s ease}
.luot.mo .chi-tiet{grid-template-rows:1fr}
.chi-tiet > div{overflow:hidden}
.chi-tiet .trong-ct{border-top:1px solid var(--vien); padding:16px 18px 18px; display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px 28px; background:#FAFBFE}
.chi-tiet .pj{display:grid; grid-template-columns:76px 1fr 50px; gap:10px; align-items:center; font-size:14px}
.chi-tiet .pj b{text-align:right; color:var(--chu); font-weight:600}
.ghi-chu{font-size:13px; color:var(--mo); margin-top:14px}
.quay{width:26px; height:26px; border-radius:50%; border:3px solid var(--vien); border-top-color:var(--xanh); animation:xoay .7s linear infinite; display:inline-block}
@keyframes xoay{to{transform:rotate(360deg)}}
.dang-nap{display:grid; place-items:center; padding:48px}

/* ---------- tài khoản + hộp ---------- */
.hai-cot{display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:20px; align-items:start}
.the{background:var(--the); border:1px solid var(--vien); border-radius:var(--bo); padding:24px}
.the h2{font-size:1.15rem; margin-bottom:16px}
.ho-so{text-align:center}
.ho-so .av{width:84px; height:84px; border-radius:8px; margin:0 auto 12px; background:linear-gradient(135deg,var(--dam2),var(--xanh)); color:#fff; display:grid; place-items:center; font:800 30px "Be Vietnam Pro",sans-serif}
.ho-so h2{margin-bottom:2px}
.ho-so dl{text-align:left; margin:20px 0; display:grid; grid-template-columns:auto 1fr; gap:8px 14px; font-size:15px}
.ho-so dt{color:var(--mo)} .ho-so dd{margin:0; color:var(--chu); font-weight:500; text-align:right}
.o-nhap{display:block; margin-bottom:14px}
.o-nhap span{display:block; font-size:14px; font-weight:500; color:var(--chu); margin-bottom:5px}
.o-nhap input{width:100%; padding:11px 13px; border:1px solid var(--vien2); border-radius:var(--bo-nut); background:#fff; color:var(--chu)}
.o-nhap input:focus{outline:none; border-color:var(--xanh); box-shadow:0 0 0 3px var(--xanh-nhat)}
.loi{color:var(--kem); font-size:14px; min-height:1.4em; margin-bottom:8px}

#lop-phu:empty{display:none}
.man-che{position:fixed; inset:0; z-index:50; background:rgba(15,26,51,.55); backdrop-filter:blur(3px); display:grid; place-items:center; padding:20px; animation:mo-dan .18s ease both}
@keyframes mo-dan{from{opacity:0}}
.hop{background:#fff; border-radius:var(--bo); padding:30px; width:100%; max-width:400px; box-shadow:0 30px 80px rgba(0,0,0,.3); animation:hien .22s ease both; position:relative}
.hop h2{font-size:1.4rem; margin-bottom:4px}
.hop > p{margin-bottom:20px; font-size:15px}
.hop .dong{position:absolute; right:14px; top:14px; border:0; background:none; cursor:pointer; color:var(--mo); width:34px; height:34px; border-radius:var(--bo-nut); font-size:18px}
.hop .dong:hover{background:var(--nen)}
.hop .nut{width:100%}
.hop.viec{text-align:center; max-width:320px}
.hop.viec .bt{width:56px; height:56px; border-radius:50%; background:#E6F5EC; color:var(--tot); display:grid; place-items:center; margin:0 auto 12px; font-size:28px}
.hop.viec .quay{width:44px; height:44px; border-width:4px; margin-bottom:12px}

.bao{position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); background:var(--dam); color:#fff; padding:12px 18px; border-radius:6px; font-size:14px; max-width:min(92vw,520px); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:60; box-shadow:0 12px 30px rgba(0,0,0,.25)}
.bao.hien{opacity:1; transform:translate(-50%,0)}

/* ---------- chân trang + điện thoại ---------- */
.chan{border-top:1px solid var(--vien); margin-top:72px; background:var(--the)}
.chan-in{max-width:var(--rong); margin:0 auto; padding:28px 20px; display:flex; gap:24px; align-items:center; flex-wrap:wrap; font-size:14px; color:var(--mo)}
.chan img{height:24px}
.chan p{flex:1; min-width:240px}
.tab-duoi{display:none}

@media (max-width:860px){
  .hero-in{grid-template-columns:1fr; padding:48px 20px 56px}
  .chong-khung{margin:10px auto 0; max-width:300px}
  .phieu.vt1{transform:translate(26px,-22px) rotate(6deg) scale(.94)}
  .phieu.vt2{transform:translate(-26px,-28px) rotate(-7deg) scale(.94)}
  .hai-cot{grid-template-columns:1fr}
  .luot > button{grid-template-columns:44px minmax(0,1fr) auto 20px; gap:6px 12px}
  .luot .che-do{grid-column:2; grid-row:2}
  .luot .diem{grid-column:3; grid-row:1; text-align:right}
  .luot .diem .thanh{display:none}
  .luot .kq{grid-column:3; grid-row:2; justify-self:end; font-size:13px}
  .luot .ten b{white-space:normal; line-height:1.3}
  .luot .o-ma{grid-row:1/3}
  .luot .mui{grid-column:4; grid-row:1/3}
}
@media (max-width:700px){
  .menu{display:none}
  .top-in{height:56px}
  .nguoi{padding:3px} .nguoi div:last-child{display:none}
  .tab-duoi{display:grid; grid-template-columns:repeat(4,1fr); position:fixed; left:0; right:0; bottom:0; z-index:30; background:rgba(255,255,255,.95); backdrop-filter:blur(12px); border-top:1px solid var(--vien); padding-bottom:env(safe-area-inset-bottom,0)}
  .tab-duoi a{display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 4px 7px; font-size:11px; font-weight:500; color:var(--mo); text-decoration:none}
  .tab-duoi a svg{width:22px; height:22px}
  .tab-duoi a.chon{color:var(--xanh)}
  body{padding-bottom:64px}
  .bao{bottom:84px}
  .trang{padding:24px 16px 48px}
  .luoi-bai{grid-template-columns:1fr}
  .tim{max-width:none; flex-basis:100%}
  .tab-mon{width:100%} .tab-mon button{flex:1; justify-content:center; padding:8px 6px}
  .khoi{padding-top:52px}
  .keu-goi div{padding:28px 22px}
}