/* =========================================================================
   Hệ thống giao diện.

   Hướng thiết kế: tươi trẻ, bo tròn, nền kem ấm. Người dùng chính là học sinh
   trung học nên tránh vẻ nghiêm trọng của phần mềm văn phòng.

   Hai sản phẩm dùng chung bố cục nhưng khác màu nhấn:
     - Hệ thống 1, trợ giảng   : màu san hô
     - Hệ thống 2, kỳ thi      : màu xanh mint
   Chỉ có một bộ màu sáng, không làm chế độ tối.
   Đặt data-he-thong="1" hoặc "2" trên thẻ body để đổi.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,600;0,700;0,800;0,900;1,400&display=swap');

:root {
  /* nền và chữ, tông ấm */
  --kem:      #fff8f3;
  --kem-dam:  #ffeee4;
  --the:      #ffffff;
  --the-mo:   #fffaf6;
  --chu:      #2e2735;
  --chu-vua:  #6b6175;
  --chu-mo:   #a89fb0;
  --vien:     #f2e4da;
  --vien-dam: #e6d3c6;

  /* san hô, hệ thống 1 */
  --san-ho-50:  #fff0ed;
  --san-ho-100: #ffdcd5;
  --san-ho:     #ff6f5e;
  --san-ho-dam: #ec4c3a;
  --san-ho-sau: #b8321f;

  /* mint, hệ thống 2 */
  --mint-50:  #e8fbf7;
  --mint-100: #c4f3e9;
  --mint:     #14c4a8;
  --mint-dam: #0ea08a;
  --mint-sau: #07705f;

  /* phụ trợ */
  --nang-50: #fff6e0;
  --nang:    #ffc44d;
  --nang-sau:#9a6400;
  --tim:     #9b7ede;
  --do:      #f4563f;
  --do-50:   #fff0ed;
  --do-sau:  #b8321f;

  /* màu nhấn, mặc định san hô, đổi theo hệ thống */
  --nhan-50:  var(--san-ho-50);
  --nhan-100: var(--san-ho-100);
  --nhan:     var(--san-ho);
  --nhan-dam: var(--san-ho-dam);
  --nhan-sau: var(--san-ho-sau);

  /* bóng đổ ấm, không dùng xám */
  --bong-1: 0 2px 6px rgba(186, 120, 95, .07);
  --bong-2: 0 4px 14px rgba(186, 120, 95, .10);
  --bong-3: 0 10px 34px rgba(186, 120, 95, .16);

  --r-nho:  14px;
  --r-vua:  20px;
  --r-lon:  28px;
  --r-tron: 999px;

  --nhanh: .15s cubic-bezier(.34, 1.3, .64, 1);
  --vua:   .3s  cubic-bezier(.34, 1.3, .64, 1);
}

body[data-he-thong="2"] {
  --nhan-50:  var(--mint-50);
  --nhan-100: var(--mint-100);
  --nhan:     var(--mint);
  --nhan-dam: var(--mint-dam);
  --nhan-sau: var(--mint-sau);
}

* { box-sizing: border-box; }

/* Hệ thống chỉ dùng một bộ màu sáng. Khai báo color-scheme để trình duyệt
   không tự đổi ô nhập, thanh cuộn và menu sang tông tối khi máy của người
   dùng đang bật chế độ tối. */
html { scroll-behavior: smooth; color-scheme: light; }

body {
  margin: 0;
  font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--kem);
  color: var(--chu);
  line-height: 1.65;
  font-size: 16.5px;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

/* vệt màu mềm ở đầu trang cho đỡ phẳng */
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: 380px; z-index: -1;
  background:
    radial-gradient(760px 300px at 12% -8%, var(--nhan-50), transparent 68%),
    radial-gradient(620px 260px at 88% -14%, var(--nang-50), transparent 66%);
  pointer-events: none;
}

.khung { max-width: 1040px; margin: 0 auto; padding: 26px 18px 84px; }
.khung-hep { max-width: 620px; }

h1, h2, h3 { line-height: 1.26; letter-spacing: -.015em; font-weight: 800; margin: 0; }

/* ------------------------------------------------------- thanh điều hướng */
header.dinh { position: sticky; top: 0; z-index: 60; background: transparent; }
header.dinh .trong {
  max-width: 1040px; margin: 10px auto 0; padding: 12px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: color-mix(in srgb, var(--the) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.5);
  border: 1.5px solid var(--vien);
  border-radius: var(--r-lon);
  box-shadow: var(--bong-1);
}
header.dinh h1 { font-size: 18.5px; }
header.dinh .logo-dau {
  width: 40px; height: 40px; border-radius: 13px; flex: 0 0 auto;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, var(--nhan), var(--nang));
  box-shadow: var(--bong-1);
}
header.dinh .logo-dau svg { width: 22px; height: 22px; stroke-width: 2.2; }
header.dinh .phu {
  font-size: 12.8px; font-weight: 600; color: var(--chu-mo);
  display: block; letter-spacing: 0;
}
header.dinh a {
  color: var(--chu-vua); text-decoration: none; font-size: 14.5px; font-weight: 700;
  padding: 7px 13px; border-radius: var(--r-tron); transition: var(--nhanh);
}
header.dinh a:hover { background: var(--nhan-50); color: var(--nhan-sau); }

.nguoi { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 700; }
.anh-dai-dien {
  width: 38px; height: 38px; border-radius: var(--r-tron); flex: 0 0 auto;
  background: linear-gradient(140deg, var(--nhan), var(--nang));
  color: #fff; display: grid; place-items: center;
  font-weight: 800; font-size: 15px; box-shadow: var(--bong-1);
}

