/* =========================================================================
   AI-TNH Compass — Trường THPT Trần Nguyên Hãn

   NGUYÊN TẮC THIẾT KẾ
   -------------------
   1. Logo trường chỉ xuất hiện MỘT chỗ trên mỗi màn hình: góc trái thanh đầu
      trang. Lặp logo ở chân trang, ở giữa trang đăng nhập hay trang lỗi làm
      giao diện rối và trông nghiệp dư. Bản in là ngoại lệ duy nhất — văn bản
      in ra giấy cần có dấu trường.
   2. Màu lấy từ logo: xanh #02369B, đỏ #D62923. Dùng DÈ SẺN — nền và chữ giữ
      tông trung tính, màu thương hiệu chỉ dành cho hành động chính và điểm nhấn.
   3. Viền mảnh thay cho đổ bóng dày. Khoảng trắng rộng thay cho đường kẻ.
   ========================================================================= */

/* Phông Be Vietnam Pro — tự lưu trữ, không gọi ra máy chủ bên ngoài.
   Trước đây CSS có khai tên phông này nhưng không hề tải, nên trang thực tế
   rơi về Segoe UI. */
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/be-vietnam-pro-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/be-vietnam-pro-400-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/be-vietnam-pro-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/be-vietnam-pro-600-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/be-vietnam-pro-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/be-vietnam-pro-700-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}

:root{
  --brand:#02369B; --brand-red:#D62923;

  --paper:#F6F8FC; --surface:#FFFFFF; --surface-2:#F0F3F9;
  --ink:#111726; --ink-2:#414C63; --muted:#6D7889;
  --line:#E4E8F0; --line-strong:#CBD3E0;
  --accent:#02369B; --accent-soft:#EDF2FD;
  --signal:#C0201A; --signal-soft:#FDEDEC;
  --gold:#8A6410; --gold-soft:#FBF3E2;

  --r-lg:12px; --r-md:9px; --r-sm:6px;
  --shadow:0 1px 2px rgba(17,23,38,.05);
  --shadow-lift:0 2px 4px rgba(17,23,38,.06),0 12px 28px rgba(17,23,38,.06);
  --focus:0 0 0 3px rgba(2,54,155,.22);
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0B111F; --surface:#141B2B; --surface-2:#1B2436;
    --ink:#EAEEF6; --ink-2:#B3BFD2; --muted:#8593A8;
    --line:#242F44; --line-strong:#38455E;
    --accent:#7FA8FF; --accent-soft:#16243D;
    --signal:#FF847C; --signal-soft:#3A1815;
    --gold:#DFB755; --gold-soft:#2C2513;
    --shadow:0 1px 2px rgba(0,0,0,.4);
    --shadow-lift:0 2px 4px rgba(0,0,0,.4),0 12px 28px rgba(0,0,0,.35);
    --focus:0 0 0 3px rgba(127,168,255,.3);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Be Vietnam Pro","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:15.5px; line-height:1.65; letter-spacing:-.003em;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--accent);text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
.wrap{max-width:840px;margin:0 auto;padding:0 24px}
/* Cot hep cho nhung trang chi co mot viec duy nhat can lam (vd dang nhap).
   De nguyen be ngang 840px thi form hai o trong menh mong, nhin thieu chac chan. */
.col-narrow{max-width:470px;margin:0 auto}
.col-narrow .grid2{grid-template-columns:1fr}

/* ---------------------------------------------------------------- header */
.top{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(17,23,38,.02);
}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-top:14px;padding-bottom:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:13px;min-width:0}
.brand img{flex:0 0 auto;width:38px;height:38px;display:block}
.brand .school{display:block;font-size:10.5px;color:var(--muted);font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;margin-bottom:1px}
.brand strong{display:block;font-size:16.5px;color:var(--ink);font-weight:700;
  letter-spacing:-.018em;line-height:1.15}
