/* Nhận diện khanhhocmiet.com cho các trang công khai (trang chủ, phiếu, quà tặng…).
   Trò chơi (tieng-viet, lat-hinh) có giao diện riêng, không dùng file này. */
:root{
  --hong:#F4A6A0; --hong-nhat:#FDE3E0; --bac-ha:#8FD3C1; --bac-ha-nhat:#E6F6F1; --vang:#FFD166; --vang-nhat:#FFF4D6;
  --chu:#3D2C29; --chu-phu:#7a625e; --nen:#FFF8F3; --the:#ffffff; --vien:#eadcd8; --nhan-manh:#c9574d;
  --f:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --bo:18px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --hong-nhat:#4a2f2c; --bac-ha-nhat:#1f3d36; --vang-nhat:#45391a;
  --chu:#f6ebe8; --chu-phu:#cbb7b3; --nen:#1f1917; --the:#2a2220; --vien:#463936; --nhan-manh:#F4A6A0; color-scheme:dark}}
:root[data-theme="dark"]{
  --hong-nhat:#4a2f2c; --bac-ha-nhat:#1f3d36; --vang-nhat:#45391a;
  --chu:#f6ebe8; --chu-phu:#cbb7b3; --nen:#1f1917; --the:#2a2220; --vien:#463936; --nhan-manh:#F4A6A0; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--nen);color:var(--chu);font-family:var(--f);font-size:17px;line-height:1.6}
img{max-width:100%;height:auto}
a{color:inherit}
.khung{max-width:1040px;margin:0 auto;padding:0 16px}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;font-weight:800;text-wrap:balance}
h1{font-size:clamp(30px,6vw,46px)}
h2{font-size:clamp(23px,4vw,30px)}
h3{font-size:20px;font-weight:700}
p{margin:0 0 1em}
.phu{color:var(--chu-phu)}
:focus-visible{outline:3px solid var(--bac-ha);outline-offset:3px;border-radius:6px}

/* Đầu trang */
.dau-trang{border-bottom:1px solid var(--vien);background:var(--nen);position:sticky;top:0;z-index:5}
.dau-trang .khung{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.logo{font-weight:800;font-size:19px;text-decoration:none;display:flex;align-items:center;gap:8px}
.logo b{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--hong);color:#3D2C29;font-size:18px}
.menu{display:flex;gap:4px;flex-wrap:wrap}
.menu a{text-decoration:none;font-weight:600;font-size:15px;padding:6px 10px;border-radius:10px}
.menu a:hover{background:var(--hong-nhat)}

/* Khối */
.muc{padding:44px 0}
.muc.hep{padding:24px 0}
.duong-dan{font-size:14px;color:var(--chu-phu);margin:18px 0 6px}
.duong-dan a{text-decoration:none}
.duong-dan a:hover{text-decoration:underline}

/* Nút */
.nut{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:12px 22px;border-radius:14px;
  background:var(--hong);color:#3D2C29;font-weight:800;font-size:17px;text-decoration:none;border:2px solid #3D2C29;
  box-shadow:0 4px 0 #3D2C29;cursor:pointer;font-family:inherit;transition:transform .1s,box-shadow .1s}
.nut:hover{transform:translateY(-1px);box-shadow:0 5px 0 #3D2C29}
.nut:active{transform:translateY(3px);box-shadow:0 1px 0 #3D2C29}
.nut.phu-nut{background:var(--the);color:var(--chu);border-color:var(--chu);box-shadow:0 4px 0 var(--chu)}
.nut.bac-ha{background:var(--bac-ha)}

/* Thẻ */
.luoi-the{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.the{background:var(--the);border:1px solid var(--vien);border-radius:var(--bo);overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:transform .12s,box-shadow .12s}
.the:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(61,44,41,.10)}
.the .anh{aspect-ratio:210/297;background:#fff;border-bottom:1px solid var(--vien);overflow:hidden}
.the .anh img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.the .noi{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.the h3{margin:0;font-size:17px}
.the p{margin:0;font-size:14.5px;color:var(--chu-phu)}
.nhan{display:inline-block;font-size:13px;font-weight:700;padding:2px 10px;border-radius:99px;background:var(--hong-nhat);border:1px solid var(--hong);width:fit-content}
.nhan.bac-ha{background:var(--bac-ha-nhat);border-color:var(--bac-ha)}
.nhan.vang{background:var(--vang-nhat);border-color:var(--vang)}
.nhan.cap{background:var(--the);border-color:var(--vien);color:var(--chu)}
.hang-nhan{display:flex;flex-wrap:wrap;gap:6px}

/* Khung nổi bật (quà tặng, bộ 30 ngày) */
.khung-ban{border-radius:24px;padding:28px;border:2px solid var(--chu);background:var(--vang-nhat);display:grid;gap:18px;align-items:center}
.khung-ban.hong{background:var(--hong-nhat)}
.khung-ban.bac-ha{background:var(--bac-ha-nhat)}
@media(min-width:760px){.khung-ban.hai-cot{grid-template-columns:1.4fr 1fr}}
.khung-ban h2{margin-bottom:.3em}

/* Form */
.form{display:grid;gap:14px;background:var(--the);border:1px solid var(--vien);border-radius:var(--bo);padding:22px}
.form label{display:grid;gap:6px;font-weight:700;font-size:15px}
.form input[type=text],.form input[type=email],.form select{font:inherit;font-weight:500;padding:12px 14px;border-radius:12px;border:1.5px solid var(--vien);background:var(--nen);color:var(--chu);min-height:48px}
.form .dong-y{display:flex;gap:10px;align-items:flex-start;font-weight:500;font-size:14.5px}
.form .dong-y input{width:22px;height:22px;margin-top:2px;flex:none}
.form .loi{color:var(--nhan-manh);font-weight:700;font-size:14.5px;margin:0}
.da-gui{display:grid;gap:12px;background:var(--bac-ha-nhat);border:2px solid var(--bac-ha);border-radius:var(--bo);padding:22px}
.da-gui[hidden]{display:none}

/* Trang phiếu */
.phieu-chinh{display:grid;gap:28px;align-items:start}
@media(min-width:860px){.phieu-chinh{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.phieu-xem{background:#fff;border:1px solid var(--vien);border-radius:var(--bo);overflow:hidden;box-shadow:0 10px 30px rgba(61,44,41,.10)}
.phieu-xem img{display:block;width:100%}
.danh-sach{padding-left:1.2em}
.danh-sach li{margin-bottom:.4em}

/* Bộ lọc thư viện */
.loc{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 22px}
.loc a{text-decoration:none;font-weight:700;padding:8px 14px;border-radius:99px;border:1.5px solid var(--vien);background:var(--the)}
.loc a[aria-current="page"]{background:var(--hong);border-color:#3D2C29;color:#3D2C29}

/* Chân trang */
.chan-trang{border-top:1px solid var(--vien);margin-top:40px;padding:28px 0 40px;font-size:14.5px;color:var(--chu-phu)}
.chan-trang .khung{display:grid;gap:10px}
.chan-trang a{font-weight:600}