/* thanh tab */
.tab-phu { position: sticky; top: 76px; z-index: 55; }
.tab-phu .trong {
  max-width: 1040px; margin: 10px auto 0; padding: 6px;
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  background: color-mix(in srgb, var(--the) 82%, transparent);
  backdrop-filter: blur(14px); border: 1.5px solid var(--vien);
  border-radius: var(--r-tron); box-shadow: var(--bong-1);
}
.tab-phu .trong::-webkit-scrollbar { display: none; }
.tab-phu a {
  padding: 9px 17px; font-size: 14.5px; font-weight: 700; white-space: nowrap;
  color: var(--chu-vua); text-decoration: none;
  border-radius: var(--r-tron); transition: var(--nhanh);
}
.tab-phu a:hover { background: var(--nhan-50); color: var(--nhan-sau); }
.tab-phu a.dang-o {
  background: var(--nhan); color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--nhan) 38%, transparent);
}

/* ------------------------------------------------------------------- thẻ */
.the {
  background: var(--the); border: 1.5px solid var(--vien);
  border-radius: var(--r-lon); padding: 26px; margin-bottom: 18px;
  box-shadow: var(--bong-1);
  animation: bat-len .4s cubic-bezier(.34, 1.3, .64, 1) both;
}
@keyframes bat-len { from { opacity: 0; transform: translateY(14px) scale(.985); } }

.the.phang { box-shadow: none; background: transparent; border-style: dashed; }
.the.gon { padding: 18px; border-radius: var(--r-vua); }
.the h2 { font-size: 22px; margin-bottom: 7px; }
.the h3 { font-size: 17.5px; margin: 22px 0 9px; }
.mo { color: var(--chu-vua); font-size: 14.8px; font-weight: 500; margin: 0 0 15px; }
.mo-nho { color: var(--chu-mo); font-size: 13.4px; font-weight: 600; }

.the-bam {
  text-decoration: none; color: inherit; display: block; position: relative;
  overflow: hidden;
  transition: transform var(--vua), box-shadow var(--vua), border-color var(--vua);
}
.the-bam::after {
  content: ""; position: absolute; inset: auto -40% -70% auto;
  width: 190px; height: 190px; border-radius: 50%;
  background: var(--nhan-50); opacity: 0; transition: opacity var(--vua);
}
.the-bam:hover {
  transform: translateY(-5px) rotate(-.35deg);
  box-shadow: var(--bong-3); border-color: var(--nhan-100);
}
.the-bam:hover::after { opacity: 1; }
.the-bam > * { position: relative; z-index: 1; }

/* ----------------------------------------------------------------- lưới */
.luoi { display: grid; gap: 17px; }
.luoi-2 { grid-template-columns: repeat(auto-fit, minmax(282px, 1fr)); }
.luoi-3 { grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); }
.luoi-4 { grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); }

/* ------------------------------------------------------------- biểu tượng */
.bt {
  width: 52px; height: 52px; border-radius: 18px; display: grid; place-items: center;
  background: var(--nhan-50); color: var(--nhan-dam); margin-bottom: 14px;
  transition: transform var(--vua);
}
.bt svg { width: 26px; height: 26px; stroke-width: 2.1; }
.the-bam:hover .bt { transform: rotate(-7deg) scale(1.07); }
svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

/* --------------------------------------------------------------- nút bấm */
button, .nut {
  font: inherit; font-weight: 800; font-size: 15.3px; cursor: pointer;
  border: none; border-radius: var(--r-tron); padding: 12px 24px;
  background: var(--nhan); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 4px 0 0 var(--nhan-dam);
  transition: transform var(--nhanh), box-shadow var(--nhanh), background var(--nhanh);
}
button:hover, .nut:hover {
  transform: translateY(-2px); box-shadow: 0 6px 0 0 var(--nhan-dam);
}
button:active, .nut:active { transform: translateY(2px); box-shadow: 0 2px 0 0 var(--nhan-dam); }
button:focus-visible, .nut:focus-visible, a:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--nhan-sau); outline-offset: 3px;
}
button:disabled { opacity: .45; cursor: not-allowed; transform: none; }

button.phu, .nut.phu {
  background: var(--the); color: var(--chu);
  border: 2px solid var(--vien-dam); box-shadow: 0 3px 0 0 var(--vien-dam);
}
button.phu:hover, .nut.phu:hover {
  background: var(--nhan-50); border-color: var(--nhan-100);
  color: var(--nhan-sau); box-shadow: 0 5px 0 0 var(--nhan-100);
}
button.nhe, a.nut.nhe { background: transparent; color: var(--chu-vua); box-shadow: none; }
button.nhe:hover, a.nut.nhe:hover { background: var(--kem-dam); color: var(--chu); box-shadow: none;
  transform: none; }
button.nguy { background: var(--do); box-shadow: 0 4px 0 0 var(--do-sau); }
button.nguy:hover { box-shadow: 0 6px 0 0 var(--do-sau); }
button.nho, .nut.nho { padding: 8px 16px; font-size: 13.8px; }
button.rong { width: 100%; }

/* --------------------------------------------------------------- ô nhập */
label { display: block; font-weight: 800; font-size: 13.8px; margin-bottom: 7px;
        color: var(--chu-vua); }
input, select, textarea {
  font: inherit; font-weight: 600; width: 100%; color: var(--chu);
  padding: 13px 17px; border: 2px solid var(--vien-dam);
  border-radius: var(--r-vua); background: var(--the);
  transition: border-color var(--nhanh), box-shadow var(--nhanh);
}
input::placeholder, textarea::placeholder { color: var(--chu-mo); font-weight: 500; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--nhan);
  box-shadow: 0 0 0 4px var(--nhan-50);
}
textarea { resize: vertical; min-height: 84px; }
input[type="file"] { padding: 11px; cursor: pointer; font-weight: 600; }

.hang { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.hang > .o { flex: 1 1 190px; min-width: 0; }
.hang > button, .hang > .nut { flex: 0 0 auto; }

/* ------------------------------------------------------------ hội thoại */
.hoi-thoai {
  display: flex; flex-direction: column; gap: 14px;
  min-height: 210px; max-height: 56vh; overflow-y: auto; padding: 4px 2px 10px;
}
.bong-chat {
  max-width: 85%; padding: 15px 19px; white-space: pre-wrap; word-break: break-word;
  font-size: 15.6px; font-weight: 500; line-height: 1.6;
  animation: noi-len .35s cubic-bezier(.34, 1.3, .64, 1) both;
}
@keyframes noi-len { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.bong-chat.em {
  align-self: flex-end; background: var(--nhan); color: #fff;
  border-radius: 24px 24px 7px 24px;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--nhan) 32%, transparent);
}
.bong-chat.may {
  align-self: flex-start; background: var(--kem-dam); color: var(--chu);
  border-radius: 24px 24px 24px 7px;
}
.bong-chat.loi {
  align-self: flex-start; background: var(--do-50); color: var(--do-sau);
  border: 2px solid var(--do); border-radius: 24px 24px 24px 7px;
}