.brand .tagline{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
.ver{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.top-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

main{padding:34px 0 48px}

/* ----------------------------------------------------------- kiểu chữ */
h1{font-size:27px;margin:0 0 20px;font-weight:700;letter-spacing:-.028em;
  line-height:1.25}
h2{font-size:16px;margin:0 0 13px;font-weight:600;letter-spacing:-.012em}
h3{font-size:16px;margin:0;font-weight:600}
h4{font-size:11px;margin:0 0 6px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.09em;font-weight:600}
.lead{font-size:16px;color:var(--ink-2);margin:-8px 0 24px;line-height:1.6}

/* ------------------------------------------------------------ disclaimer */
.disclaimer{
  background:var(--gold-soft);border:1px solid transparent;
  border-left:3px solid var(--gold);border-radius:var(--r-md);
  padding:15px 19px;font-size:13.5px;line-height:1.6;margin-bottom:26px;
  color:var(--ink-2);
}
.disclaimer strong{color:var(--ink)}
.privacy{display:inline-block;margin-top:6px;color:var(--accent);font-weight:600;font-size:13px}

/* ----------------------------------------------------------------- cards */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 24px;margin-bottom:16px;box-shadow:var(--shadow);
}
.hint{margin:-4px 0 16px;font-size:13px;color:var(--muted);line-height:1.6}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
label{display:block;font-size:13px;color:var(--ink-2);font-weight:600}
input,select{
  width:100%;margin-top:6px;padding:11px 13px;font:inherit;font-size:15px;
  border:1px solid var(--line-strong);border-radius:var(--r-md);
  background:var(--surface);color:var(--ink);
  transition:border-color .12s,box-shadow .12s;
}
input::placeholder{color:var(--muted)}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus)}
.code-preview{margin:14px 0 0;font-size:13px;color:var(--accent);font-weight:600}

/* --------------------------------------------------------------- buttons */
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
button{font:inherit;font-size:14.5px;font-weight:600;border-radius:var(--r-md);
  cursor:pointer;padding:11px 22px;min-height:44px;
  transition:background-color .12s,border-color .12s,color .12s}
button:focus-visible{outline:none;box-shadow:var(--focus)}
.primary{background:var(--accent);color:#fff;border:1px solid var(--accent)}
.primary:hover{background:#022C82;border-color:#022C82}
.ghost{background:var(--surface);color:var(--ink-2);border:1px solid var(--line-strong)}
.ghost:hover{color:var(--ink);border-color:var(--ink-2)}
.danger{background:var(--signal);color:#fff;border:1px solid var(--signal)}

/* --------------------------------------------------------------- results */
.result-head{display:flex;justify-content:space-between;align-items:center;
  gap:12px;flex-wrap:wrap;margin-bottom:20px}
.result-head h1{margin:0}

.warn{border-radius:var(--r-md);padding:13px 17px;font-size:13.5px;margin-bottom:10px;
  border:1px solid transparent;border-left-width:3px;line-height:1.6}
.warn-cao{background:var(--signal-soft);border-left-color:var(--signal);color:var(--ink-2)}
.warn-trung-binh{background:var(--gold-soft);border-left-color:var(--gold);color:var(--ink-2)}
.warn-thap{background:var(--surface-2);border-left-color:var(--line-strong);color:var(--ink-2)}

.combo{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 24px;margin-bottom:12px;box-shadow:var(--shadow);
}
.combo.rank1{border-color:var(--accent);box-shadow:var(--shadow-lift)}
.combo.rank2{border-color:var(--line-strong)}
.combo-head{display:flex;gap:15px;align-items:flex-start;flex-wrap:wrap}
.rank-badge{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  background:var(--surface-2);color:var(--ink-2);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;
}
.combo.rank1 .rank-badge{background:var(--accent);color:#fff}
.combo-head>div{flex:1 1 200px;min-width:0}
.subjects{margin:4px 0 0;font-size:13.5px;color:var(--muted)}
.rel{font-size:13px;color:var(--ink-2);white-space:nowrap}
.rel b{color:var(--accent)}
.rel-thấp b{color:var(--muted)}

.thin{margin:14px 0 0;font-size:12.5px;color:var(--gold);
  background:var(--gold-soft);padding:9px 13px;border-radius:var(--r-sm)}
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:18px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.why ul{margin:0;padding-left:18px;font-size:13.5px;color:var(--ink-2)}
.why li{margin:4px 0}
.careers{margin:16px 0 0;font-size:12.5px;color:var(--muted)}
.careers span{font-weight:600;color:var(--ink-2)}

.all-combos summary{cursor:pointer;font-weight:600;font-size:14.5px;padding:6px 0}
.tbl-scroll{overflow-x:auto;margin-top:14px;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:13.5px;min-width:440px}
th,td{padding:10px 13px;text-align:left;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:none}
th{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);
  background:var(--surface-2);font-weight:600}
td.num{font-variant-numeric:tabular-nums;color:var(--ink-2);font-weight:600}
/* Bảng hai cột "tên mục — con số": không ép bề ngang tối thiểu, vì nếu ép thì
   trên điện thoại cột con số bị đẩy ra ngoài và phải kéo ngang mới thấy. */
.tbl-kv{min-width:0}
.tbl-kv td.num{text-align:right;white-space:nowrap}

.footer-note{margin-top:24px;padding:18px 22px;background:var(--surface-2);
  border-radius:var(--r-lg);font-size:13.5px;color:var(--ink-2)}
.footer-note p{margin:0 0 10px}
.footer-note p:last-child{margin:0}
.footer-note strong{color:var(--ink)}

.error{background:var(--signal-soft);border:1px solid transparent;
  border-left:3px solid var(--signal);
  border-radius:var(--r-md);padding:16px 20px;font-size:14px}
code{font-family:ui-monospace,"Consolas",monospace;font-size:12.5px;
  background:var(--surface-2);padding:2px 6px;border-radius:5px;
  color:var(--ink-2);overflow-wrap:anywhere}

.bottom{border-top:1px solid var(--line);margin-top:44px;padding:22px 0 40px;
  font-size:12.5px;color:var(--muted)}
.bottom .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  align-items:center}

/* ------------------------------------------------------------- trang lỗi
   Không đặt logo ở đây: thanh đầu trang đã có rồi. Điểm nhìn đầu tiên là mã
   lỗi và câu tiêu đề, để người đọc biết ngay chuyện gì xảy ra. */
.errpage{padding:16px 0 4px;max-width:600px}
.errpage .code{display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--signal);background:var(--signal-soft);
  padding:6px 13px;border-radius:999px;margin-bottom:18px}
.errpage .code::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--signal);flex:0 0 auto}
.errpage .code.calm{color:var(--accent);background:var(--accent-soft)}
.errpage .code.calm::before{background:var(--accent)}
.errpage h1{margin:0 0 12px;font-size:30px}
.errpage .lead{margin:0 0 26px;color:var(--ink-2);font-size:16px}
.err-steps{margin:0;padding-left:20px;color:var(--ink-2);
  font-size:14.5px;line-height:1.8}
