/* Giao diện "Lớp học nắng" — nền sáng, màu kẹo ngọt, chữ đậm tròn trịa.
   Mỗi phân môn một màu riêng để học sinh nhận diện nhanh. */
:root{
  --nen:#F2F8FF; --nen2:#FFF9EE;
  --the:#FFFFFF; --vien:#E3E9F4; --muc:#2E3450; --mo:#7A83A6;
  --vang:#FFB020; --cam:#FF7A59; --xanh:#2F9BFF; --dung:#2FB870;
  --sai:#F0536B; --tim:#7C6FF0; --tamduoc:#E8960C;
  --bong:0 2px 0 #E3E9F4, 0 10px 24px rgba(46,52,80,.08);
  /* màu phân môn */
  --m-go:#2F9BFF; --m-gotv:#FF7A59; --m-chuot:#2FB870; --m-ic3:#7C6FF0; --m-cdso:#FFB020;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  min-height:100vh;color:var(--muc);
  background:linear-gradient(160deg,var(--nen) 0%,var(--nen2) 100%);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  touch-action:manipulation;
}
a{color:var(--xanh)}
nav{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:10px 16px;background:rgba(255,255,255,.85);backdrop-filter:blur(6px);
  border-bottom:2px solid var(--vien);position:sticky;top:0;z-index:30;
}
nav .logo{font-weight:900;font-size:18px;color:var(--muc);text-decoration:none;margin-right:8px}
nav .logo b{color:var(--vang)}
nav a.muc{color:var(--muc);text-decoration:none;font-size:14.5px;font-weight:600;
  padding:9px 13px;border-radius:999px;min-height:44px;display:inline-flex;align-items:center}
nav a.muc:hover{background:#EEF4FF}
nav a.muc.dang{background:#EAF3FF;color:var(--xanh)}
nav .phai{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:14px;color:var(--mo)}
main{max-width:980px;margin:0 auto;padding:20px 16px 70px}
h1{font-size:clamp(22px,4.5vw,30px);font-weight:900;margin:6px 0 4px;letter-spacing:-.01em}
h2{font-size:19px;font-weight:800;margin:26px 0 10px}
.phu-de{color:var(--mo);font-size:14.5px;line-height:1.55}
.the{background:var(--the);border:2px solid var(--vien);border-radius:18px;
  padding:16px 18px;box-shadow:var(--bong)}
.luoi{display:grid;gap:12px}
.nut{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:999px;padding:12px 26px;font-size:16px;font-weight:800;
  color:#5A3A00;background:linear-gradient(180deg,#FFD262,var(--vang));
  box-shadow:0 4px 0 #D18C00;cursor:pointer;text-decoration:none;min-height:44px;
  transition:transform .08s, box-shadow .08s;
}
.nut:active{transform:translateY(3px);box-shadow:0 1px 0 #D18C00}
.nut.nho{padding:8px 16px;font-size:14px}
.nut.trang{background:#fff;color:var(--muc);box-shadow:0 4px 0 var(--vien);border:2px solid var(--vien)}
.nut.trang:active{box-shadow:0 1px 0 var(--vien)}
.huy-hieu{display:inline-block;background:#FFF4DB;border:2px solid #FFD262;color:#8A5B00;
  border-radius:999px;padding:5px 12px;font-size:13.5px;font-weight:700;margin:3px 4px 3px 0}
input,select,textarea{
  font-size:16px;padding:11px 14px;border-radius:12px;min-height:44px;
  border:2px solid var(--vien);background:#fff;color:var(--muc);font-family:inherit;
}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible,[tabindex]:focus-visible{
  outline:3px solid rgba(47,155,255,.45);outline-offset:2px}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th,td{padding:9px 10px;text-align:left;border-bottom:2px solid var(--vien)}
th{color:var(--mo);font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.canh-bao{background:#FFF6E3;border:2px solid #FFD98A;color:#7A5200;
  border-radius:12px;padding:11px 14px;font-size:14.5px;margin:10px 0;line-height:1.5}
.an{display:none!important}

/* Thẻ cấp độ trên trang chủ — "tab vở" nhiều màu */
.the-cap{position:relative;display:block;text-decoration:none;color:var(--muc);
  background:#fff;border:2px solid var(--vien);border-left-width:8px;border-radius:14px;
  padding:13px 14px;box-shadow:var(--bong);transition:transform .12s}
.the-cap:hover{transform:translateY(-3px)}
.the-cap .ten{font-weight:800;font-size:15px}
.the-cap .kl{color:var(--mo);font-size:13.5px;margin-top:5px}
.pm-go .the-cap{border-left-color:var(--m-go)}
.pm-gotv .the-cap{border-left-color:var(--m-gotv)}
.pm-chuot .the-cap{border-left-color:var(--m-chuot)}
.pm-ic3 .the-cap{border-left-color:var(--m-ic3)}
.pm-cdso .the-cap{border-left-color:var(--m-cdso)}
.tieu-de-pm{display:flex;align-items:center;gap:10px}
.tieu-de-pm .cham{width:14px;height:14px;border-radius:5px}

/* Khối kết quả cuối lượt */
.ket-qua-hop{text-align:center}
.ket-qua-hop .diem-to{font-size:44px;font-weight:900;color:var(--vang);line-height:1}
.hang-so{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;font-size:15px;margin:12px 0}

/* Nút âm thanh nổi */
#nut-am{position:fixed;right:14px;bottom:14px;z-index:40;background:#fff;
  border:2px solid var(--vien);color:var(--muc);border-radius:999px;
  padding:9px 15px;font-size:14px;font-weight:700;cursor:pointer;box-shadow:var(--bong)}

/* Hoa giấy */
.hoa-giay{position:fixed;pointer-events:none;z-index:60;width:9px;height:9px;border-radius:2px}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}