.dang-go { display: inline-flex; gap: 6px; padding: 17px 21px; align-items: center; }
.dang-go i {
  width: 9px; height: 9px; border-radius: 50%; background: var(--nhan);
  display: block; animation: nhay 1.3s infinite ease-in-out;
}
.dang-go i:nth-child(2) { animation-delay: .17s; }
.dang-go i:nth-child(3) { animation-delay: .34s; }
@keyframes nhay {
  0%, 62%, 100% { transform: translateY(0) scale(.82); opacity: .35; }
  31% { transform: translateY(-9px) scale(1); opacity: 1; }
}

/* ------------------------------------------------------------- huy hiệu */
.nhan {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: var(--r-tron);
  font-size: 12.8px; font-weight: 800; line-height: 1.5;
  background: var(--nhan-50); color: var(--nhan-sau);
}
.nhan.luc { background: var(--mint-50); color: var(--mint-sau); }
.nhan.cam { background: var(--nang-50); color: var(--nang-sau); }
.nhan.do  { background: var(--do-50);   color: var(--do-sau); }
.nhan.xam { background: var(--kem-dam); color: var(--chu-vua); }

.chuoi {
  display: flex; align-items: center; gap: 17px;
  background: linear-gradient(128deg, #ffd980, var(--nang));
  border-radius: var(--r-lon); padding: 18px 24px; color: #6b4200;
  font-weight: 800; box-shadow: 0 6px 20px rgba(255, 196, 77, .36);
}
.chuoi .so { font-size: 38px; line-height: 1; font-weight: 800; }

/* -------------------------------------------------------------- số liệu */
.o-so {
  text-align: center; padding: 22px 14px; background: var(--the);
  border: 1.5px solid var(--vien); border-radius: var(--r-vua);
  transition: transform var(--vua), box-shadow var(--vua);
}
.o-so:hover { transform: translateY(-4px) rotate(.5deg); box-shadow: var(--bong-2); }
.o-so .so { font-size: 36px; font-weight: 800; line-height: 1.1; color: var(--nhan-dam); }
.o-so .ten { font-size: 13px; color: var(--chu-vua); margin-top: 6px; font-weight: 700; }

/* ----------------------------------------------------------- thanh ngang */
.thanh { background: var(--kem-dam); border-radius: var(--r-tron); height: 13px;
         overflow: hidden; }
.thanh > i {
  display: block; height: 100%; border-radius: var(--r-tron);
  background: linear-gradient(90deg, var(--nhan), var(--nang));
  transition: width .8s cubic-bezier(.34, 1.2, .64, 1);
}
.thanh.luc > i { background: linear-gradient(90deg, var(--mint), #7ee8d4); }
.thanh.cam > i { background: linear-gradient(90deg, var(--nang), #ffe08a); }

/* ---------------------------------------------------------------- bảng */
.cuon-ngang { overflow-x: auto; border-radius: var(--r-vua); }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; font-weight: 600; }
th, td { padding: 13px 15px; text-align: left; border-bottom: 1.5px solid var(--vien); }
th {
  font-weight: 800; color: var(--chu-vua); font-size: 12.4px;
  text-transform: uppercase; letter-spacing: .5px;
  background: var(--the-mo); position: sticky; top: 0;
}
th:first-child { border-top-left-radius: var(--r-vua); }
th:last-child  { border-top-right-radius: var(--r-vua); }
tbody tr { transition: background var(--nhanh); }
tbody tr:hover { background: var(--nhan-50); }
tbody tr:last-child td { border-bottom: none; }
td.giua, th.giua { text-align: center; }
td.phai, th.phai { text-align: right; font-variant-numeric: tabular-nums; }
td.hep { white-space: nowrap; }
.cat-dong {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; max-width: 330px; line-height: 1.5;
}

/* --------------------------------------------------------------- camera */
.khung-camera {
  position: relative; border-radius: var(--r-lon); overflow: hidden;
  background: #1b1622; aspect-ratio: 4 / 3; box-shadow: var(--bong-2);
  border: 3px solid var(--the);
}
.khung-camera video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform: scaleX(-1);
}
.den-bao {
  position: absolute; top: 12px; left: 12px; right: 12px; z-index: 3;
  display: flex; align-items: center; gap: 9px;
  background: rgba(27, 22, 34, .74); backdrop-filter: blur(10px); color: #fff;
  padding: 9px 15px; border-radius: var(--r-tron);
  font-size: 13.4px; font-weight: 800; transition: background var(--vua);
}
.den-bao .cham {
  width: 10px; height: 10px; border-radius: 50%; background: var(--mint);
  flex: 0 0 auto; animation: toa 2.4s infinite;
}
@keyframes toa {
  0%   { box-shadow: 0 0 0 0 rgba(20, 196, 168, .6); }
  70%  { box-shadow: 0 0 0 11px rgba(20, 196, 168, 0); }
  100% { box-shadow: 0 0 0 0 rgba(20, 196, 168, 0); }
}
.den-bao.canh-bao { background: rgba(236, 76, 58, .9); }
.den-bao.canh-bao .cham { background: #ffd980; animation: dap 1s infinite; }
@keyframes dap { 50% { opacity: .25; } }

/* ------------------------------------------------------------ câu hỏi thi */
.cau {
  padding: 22px; border: 2px solid var(--vien); border-radius: var(--r-lon);
  background: var(--the); margin-bottom: 15px;
  transition: border-color var(--nhanh), transform var(--nhanh);
}
.cau.da-lam { border-color: var(--mint-100); background: var(--mint-50); }
.cau .de { font-weight: 800; margin-bottom: 15px; font-size: 16px; }
.cau .so-cau {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  border-radius: var(--r-tron); background: var(--nhan); color: #fff;
  font-size: 13.4px; font-weight: 800; margin-right: 10px;
}
.cau.da-lam .so-cau { background: var(--mint); }
.pa {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 17px; border: 2px solid var(--vien);
  border-radius: var(--r-vua); margin-bottom: 9px; cursor: pointer;
  background: var(--the); transition: var(--nhanh); font-weight: 600;
}
.pa:hover { border-color: var(--nhan-100); transform: translateX(3px); }
.pa.chon { border-color: var(--nhan); background: var(--nhan-50); font-weight: 800; }
.pa input { width: auto; margin: 4px 0 0; flex: 0 0 auto; accent-color: var(--nhan); }

.dong-ho { font-size: 27px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dong-ho.gap { color: var(--do); animation: dap 1s infinite; }

.luoi-cau { display: flex; flex-wrap: wrap; gap: 7px; }
.luoi-cau button {
  width: 40px; height: 40px; padding: 0; font-size: 14px; border-radius: 13px;
  background: var(--the); color: var(--chu-vua); border: 2px solid var(--vien);
  box-shadow: none;
}
.luoi-cau button:hover { border-color: var(--nhan); color: var(--nhan-sau);
  background: var(--nhan-50); transform: translateY(-2px); box-shadow: none; }
.luoi-cau button.xong { background: var(--mint); color: #fff; border-color: var(--mint); }

/* ---------------------------------------------------------- trạng thái */
.trong-rong { text-align: center; padding: 48px 22px; color: var(--chu-vua); }
.trong-rong .hinh {
  width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 26px;
  background: var(--nhan-50); color: var(--nhan-dam);
  display: grid; place-items: center;
  animation: lac 3.4s ease-in-out infinite;
}
.trong-rong .hinh svg { width: 36px; height: 36px; stroke-width: 2; }
@keyframes lac { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }

.khung-xuong > i {
  display: block; height: 15px; border-radius: var(--r-tron); margin-bottom: 11px;
  background: linear-gradient(90deg, var(--kem-dam) 25%, var(--the-mo) 50%, var(--kem-dam) 75%);
  background-size: 200% 100%; animation: truot 1.4s infinite;
}
@keyframes truot { to { background-position: -200% 0; } }

.canh-bao-o {
  background: var(--nang-50); border: 2px solid var(--nang); color: var(--nang-sau);
  padding: 16px 19px; border-radius: var(--r-vua); font-size: 14.6px; font-weight: 600;
}
.canh-bao-o.luc { background: var(--mint-50); border-color: var(--mint); color: var(--mint-sau); }
.canh-bao-o.tim { background: var(--nhan-50); border-color: var(--nhan); color: var(--nhan-sau); }

/* ------------------------------------------------------------ thông báo */
#khay-thong-bao {
  position: fixed; right: 18px; bottom: 18px; z-index: 200;
  display: flex; flex-direction: column; gap: 10px; max-width: 350px;
}
.thong-bao {
  background: var(--the); border: 2px solid var(--vien);
  border-radius: var(--r-vua); padding: 14px 18px; box-shadow: var(--bong-3);
  font-size: 14.6px; font-weight: 700;
  animation: truot-vao .34s cubic-bezier(.34, 1.3, .64, 1) both;
}
@keyframes truot-vao { from { opacity: 0; transform: translateX(34px) scale(.94); } }
.thong-bao.loi  { border-color: var(--do);   background: var(--do-50);   color: var(--do-sau); }
.thong-bao.xong { border-color: var(--mint); background: var(--mint-50); color: var(--mint-sau); }

/* ----------------------------------------------------------------- lớp phủ */
.lop-phu {
  position: fixed; inset: 0; background: rgba(46, 39, 53, .52);
  backdrop-filter: blur(5px); z-index: 150;
  display: flex; align-items: center; justify-content: center; padding: 22px;
  animation: mo-dan .22s ease both;
}
@keyframes mo-dan { from { opacity: 0; } }
.lop-phu .the {
  margin: 0; max-width: 500px; width: 100%; max-height: 86vh;
  overflow: auto; position: relative;
  animation: bung .34s cubic-bezier(.34, 1.4, .64, 1) both;
}
@keyframes bung { from { opacity: 0; transform: scale(.9) translateY(18px); } }
.lop-phu .the > .hang:last-child {
  position: sticky; bottom: -26px; margin-bottom: -26px;
  padding: 16px 0 26px; background: var(--the);
}

/* --------------------------------------------------------------- tiện ích */
.giua { text-align: center; }
.phai { text-align: right; }
.cach { margin-top: 20px; }
.cach-nho { margin-top: 12px; }
.an { display: none !important; }
.gon-gang { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.xep { display: flex; flex-direction: column; gap: 11px; }
.bao { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }

/* =========================================================================
   Trang giới thiệu (landing) nhận biết theo tên miền.
   Dùng chung ngôn ngữ thiết kế: nền kem, màu nhấn theo hệ thống, bo tròn.
   ========================================================================= */
.gioi-thieu { max-width: 1080px; }

.top-gon {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 6px 2px 0; margin-bottom: 6px;
}
.logo-gon { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 18px; }
.logo-gon .cham {
  width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center;
  color: #fff; flex: 0 0 auto;
  background: linear-gradient(140deg, var(--nhan), var(--nang)); box-shadow: var(--bong-1);
}
.logo-gon .cham svg { width: 23px; height: 23px; stroke-width: 2.2; }
.logo-gon .ten-mien { font-size: 13px; font-weight: 700; color: var(--chu-mo); display: block; }

/* ------------------------------------------------------------------- hero */
.hero {
  display: grid; grid-template-columns: 1.08fr .92fr; gap: 36px; align-items: center;
  padding: 30px 0 10px;
}
.chu-hero { animation: bat-len .5s cubic-bezier(.34, 1.3, .64, 1) both; }
.huy-hieu-lon {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 17px;
  border-radius: var(--r-tron); background: var(--nhan-50); color: var(--nhan-sau);
  font-weight: 800; font-size: 13.4px; margin-bottom: 18px;
}
.huy-hieu-lon .cham-nho {
  width: 9px; height: 9px; border-radius: 50%; background: var(--nhan);
  animation: toa 2.4s infinite;
}
.tieu-de-lon {
  font-size: clamp(30px, 4.7vw, 50px); line-height: 1.08;
  letter-spacing: -.022em; font-weight: 800;
}
.tieu-de-lon .sang {
  background: linear-gradient(120deg, var(--nhan-dam), var(--nang-sau));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dan-hero {
  font-size: 17.5px; color: var(--chu-vua); font-weight: 500;
  margin: 18px 0 28px; max-width: 48ch; line-height: 1.6;
}
.nut-nhom { display: flex; gap: 13px; flex-wrap: wrap; }
.nut.lon { padding: 15px 30px; font-size: 16.5px; border-radius: var(--r-tron); }

.hero-hinh { position: relative; display: grid; place-items: center; min-height: 310px; }
.hero-hinh::before {
  content: ""; position: absolute; inset: 2% 0;
  background:
    radial-gradient(58% 58% at 52% 38%, var(--nhan-50), transparent 72%),
    radial-gradient(48% 48% at 72% 78%, var(--nang-50), transparent 70%);
  z-index: 0;
}
.hero-hinh .minh-hoa {
  position: relative; z-index: 1; width: 100%; max-width: 392px; height: auto;
  color: var(--nhan-dam);
  animation: trôi 6s ease-in-out infinite;
}
@keyframes trôi { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* --------------------------------------------------------------- dải số liệu */
.dai-so { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 32px; }
.the-so {
  background: var(--the); border: 1.5px solid var(--vien); border-radius: var(--r-vua);
  padding: 20px 22px; box-shadow: var(--bong-1);
  transition: transform var(--vua), box-shadow var(--vua);
}
.the-so:hover { transform: translateY(-4px); box-shadow: var(--bong-2); }
.the-so .to { font-size: 29px; font-weight: 800; color: var(--nhan-dam); line-height: 1; letter-spacing: -.01em; }
.the-so .nho { font-size: 13.4px; color: var(--chu-vua); font-weight: 700; margin-top: 8px; }

/* ----------------------------------------------------------------- các bước */
.khoi { margin-top: 44px; }
.khoi > h2 { font-size: 24px; margin-bottom: 6px; }
.cac-buoc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.buoc {
  background: var(--the); border: 1.5px solid var(--vien); border-radius: var(--r-lon);
  padding: 24px; box-shadow: var(--bong-1);
  transition: transform var(--vua), box-shadow var(--vua), border-color var(--vua);
}
.buoc:hover { transform: translateY(-4px); box-shadow: var(--bong-2); border-color: var(--nhan-100); }
.buoc .stt {
  width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center;
  background: var(--nhan); color: #fff; font-weight: 800; font-size: 17px;
  margin-bottom: 15px; box-shadow: 0 4px 0 0 var(--nhan-dam);
}
.buoc h3 { font-size: 17px; margin-bottom: 7px; }

.the-dang-nhap { max-width: 470px; margin: 44px auto 0; }

/* hai thẻ sản phẩm cho trang mặc định (localhost) */
.the-san-pham { display: block; text-decoration: none; color: inherit; }

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; gap: 6px; padding-top: 18px; }
  .hero-hinh { order: -1; min-height: 210px; }
  .hero-hinh .minh-hoa { max-width: 250px; }
  .dai-so { grid-template-columns: 1fr; }
  .cac-buoc { grid-template-columns: 1fr; }
  .tieu-de-lon { font-size: clamp(27px, 8vw, 38px); }
}

/* Ô chọn tệp: chữ tiếng Việt cố định thay cho "Choose File / No file chosen" của trình duyệt */
.chon-tep { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.chon-tep .khung-chon { position: relative; display: inline-block; }
/* Ô nhập phủ đúng lên nút nên vùng chạm thật bằng nút, nhưng chữ hiện ra là của ứng dụng */
.chon-tep input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0;
  opacity: 0; cursor: pointer; }
.chon-tep .nut-chon { margin: 0; cursor: pointer; }
.chon-tep input[type=file]:focus-visible + .nut-chon { outline: 3px solid var(--tim); outline-offset: 2px; }

/* F1: chọn lớp khi tạo ca */
.chon-lop { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chon-lop label {
  display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px;
  border: 1px solid var(--vien); border-radius: var(--r-vua); background: var(--the); cursor: pointer;
}
.chon-lop label:has(input:checked) { border-color: var(--tim); background: color-mix(in srgb, var(--tim) 14%, var(--the)); }
.chon-lop input { width: auto; margin: 0; }

/* F3: in danh sách mã dự thi, chỉ in hộp thoại mã */
@media print {
  body.dang-in-ma > *:not(.lop-phu) { display: none !important; }
  body.dang-in-ma .lop-phu { position: static; background: none; backdrop-filter: none; padding: 0; display: block; animation: none; }
  body.dang-in-ma .lop-phu .the { max-width: none; max-height: none; overflow: visible; box-shadow: none; border: 0; animation: none; }
}

@media print {
  header.dinh, .tab-phu, button, .nut { display: none !important; }
  body::before { display: none; }
  .the { box-shadow: none; border-color: #bbb; break-inside: avoid; }
  body { background: #fff; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .khung { padding: 18px 15px 64px; }
  .bong-chat { max-width: 93%; }
  header.dinh .trong { margin-top: 8px; padding: 10px 15px; border-radius: var(--r-vua); }
  header.dinh h1 { font-size: 16.5px; }
  header.dinh .logo-dau { width: 34px; height: 34px; border-radius: 11px; }
  header.dinh .logo-dau svg { width: 19px; height: 19px; }
  .tab-phu { top: 72px; }
  .the { padding: 20px; border-radius: var(--r-vua); }
  .hang > .o { flex-basis: 100%; }
  .hang > button { width: 100%; }
  .chuoi .so { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ========================================================================
   LMS shell
   A calm, task-first workspace shared by student and teacher screens.
   ======================================================================== */
body.co-lms {
  --kem: #f5f7fb;
  --kem-dam: #edf1f7;
  --the-mo: #f8fafc;
  --chu: #172033;
  --chu-vua: #526079;
  --chu-mo: #7a879d;
  --vien: #dfe5ee;
  --vien-dam: #cbd4e1;
  --nhan: #2563eb;
  --nhan-dam: #1d4ed8;
  --nhan-sau: #173ea5;
  --nhan-50: #eff6ff;
  --nhan-100: #dbeafe;
  --bong-1: 0 1px 2px rgba(15, 23, 42, .06);
  --bong-2: 0 8px 24px rgba(15, 23, 42, .08);
  --bong-3: 0 16px 36px rgba(15, 23, 42, .12);
  padding-left: 250px;
  background: var(--kem);
}

body.co-lms::before {
  height: 240px;
  background: linear-gradient(180deg, #eef4ff 0, rgba(245, 247, 251, 0) 100%);
}

body.co-lms header.dinh {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .9);
  border-bottom: 1px solid var(--vien);
  backdrop-filter: blur(12px);
}

body.co-lms header.dinh .trong {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 28px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

body.co-lms header.dinh .logo-dau {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--nhan);
  box-shadow: none;
}

body.co-lms header.dinh h1 { font-size: 20px; }
body.co-lms header.dinh .phu { margin-top: 2px; color: var(--chu-vua); }

body.co-lms .tab-phu {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 80;
  width: 250px;
  background: #101a2e;
  color: #fff;
  box-shadow: 4px 0 18px rgba(15, 23, 42, .08);
}

body.co-lms .tab-phu .trong {
  height: 100%;
  margin: 0;
  padding: 22px 14px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  backdrop-filter: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
}

.nhan-dieu-huong {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 2px 10px 22px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-size: 16px;
  font-weight: 800;
}

.logo-lms {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #2563eb;
  border-radius: 10px;
}
.logo-lms svg { width: 20px; height: 20px; }

body.co-lms .tab-phu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  color: #bdc8dc;
  border-radius: 9px;
  font-size: 14.5px;
}
body.co-lms .tab-phu a svg { width: 19px; height: 19px; flex: 0 0 auto; }
body.co-lms .tab-phu a:hover { background: rgba(255,255,255,.08); color: #fff; }
body.co-lms .tab-phu a.dang-o {
  color: #fff;
  background: #2563eb;
  box-shadow: none;
}

.vai-tro-lms {
  margin-top: auto;
  padding: 14px 12px 2px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: #8998b4;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

body.co-lms .khung { max-width: 1280px; padding: 28px 28px 72px; }
body.co-lms .the { border-radius: 14px; padding: 24px; }
body.co-lms .the-bam:hover { transform: translateY(-2px); }
body.co-lms button, body.co-lms .nut {
  border-radius: 9px;
  box-shadow: none;
  padding: 11px 18px;
}
body.co-lms button:hover, body.co-lms .nut:hover { box-shadow: none; transform: translateY(-1px); }
body.co-lms input, body.co-lms select, body.co-lms textarea { border-radius: 9px; }
body.co-lms .nhan { border-radius: 7px; }

.tieu-de-khoa-hoc {
  border-left: 4px solid var(--nhan) !important;
  background: linear-gradient(100deg, #fff, #f7faff) !important;
}
.danh-sach-khoa-hoc .the-bam { min-height: 210px; }
.muc-huong-dan {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 18px;
  border: 1px solid var(--vien);
  border-radius: 12px;
  background: var(--the-mo);
}
.muc-huong-dan b { color: var(--chu); }
.muc-huong-dan span { color: var(--chu-vua); font-size: 14px; }

.ma-du-thi-hien {
  display: inline-block;
  padding: 7px 11px;
  border: 1px solid var(--nhan-100);
  border-radius: 8px;
  background: var(--nhan-50);
  color: var(--nhan-sau);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 2px;
  user-select: all;
}

@media (max-width: 900px) {
  body.co-lms { padding-left: 0; padding-bottom: 68px; }
  body.co-lms header.dinh .trong { padding: 11px 16px; }
  body.co-lms .tab-phu {
    inset: auto 0 0;
    width: auto;
    height: 68px;
  }
  body.co-lms .tab-phu .trong {
    padding: 7px 10px;
    flex-direction: row;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .nhan-dieu-huong, .vai-tro-lms { display: none; }
  body.co-lms .tab-phu a {
    min-width: 76px;
    padding: 7px 9px;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    font-size: 11px;
  }
  body.co-lms .tab-phu a svg { width: 18px; height: 18px; }
  body.co-lms .khung { padding: 20px 16px 54px; }
}

/* ========================================================================
   Nâng cấp giao diện (Phiếu mục 1): khối có biểu tượng, khối nhấn mạnh, thẻ số liệu.
   ======================================================================== */
.khoi-quy-dinh { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 14px; }
.khoi-qd {
  border: 1px solid var(--vien); border-radius: 14px; padding: 18px; background: var(--the-mo, var(--the));
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.khoi-qd:hover { transform: translateY(-3px); box-shadow: var(--bong-2, 0 8px 22px rgba(15,23,42,.1)); border-color: var(--nhan-100, #bfd3ff); }
.khoi-qd h3 { margin: 12px 0 6px; font-size: 16.5px; }
.khoi-qd p { margin: 0; color: var(--chu-vua); font-size: 14.5px; line-height: 1.55; }
.bieu-tuong {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: var(--nhan-50, #eef3ff); color: var(--nhan, #2563eb);
}
.bieu-tuong svg, .bieu-tuong-lon svg {
  width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.nhan-manh {
  display: flex; gap: 20px; align-items: center; margin-bottom: 18px; padding: 24px 26px;
  border-radius: 18px; color: #fff; background: linear-gradient(135deg, #14532d, #15803d);
  box-shadow: 0 10px 28px rgba(21, 128, 61, .25);
}
.nhan-manh h2 { margin: 0 0 6px; font-size: 24px; color: #fff; }
.nhan-manh p { margin: 4px 0 0; color: rgba(255, 255, 255, .92); line-height: 1.5; }
.bieu-tuong-lon {
  flex: 0 0 64px; width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .18);
}
.bieu-tuong-lon svg { width: 34px; height: 34px; }
.quy-dinh-rieng { white-space: pre-wrap; margin: 8px 0 0; font-size: 16px; line-height: 1.6; }
@media (max-width: 640px) { .nhan-manh { flex-direction: column; align-items: flex-start; } }

/* Thanh tiến trình bốn bước của học sinh */
.tien-trinh {
  list-style: none; margin: 0 0 18px; padding: 0; display: flex; gap: 8px; counter-reset: none;
}
.tien-trinh li {
  flex: 1 1 0; display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 10px 12px; border-radius: 12px; background: var(--the); border: 1.5px solid var(--vien);
  color: var(--chu-mo); font-weight: 700; font-size: 14px;
}
.tien-trinh .so {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--kem-dam, #eef1f6); color: var(--chu-vua); font-size: 13px; font-weight: 800;
}
.tien-trinh .ten { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tien-trinh li.hien { border-color: var(--nhan); color: var(--chu); background: var(--nhan-50, #eef3ff); }
.tien-trinh li.hien .so { background: var(--nhan); color: #fff; }
.tien-trinh li.xong { color: var(--chu-vua); border-color: var(--mint-100, #bfe9df); }
.tien-trinh li.xong .so { background: var(--mint, #14c4a8); color: #fff; font-size: 0; }
.tien-trinh li.xong .so::after { content: "✓"; font-size: 14px; }
@media (max-width: 640px) {
  .tien-trinh { gap: 6px; }
  .tien-trinh li { padding: 8px; justify-content: center; }
  .tien-trinh li:not(.hien) .ten { display: none; }       /* chỉ bước hiện tại có chữ */
  .tien-trinh li.hien { flex: 3 1 0; justify-content: flex-start; }
}

/* Lưới câu hỏi: đã làm, đang xem, chưa làm */
.luoi-cau button.dang-xem { border-color: var(--nhan); background: var(--nhan-50, #eef3ff); color: var(--nhan-sau, #1d4ed8);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .22); }
.luoi-cau button.xong.dang-xem { background: var(--mint); color: #fff; border-color: var(--nhan); }
.chu-giai-luoi { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; font-size: 12.5px; color: var(--chu-vua); font-weight: 700; }
.chu-giai-luoi i { display: inline-block; width: 11px; height: 11px; border-radius: 4px; margin-right: 5px; vertical-align: -1px; }
.chu-giai-luoi .cham-xong { background: var(--mint); }
.chu-giai-luoi .cham-xem { background: var(--nhan); }
.chu-giai-luoi .cham-chua { background: var(--the); border: 2px solid var(--vien-dam, #cbd4e1); }
.huong-dan-vao { margin: 14px auto 16px; padding-left: 22px; max-width: 460px; text-align: left; color: var(--chu-vua); line-height: 1.7; }

/* Màn coi thi: thẻ số liệu, thanh tiến độ, hàng cần chú ý, hộp hỗ trợ nổi bật */
.dai-the-so { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 12px; }
.the-so-lieu {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px;
  background: var(--the); border: 1.5px solid var(--vien); box-shadow: 0 2px 8px rgba(15, 23, 42, .05);
}
.the-so-lieu .so { display: block; font-size: 28px; line-height: 1.05; font-weight: 800; color: var(--chu); }
.the-so-lieu .nhan-so { display: block; font-size: 13.5px; font-weight: 700; color: var(--chu-vua); margin-top: 2px; }
.the-so-lieu .phu-so { display: block; font-size: 12px; color: var(--chu-mo); margin-top: 2px; }
.the-so-lieu.xanh .bieu-tuong { background: var(--nhan-50, #eef3ff); color: var(--nhan, #2563eb); }
.the-so-lieu.vang .bieu-tuong { background: #fff6e0; color: #b45309; }
.the-so-lieu.luc .bieu-tuong { background: #e4f8f2; color: #0f8a72; }
.the-so-lieu.cam .bieu-tuong { background: #fff1e6; color: #c2570c; }
.the-so-lieu.xam .bieu-tuong { background: #eef1f6; color: #66738a; }
.the-so-lieu.xam .so { font-size: 20px; color: #66738a; }
.the-so-lieu.do { border-color: #f4563f; background: #fff5f3; }
.the-so-lieu.do .bieu-tuong { background: #ffe1db; color: #c0301c; }
.the-so-lieu.do .so { color: #c0301c; }
.thanh-ngang { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: #e8edf5; }
.thanh-ngang i { display: block; min-width: 0; }
.thanh-ngang .nop, .chu-giai-ngang .nop { background: #14c4a8; }
.thanh-ngang .dang, .chu-giai-ngang .dang { background: #f5a524; }
.thanh-ngang .chua, .chu-giai-ngang .chua { background: #c6cfdc; }
.chu-giai-ngang { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 14px; font-size: 12.5px; font-weight: 700; color: var(--chu-vua); }
.chu-giai-ngang i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; }
.nhap-nhay { animation: dap 1.1s ease-in-out infinite; }
tr.can-chu-y { background: #fff5f3; box-shadow: inset 4px 0 0 #f4563f; }
.the.ho-tro-moi { border-color: #f4563f; box-shadow: 0 0 0 3px rgba(244, 86, 63, .16); }

.ca-chua-mo .hang-hinh { display: flex; gap: 18px; align-items: center; margin-bottom: 8px; }
.ca-chua-mo h2 { margin: 0 0 4px; }
.bieu-tuong-lon.xanh { background: var(--nhan-50, #eef3ff); color: var(--nhan, #2563eb); }
.cac-buoc-ca { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; counter-reset: b; }
.cac-buoc-ca li { counter-increment: b; border: 1.5px solid var(--vien); border-radius: 12px; padding: 12px 14px; background: var(--the-mo, var(--the)); }
.cac-buoc-ca li::before { content: counter(b); display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--kem-dam, #eef1f6); color: var(--chu-vua); font-weight: 800; font-size: 13px; margin-bottom: 6px; }
.cac-buoc-ca li.xong { border-color: #bfe9df; }
.cac-buoc-ca li.xong::before { background: #14c4a8; color: #fff; }
.cac-buoc-ca b, .cac-buoc-ca span { display: block; }
.cac-buoc-ca span { font-size: 13px; color: var(--chu-mo); }

.luoi-anh { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 8px; }
.o-anh { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 12px; border: 1.5px solid var(--vien);
  background: var(--the); color: var(--chu); box-shadow: none; text-align: left; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.o-anh:hover { border-color: var(--nhan); transform: none; }
.o-anh .khung-thu { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 8px; background: #eef1f6;
  color: var(--chu-mo); font-weight: 600; overflow: hidden; }
.o-anh .khung-thu img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) {
  .ca-chua-mo .hang-hinh { flex-direction: column; align-items: flex-start; }
  .the-so-lieu { padding: 12px 14px; }
  .the-so-lieu .so { font-size: 24px; }
}

/* Quản lý học liệu: bộ lọc, thanh thao tác hàng loạt, xem trước */
.thanh-loc { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 12px; }
.thanh-loc .o { flex: 0 1 180px; min-width: 140px; }
.thanh-loc .tim-kiem { flex: 1 1 260px; }
.thanh-chon {
  position: sticky; top: 8px; z-index: 5; display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-bottom: 12px; padding: 10px 14px; border-radius: 12px;
  background: var(--nhan-50, #eef3ff); border: 1.5px solid var(--nhan, #2563eb);
}
.xem-truoc {
  white-space: pre-wrap; font-family: inherit; font-size: 14.5px; line-height: 1.6; margin: 8px 0;
  max-height: 50vh; overflow: auto; padding: 14px; border-radius: 10px;
  background: var(--the-mo, #f8fafc); border: 1px solid var(--vien);
}
.hep { width: 1%; white-space: nowrap; }

/* Biểu đồ và xu hướng trên trang thống kê */
.khung-bieu-do { position: relative; height: 260px; }
.khung-bieu-do.mau-mo canvas { opacity: .38; filter: saturate(.7); }
.nhan-minh-hoa {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; max-width: 90%;
  padding: 8px 14px; border-radius: 99px; background: rgba(255, 255, 255, .92); border: 1.5px dashed var(--vien-dam, #cbd4e1);
  font-size: 13px; font-weight: 700; color: var(--chu-vua); text-align: center;
}
.xu-huong.tang { color: #0f8a72; font-weight: 700; }
.xu-huong.giam { color: #c0301c; font-weight: 700; }
.luoi-dang-bai { align-items: start; }

/* ========================================================================
   Điện thoại (Phiếu mục 2): nhãn điều hướng không chồng chữ, vùng chạm >= 44px,
   bảng dài thành thẻ để không phải cuộn ngang tìm nút.
   ======================================================================== */
@media (max-width: 900px) {
  body.co-lms .tab-phu a {
    flex: 1 0 66px;                     /* chia đều khi vừa một hàng, cuộn ngang khi có nhiều mục */
    min-width: 66px;
    max-width: 124px;
    padding: 6px 6px;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
  }
  button, .nut, select, textarea,
  input:not([type=radio]):not([type=checkbox]):not([type=hidden]) { min-height: 44px; }
  .luoi-cau button { width: 44px; height: 44px; }
}

/* Màn làm bài trên điện thoại: camera xếp trên danh sách câu hỏi, lưới câu hỏi một hàng
   cuộn ngang để thanh dính không chiếm màn hình, và ẩn thanh điều hướng khi đang làm bài. */
@media (max-width: 900px) {
  #khu-lam-bai { grid-template-columns: 1fr !important; }       /* ghi đè style do JS đặt */
  #o-camera { position: static !important; order: -1; }
  #o-camera .khung-camera { max-width: 240px; margin: 0 auto; }
  #b3 > .the.gon { top: 66px !important; padding: 12px 14px; }
  #b3 .luoi-cau { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  #b3 .luoi-cau button { flex: 0 0 44px; }
  body.co-lms.dang-lam-bai { padding-bottom: 0; }
  body.co-lms.dang-lam-bai .tab-phu { display: none; }
  body.co-lms.dang-lam-bai #nut-ho-tro { bottom: 18px; }
}

@media (max-width: 640px) {
  .cuon-ngang { overflow-x: visible; }
  .cuon-ngang table, .cuon-ngang tbody, .cuon-ngang tr, .cuon-ngang td { display: block; width: 100%; }
  .cuon-ngang thead {                       /* ẩn về mặt thị giác nhưng trình đọc màn hình vẫn đọc */
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  }
  .cuon-ngang tr {
    border: 1px solid var(--vien); border-radius: var(--r-vua); background: var(--the);
    padding: 8px 14px; margin-bottom: 12px;
  }
  .cuon-ngang td {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 6px 12px; padding: 7px 0; border: 0; text-align: right;
  }
  .cuon-ngang td::before {
    content: attr(data-label); flex: 0 0 36%; text-align: left; font-size: 12px;
    font-weight: 700; color: var(--chu-vua); text-transform: uppercase; letter-spacing: .03em;
  }
  .cuon-ngang td[data-label=""]::before { display: none; }
  .cuon-ngang td > input, .cuon-ngang td > select { flex: 1 1 140px; min-width: 0; }
  .cuon-ngang td > button, .cuon-ngang td > a.nut { flex: 1 1 auto; }
}

@media (max-width: 640px) {
  body.co-lms header.dinh .nguoi span { display: none; }
  body.co-lms header.dinh .logo-dau { display: none; }
  body.co-lms header.dinh h1 { font-size: 17px; }
  body.co-lms .the { padding: 19px; }
}