.err-steps li{margin:8px 0}
.err-steps li::marker{color:var(--muted);font-weight:600}
.err-ref{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted)}

/* ------------------------------------------------- khảo sát (bản Laravel) */
.q-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 18px;margin-bottom:10px;box-shadow:var(--shadow)}
.q-item.answered{border-color:var(--line-strong);background:var(--surface)}
.q-item.answered .q-num{color:var(--accent)}
.q-item.missing{border-color:var(--signal);background:var(--signal-soft)}
.q-text{font-size:15px;margin-bottom:12px;display:flex;gap:12px;align-items:baseline;
  font-weight:500}
.q-num{flex:0 0 auto;font-size:12px;color:var(--muted);font-weight:700;min-width:20px;
  font-variant-numeric:tabular-nums}
.q-opts{display:flex;gap:7px;flex-wrap:wrap}
.q-opt{flex:1 1 92px;display:flex;flex-direction:column;align-items:center;gap:3px;
  border:1px solid var(--line-strong);border-radius:var(--r-md);padding:9px 5px;
  cursor:pointer;font-size:12.5px;color:var(--ink-2);text-align:center;
  min-height:54px;justify-content:center;
  transition:border-color .12s,background-color .12s}
.q-opt:hover{border-color:var(--accent);color:var(--ink)}
.q-opt input{width:auto;margin:0}
.q-opt input:checked ~ span{color:var(--accent);font-weight:700}
.q-opt small{font-size:11px;color:var(--muted);line-height:1.3}
.q-opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.q-opt:focus-within{box-shadow:var(--focus);border-color:var(--accent)}
.q-anchors{display:none}
.sticky-bar{position:sticky;bottom:0;background:var(--surface);
  border-top:1px solid var(--line);
  padding:14px 0;display:flex;justify-content:space-between;align-items:center;gap:12px;
  flex-wrap:wrap;margin-top:14px}
