/* ===== Màu sắc: xanh dương của logo + xanh ngọc dịu, nền xám xanh nhạt ===== */
:root {
  --nen: #F2F6F9;
  --be-mat: #FFFFFF;
  --be-mat-2: #E9F0F5;
  --chu: #1F2D3A;
  --chu-phu: #566675;
  --vien: #D5E0E8;
  --chinh: #1479BD;
  --chinh-dam: #0E669F;
  --chinh-nhat: #E2F1FB;
  --logo-xanh: #2299E3;
  --ngoc: #23877F;
  --ngoc-nhat: #DDF2EF;
  --cam: #A8601A;
  --cam-nhat: #FCEFD9;
  --do: #A63A2B;
  --do-nhat: #FBE6E1;
  --xam-nhat: #E6ECF0;
  --bong: 0 1px 2px rgba(31, 45, 58, .06), 0 4px 14px rgba(31, 45, 58, .06);
  --bong-lon: 0 10px 34px rgba(31, 45, 58, .16);
  --bk: 10px;
  --chieu-cao-thanh: 60px;
  --font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}
:root[data-gd='toi'] {
  --nen: #0E1A23;
  --be-mat: #15242F;
  --be-mat-2: #1B2E3B;
  --chu: #E4EDF3;
  --chu-phu: #95A8B7;
  --vien: #26394A;
  --chinh: #1F7FC4;
  --chinh-dam: #3A95D8;
  --chinh-nhat: #14374F;
  --ngoc: #4FBFB4;
  --ngoc-nhat: #143A3A;
  --cam: #E3A25A;
  --cam-nhat: #3B2D17;
  --do: #EE8D7C;
  --do-nhat: #3E1F1B;
  --xam-nhat: #223442;
  --bong: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
  --bong-lon: 0 10px 34px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.55;
  color: var(--chu); background: var(--nen);
}
/* Chuyển màu mượt khi đổi chế độ sáng/tối */
html.doi-giao-dien, html.doi-giao-dien *, html.doi-giao-dien *::before, html.doi-giao-dien *::after {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, fill .35s ease !important;
}
h1, h2, h3 { margin: 0; line-height: 1.3; font-weight: 600; }
p { margin: 0; }
a { color: var(--chinh); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--logo-xanh); outline-offset: 2px; border-radius: 4px; }
button { font: inherit; color: inherit; }
.an-thi-giac { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== Nút ===== */
.nut {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 20px; border: 1px solid transparent; border-radius: 9px;
  font-weight: 600; cursor: pointer; background: var(--chinh); color: #fff;
  transition: background-color .18s ease, transform .12s ease, box-shadow .18s ease, opacity .18s ease;
}
.nut:hover { background: var(--chinh-dam); }
.nut:active { transform: scale(.98); }
.nut[disabled] { opacity: .6; cursor: default; }
.nut-phu { background: transparent; color: var(--chinh); border-color: var(--vien); }
:root[data-gd='toi'] .nut-phu { color: var(--chu); }
.nut-phu:hover { background: var(--be-mat-2); }
.nut-rong { width: 100%; }
.nut-link { background: none; border: 0; padding: 0; min-height: 0; color: var(--chinh); font-weight: 500; cursor: pointer; }
:root[data-gd='toi'] .nut-link { color: var(--chinh-dam); }
.nut-link:hover { text-decoration: underline; }
.quay { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: quay .7s linear infinite; }
@keyframes quay { to { transform: rotate(360deg); } }

/* ===== Ô nhập ===== */
.truong { display: grid; gap: 6px; margin-bottom: 16px; }
.truong > label { font-weight: 500; font-size: 14px; }
.o-nhap {
  width: 100%; min-height: 44px; padding: 10px 13px; border: 1px solid var(--vien); border-radius: 9px;
  background: var(--be-mat); color: var(--chu); font: inherit;
  transition: border-color .18s ease, box-shadow .18s ease;
}
textarea.o-nhap { min-height: 96px; resize: vertical; }
.o-nhap:hover { border-color: #b5c6d3; }
.o-nhap:focus { outline: none; border-color: var(--logo-xanh); box-shadow: 0 0 0 3px rgba(34, 153, 227, .22); }
.o-mat-khau { position: relative; }
.o-mat-khau .o-nhap { padding-right: 64px; }
.o-mat-khau .nut-link { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); padding: 6px 8px; font-size: 13px; }
.goi-y { font-size: 13px; color: var(--chu-phu); }

/* ===== Thông báo trong form ===== */
.hop-thong-bao {
  padding: 11px 14px; border-radius: 9px; font-size: 14px; margin-bottom: 16px;
  animation: hien-vao .25s ease;
}
.hop-loi { background: var(--do-nhat); color: var(--do); }
.hop-ok { background: var(--ngoc-nhat); color: var(--ngoc); }
.hop-tin { background: var(--chinh-nhat); color: var(--chinh); }
:root[data-gd='toi'] .hop-tin { color: var(--chinh-dam); }
@keyframes hien-vao { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ===== Trang đăng nhập (chưa vào hệ thống) ===== */
.khung-vao { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(340px, 5fr) 6fr; }
.vao-trai {
  position: relative; overflow: hidden; color: #fff; padding: 48px 56px;
  display: flex; flex-direction: column; justify-content: space-between;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .16), transparent 42%),
    linear-gradient(155deg, #0D5E9A 0%, #1479BD 45%, #1B9BC8 78%, #2AA89B 100%);
}
.vao-trai::before, .vao-trai::after { /* dấu cộng y tế mờ làm nền */
  content: ''; position: absolute; background: rgba(255, 255, 255, .07); border-radius: 18px;
}
.vao-trai::before { width: 300px; height: 80px; right: -90px; bottom: 130px; transform: rotate(0deg); }
.vao-trai::after { width: 80px; height: 300px; right: 20px; bottom: 20px; }
.vao-thuong-hieu { position: relative; z-index: 1; max-width: 420px; }
.vao-logo { width: 104px; height: 104px; border-radius: 50%; background: #fff; box-shadow: 0 8px 28px rgba(0, 40, 80, .35); display: block; margin-bottom: 28px; }
.vao-ten { font-size: 30px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
.vao-vien { margin-top: 12px; font-size: 16px; opacity: .92; }
.vao-chan { position: relative; z-index: 1; font-size: 13px; opacity: .8; }
.vao-phai { display: flex; align-items: center; justify-content: center; padding: 32px 24px; background: var(--nen); position: relative; }
.the-vao {
  width: 100%; max-width: 420px; background: var(--be-mat); border: 1px solid var(--vien);
  border-radius: 16px; padding: 32px; box-shadow: var(--bong);
  animation: vao-hien .5s cubic-bezier(.2, .7, .2, 1);
}
@keyframes vao-hien { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.the-vao h1 { font-size: 22px; margin-bottom: 6px; }
.the-vao .mo-ta { color: var(--chu-phu); margin-bottom: 22px; font-size: 14px; }
.hang-link { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; font-size: 14px; }
.vao-doi-gd { position: absolute; top: 18px; right: 18px; }
.vao-chan-nho { display: none; }

@media (max-width: 860px) {
  .khung-vao { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .vao-trai { padding: 26px 22px 24px; flex-direction: row; align-items: center; gap: 16px; }
  .vao-trai::before, .vao-trai::after { display: none; }
  .vao-thuong-hieu { display: flex; align-items: center; gap: 16px; max-width: none; }
  .vao-logo { width: 62px; height: 62px; margin: 0; flex: none; }
  .vao-ten { font-size: 18px; }
  .vao-vien { margin-top: 2px; font-size: 13px; }
  .vao-chan { display: none; }
  .vao-phai { flex-direction: column; align-items: center; justify-content: flex-start; padding: 14px 16px 28px; }
  .vao-phai > div:last-child { width: 100%; max-width: 420px; }
  .vao-doi-gd { position: static; align-self: flex-end; margin-bottom: 12px; }
  .the-vao { padding: 24px 20px; }
  .vao-chan-nho { display: block; text-align: center; margin-top: 20px; font-size: 13px; color: var(--chu-phu); }
}

/* ===== Công tắc chế độ sáng/tối ===== */
.cong-tac {
  position: relative; width: 56px; height: 30px; flex: none; padding: 0; border-radius: 15px;
  border: 1px solid var(--vien); background: var(--be-mat-2); cursor: pointer;
  transition: background-color .3s ease, border-color .3s ease;
}
.cong-tac svg { position: absolute; top: 6px; width: 16px; height: 16px; transition: opacity .3s ease, transform .3s ease; }
.cong-tac .bieu-tuong-toi { left: 7px; color: var(--chu-phu); }
.cong-tac .bieu-tuong-sang { right: 7px; color: var(--chu-phu); }
.cong-tac .num {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--be-mat); box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  transition: transform .32s cubic-bezier(.4, 1.3, .5, 1), background-color .3s ease;
}
:root[data-gd='toi'] .cong-tac { background: var(--chinh-nhat); border-color: var(--chinh); }
:root[data-gd='toi'] .cong-tac .num { transform: translateX(26px); background: #CFE6F6; }
:root:not([data-gd='toi']) .cong-tac .bieu-tuong-toi { opacity: .45; }
:root:not([data-gd='toi']) .cong-tac .bieu-tuong-sang { color: var(--cam); }
:root[data-gd='toi'] .cong-tac .bieu-tuong-sang { opacity: .45; }
:root[data-gd='toi'] .cong-tac .bieu-tuong-toi { color: #CFE6F6; }

/* ===== Khung sau đăng nhập ===== */
.thanh-tren {
  position: sticky; top: 0; z-index: 40; height: var(--chieu-cao-thanh);
  display: flex; align-items: center; gap: 18px; padding: 0 22px;
  background: var(--be-mat); border-bottom: 1px solid var(--vien);
}
.thuong-hieu { display: flex; align-items: center; gap: 11px; color: var(--chu); font-weight: 700; flex: none; }
.thuong-hieu:hover { text-decoration: none; }
.thuong-hieu img { width: 36px; height: 36px; border-radius: 50%; }
.thuong-hieu span { line-height: 1.2; font-size: 14px; max-width: 150px; }
.menu-ngang { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; margin-left: 6px; }
.nhom { position: relative; }
.nhom-nut, .muc-tren {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px; border: 0; border-radius: 8px;
  background: transparent; color: var(--chu); font-weight: 500; font-size: 14.5px; cursor: pointer; white-space: nowrap;
  transition: background-color .18s ease, color .18s ease;
}
.muc-tren:hover { text-decoration: none; }
.nhom-nut:hover, .muc-tren:hover, .nhom.mo > .nhom-nut { background: var(--be-mat-2); }
.nhom.dang-chon > .nhom-nut, .muc-tren.dang-chon { color: var(--chinh); background: var(--chinh-nhat); }
:root[data-gd='toi'] .nhom.dang-chon > .nhom-nut, :root[data-gd='toi'] .muc-tren.dang-chon { color: #8CCBF2; }
.mui { width: 7px; height: 7px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; }
.nhom.mo > .nhom-nut .mui { transform: rotate(225deg) translate(-1px, -1px); }
.xo {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 270px; padding: 6px;
  background: var(--be-mat); border: 1px solid var(--vien); border-radius: 12px; box-shadow: var(--bong-lon);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.xo.phai { left: auto; right: 0; min-width: 200px; }
.nhom.mo > .xo { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.xo a {
  display: block; padding: 9px 12px; border-radius: 8px; color: var(--chu); font-size: 14.5px;
  transition: background-color .15s ease, padding-left .15s ease;
}
.xo a:hover { background: var(--be-mat-2); text-decoration: none; padding-left: 15px; }
.xo a.dang-chon { background: var(--chinh-nhat); color: var(--chinh); font-weight: 600; }
:root[data-gd='toi'] .xo a.dang-chon { color: #8CCBF2; }
.xo button.muc-nut { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; background: none; border-radius: 8px; font-size: 14.5px; cursor: pointer; transition: background-color .15s ease, padding-left .15s ease; }
.xo button.muc-nut:hover { background: var(--be-mat-2); padding-left: 15px; }
.phai-thanh { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.nut-menu-dt { display: none; }

.noi-dung { max-width: 1180px; margin: 0 auto; padding: 28px 22px 56px; }
.trang-vao { animation: trang-vao .28s cubic-bezier(.2, .7, .2, 1); }
@keyframes trang-vao { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.chan-trang { text-align: center; color: var(--chu-phu); font-size: 13px; padding: 18px 16px 28px; }

/* ===== Menu kéo (điện thoại, iPad dọc) ===== */
.lop-phu { position: fixed; inset: 0; z-index: 60; background: rgba(10, 22, 32, .5); opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility 0s linear .28s; }
.lop-phu.mo { opacity: 1; visibility: visible; transition-delay: 0s; }
.keo {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 70; width: min(86vw, 330px);
  background: var(--be-mat); box-shadow: var(--bong-lon); display: flex; flex-direction: column;
  transform: translateX(-102%); transition: transform .3s cubic-bezier(.3, .8, .3, 1); visibility: hidden;
}
.keo.mo { transform: none; visibility: visible; }
.keo-dau { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--vien); }
.keo-dau .thuong-hieu { min-width: 0; }
.keo-dau .thuong-hieu span { max-width: 150px; font-size: 13px; }
.keo-dau .nut { min-height: 36px; padding: 0 14px; flex: none; }
.keo-than { flex: 1; overflow-y: auto; padding: 10px; overscroll-behavior: contain; }
.keo-nhom > button, .keo-than > a {
  display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 13px 12px; border: 0; background: none;
  border-radius: 9px; color: var(--chu); font-weight: 500; font-size: 15.5px; text-align: left; cursor: pointer; text-decoration: none;
  transition: background-color .15s ease;
}
.keo-nhom > button:hover, .keo-than > a:hover { background: var(--be-mat-2); }
.keo-nhom.dang-chon > button, .keo-than > a.dang-chon { color: var(--chinh); }
:root[data-gd='toi'] .keo-nhom.dang-chon > button, :root[data-gd='toi'] .keo-than > a.dang-chon { color: #8CCBF2; }
.keo-nhom.mo > button .mui { transform: rotate(225deg) translate(-1px, -1px); }
.keo-con { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.keo-nhom.mo > .keo-con { grid-template-rows: 1fr; }
.keo-con > div { overflow: hidden; }
.keo-con a { display: block; padding: 11px 12px 11px 26px; border-radius: 9px; color: var(--chu); font-size: 15px; }
.keo-con a:hover { background: var(--be-mat-2); text-decoration: none; }
.keo-con a.dang-chon { background: var(--chinh-nhat); color: var(--chinh); font-weight: 600; }
:root[data-gd='toi'] .keo-con a.dang-chon { color: #8CCBF2; }
.keo-chan { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--vien); display: grid; gap: 10px; }
.keo-nguoi { font-size: 14px; line-height: 1.4; }
.keo-nguoi small { color: var(--chu-phu); display: block; }
.keo-chan .hang { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

@media (max-width: 1100px) {
  .menu-ngang, .phai-thanh .nhom, .phai-thanh .cong-tac { display: none; }
  .nut-menu-dt { display: inline-flex; }
  .thanh-tren { padding: 0 14px; gap: 10px; }
  .thuong-hieu { flex: 1; min-width: 0; }
  .thuong-hieu span { max-width: none; }
  .noi-dung { padding: 20px 14px 48px; }
}
@media (max-width: 420px) { .thuong-hieu span { font-size: 13px; } }

/* ===== Thẻ nội dung ===== */
.tieu-de-trang { margin-bottom: 20px; }
.tieu-de-trang h1 { font-size: 24px; }
.tieu-de-trang p { color: var(--chu-phu); margin-top: 4px; }
.luoi-trang-chu { display: grid; grid-template-columns: 3fr 2fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .luoi-trang-chu { grid-template-columns: 1fr; } }
.the { background: var(--be-mat); border: 1px solid var(--vien); border-radius: 14px; padding: 20px; box-shadow: var(--bong); }
.the + .the { margin-top: 18px; }
.the h2 { font-size: 16px; margin-bottom: 14px; }
.cot-trai > .the + .the, .cot-phai > .the + .the { margin-top: 18px; }
.thong-bao-chu { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; }
.rong { color: var(--chu-phu); }
.hang-nut { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }

.ds-han { list-style: none; margin: 0; padding: 0; }
.ds-han li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--vien); }
.ds-han li:first-child { border-top: 0; padding-top: 0; }
.ds-han .ten { font-weight: 500; }
.ds-han .ngay { font-size: 13px; color: var(--chu-phu); margin-top: 1px; }
.nhan { flex: none; padding: 3px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.nhan-ngoc { background: var(--ngoc-nhat); color: var(--ngoc); }
.nhan-cam { background: var(--cam-nhat); color: var(--cam); }
.nhan-do { background: var(--do-nhat); color: var(--do); }
.nhan-xam { background: var(--xam-nhat); color: var(--chu-phu); }

.viec { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: 10px; background: var(--be-mat-2); color: var(--chu); transition: background-color .18s ease, transform .18s ease; }
.viec + .viec { margin-top: 8px; }
.viec:hover { text-decoration: none; background: var(--chinh-nhat); }
@media (hover: hover) { .viec:hover { transform: translateX(3px); } }
.viec b { font-size: 18px; color: var(--chinh); }
:root[data-gd='toi'] .viec b { color: #8CCBF2; }
.khung-nho { max-width: 460px; }
.dang-tai { color: var(--chu-phu); padding: 40px 0; text-align: center; }
.khung-trong { text-align: center; padding: 56px 16px; }
.khung-trong h1 { font-size: 20px; margin-bottom: 8px; }
.khung-trong p { color: var(--chu-phu); margin-bottom: 18px; }

/* ===== Thông báo nổi ===== */
.cho-toast { position: fixed; left: 50%; bottom: 24px; z-index: 100; transform: translateX(-50%); display: grid; gap: 8px; width: min(92vw, 420px); pointer-events: none; }
.toast { padding: 12px 16px; border-radius: 10px; background: var(--chu); color: var(--nen); font-size: 14px; box-shadow: var(--bong-lon); animation: toast-vao .3s cubic-bezier(.2, .8, .3, 1); }
.toast.loi { background: var(--do); color: #fff; }
:root[data-gd='toi'] .toast.loi { color: #2b0f0b; }
.toast.ra { opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
@keyframes toast-vao { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

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

/* ===== Danh sách + chi tiết trượt ngang ===== */
.md { overflow-x: clip; }
.md-duong { display: flex; width: 200%; transition: transform .36s cubic-bezier(.3, .8, .3, 1); }
.md.dang-ct .md-duong { transform: translateX(-50%); }
.md.khong-hieu-ung .md-duong { transition: none; }
.ngan { flex: 0 0 50%; min-width: 0; padding: 0 2px; }
.ngan.an { height: 0; overflow: hidden; visibility: hidden; padding: 0; }
.md.dang-ct .ngan-ds, .md:not(.dang-ct) .ngan-ct { pointer-events: none; }

.thanh-loc { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(150px, 1fr)); gap: 10px; margin-bottom: 10px; }
.thanh-loc.chi-tim { grid-template-columns: minmax(0, 520px); }
@media (max-width: 900px) { .thanh-loc { grid-template-columns: 1fr 1fr; } .thanh-loc > :first-child { grid-column: 1 / -1; } }
@media (max-width: 520px) { .thanh-loc { grid-template-columns: 1fr; } }
.hang-dem { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; margin-bottom: 12px; }
.hang-dem [hidden] { display: none; }
.ds-da { display: grid; gap: 10px; }
.dong-da {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px;
  background: var(--be-mat); border: 1px solid var(--vien); border-radius: 12px; color: var(--chu);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.dong-da:hover { text-decoration: none; border-color: var(--logo-xanh); box-shadow: var(--bong); }
@media (hover: hover) { .dong-da:hover { transform: translateX(3px); } }
.dong-da-chinh { min-width: 0; }
.dong-da-ten { font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.dong-da-phu { margin-top: 3px; font-size: 13px; color: var(--chu-phu); overflow-wrap: anywhere; }
.nhan-xanh { background: var(--chinh-nhat); color: var(--chinh); }
:root[data-gd='toi'] .nhan-xanh { color: #8CCBF2; }

.ct-dau { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.nut-quay-lai { flex: none; min-height: 38px; padding: 0 16px; }
.ct-tieu-de { min-width: 0; }
.ct-tieu-de h1 { font-size: 22px; overflow-wrap: anywhere; }
.ct-phu { margin-top: 3px; color: var(--chu-phu); font-size: 14px; }
.ct-nhan { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
@media (max-width: 640px) { .ct-dau { flex-direction: column; gap: 12px; } .ct-tieu-de h1 { font-size: 19px; } }
.ct-the + .ct-the { margin-top: 16px; }
.dl { display: grid; grid-template-columns: minmax(130px, 200px) 1fr; gap: 10px 20px; margin: 0; }
.dl dt { color: var(--chu-phu); font-size: 14px; }
.dl dd { margin: 0; overflow-wrap: anywhere; }
.giu-dong { white-space: pre-wrap; }
@media (max-width: 640px) { .dl { grid-template-columns: 1fr; gap: 2px; } .dl dd { margin-bottom: 10px; } }
.ds-chi-so { display: grid; gap: 12px; }
.chi-so { padding: 14px 16px; background: var(--be-mat-2); border-radius: 10px; }
.chi-so-ten { font-weight: 600; margin-bottom: 8px; overflow-wrap: anywhere; }
.dl-nho { gap: 6px 16px; font-size: 14px; }
.ds-cham { display: grid; gap: 12px; }
.cham { padding: 14px 16px; background: var(--be-mat-2); border-radius: 10px; }
.cham-dau { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.cham-diem { color: var(--chu-phu); font-size: 14px; }
.cham p { margin-top: 8px; overflow-wrap: anywhere; }
.tb-dong { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--vien); }
.tb-dong b { font-size: 18px; }
.ds-file { display: flex; flex-wrap: wrap; gap: 10px; }
.ds-file .nut { text-decoration: none; }
.khung-trong h2 { font-size: 18px; margin-bottom: 8px; }

/* ===== Nút lên đầu trang ===== */
.len-dau {
  position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px)); z-index: 50;
  width: 46px; height: 46px; padding: 0; display: grid; place-items: center; border: 1px solid var(--vien); border-radius: 50%;
  background: var(--be-mat); color: var(--chinh); box-shadow: var(--bong-lon); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.9);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s, background-color .18s ease;
}
:root[data-gd='toi'] .len-dau { color: #8CCBF2; }
.len-dau.hien { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.len-dau:hover { background: var(--chinh-nhat); }
.len-dau:active { transform: scale(.94); }
.len-dau svg { width: 22px; height: 22px; }