.sticky-bar span{font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums;
  max-width:70%}
.sticky-bar span.done{color:var(--accent);font-weight:600}

textarea{
  width:100%;margin-top:6px;padding:11px 13px;font:inherit;font-size:15px;
  border:1px solid var(--line-strong);border-radius:var(--r-md);
  background:var(--surface);color:var(--ink);resize:vertical;min-height:76px;
}
textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus)}
.warn-row td{background:var(--signal-soft)}

/* ==================================================== máy tính bảng nhỏ */
@media (max-width:760px){
  .wrap{padding:0 18px}
  main{padding:26px 0 40px}
  h1{font-size:24px}
  .errpage h1{font-size:26px}
  .card,.combo{padding:19px 20px}
}

/* ============================================================= điện thoại
   Ba việc quan trọng nhất ở đây:
   1. Ô nhập để cỡ chữ 16px — dưới mức này Safari trên iPhone TỰ PHÓNG TO trang
      khi người dùng chạm vào ô, rất khó chịu giữa chừng bài khảo sát 60 câu.
   2. Nút bấm trải hết chiều ngang, cao tối thiểu 46px cho vừa đầu ngón tay.
   3. Năm mức trả lời gộp thành MỘT hàng chỉ hiện con số; chữ của từng mức ẩn đi
      nhưng trình đọc màn hình vẫn đọc được, và nhãn hai đầu chuyển xuống dòng
      riêng. Nếu để nguyên chữ trong từng ô thì mỗi câu chiếm ba hàng, cả phiếu
      60 câu dài tới hơn 35.000 điểm ảnh.
   ----------------------------------------------------------------------- */
@media (max-width:620px){
  body{font-size:15px}
  .wrap{padding:0 16px}
  main{padding:22px 0 36px}
  h1{font-size:22px;margin-bottom:16px}
  .errpage h1{font-size:23px}
  .errpage .lead,.lead{font-size:15px}

  input,select,textarea{font-size:16px}

  .actions{gap:9px}
  .actions button{flex:1 1 100%}

  .top .wrap{padding-top:12px;padding-bottom:12px;gap:10px}
  .brand img{width:34px;height:34px}
  .brand strong{font-size:15.5px}
  .top-right{width:100%;justify-content:space-between}

  .q-opts{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
  .q-opt{flex:none;min-height:48px;padding:7px 2px;position:relative;
    font-size:15.5px;font-weight:600}
  .q-opt small{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
  .q-anchors{display:flex;justify-content:space-between;gap:10px;margin-top:7px;
    font-size:11.5px;color:var(--muted);line-height:1.35}
  .q-anchors span:last-child{text-align:right}
  .q-item{padding:14px 15px}
  .q-text{font-size:14.5px;margin-bottom:11px}

  .card,.combo{padding:17px 17px;margin-bottom:12px}
  .disclaimer{padding:13px 15px;font-size:13px;margin-bottom:20px}
  .tbl-kv td{padding:9px 4px}
  .combo-head{gap:12px}
  .sticky-bar{padding:12px 0}
  .sticky-bar span{max-width:100%;font-size:13px}
  .sticky-bar button{flex:1 1 100%}
  .bottom .wrap{flex-direction:column;align-items:flex-start;gap:6px}
}

@media (max-width:390px){
  .wrap{padding:0 14px}
  .brand .tagline{display:none}
}

/* ------------------------------------------------------------------ in ấn
   Đây là chỗ DUY NHẤT ngoài thanh đầu trang được phép có logo: tờ kết quả in
   ra đưa cho học sinh và gia đình cần mang dấu của Nhà trường. */
@media print{
  .top,.bottom,.actions,#btn-back,#btn-print,.all-combos{display:none!important}
  body{background:#fff;color:#000;font-size:12px}
  .card,.combo{box-shadow:none;break-inside:avoid;border-color:#B9C2D0}
  .print-head{display:flex!important;align-items:center;gap:14px;margin-bottom:18px;
    padding-bottom:12px;border-bottom:2px solid #02369B}
  .print-head img{width:54px;height:54px}
  .print-head strong{font-size:14px}
  .print-head span{font-size:11px;color:#444}
}
.print-head{display:none}

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