/* ─────────────────────────────────────────────────────────────
   TTP CLOUD — cloud.ttpjsc.com
   Nhận diện: navy #12395F + vàng đồng #C8922F (theo logo TTP),
   thêm xanh ngọc làm điểm nhấn kỹ thuật.
   ───────────────────────────────────────────────────────────── */

:root {
  --navy: #12395F;
  --navy-dam: #0B2440;
  --navy-sau: #061726;
  --vang: #C8922F;
  --vang-sang: #E5B357;
  --ngoc: #2FB3A8;
  --ngoc-sang: #57D6C9;

  --nen: #FFFFFF;
  --nen-mo: #F4F7FA;
  --vien: #E2E8F0;
  --chu: #16202B;
  --chu-nhat: #55677A;

  --bk-nho: 0 1px 2px rgba(11, 36, 64, .06), 0 2px 8px rgba(11, 36, 64, .05);
  --bk-vua: 0 4px 12px rgba(11, 36, 64, .08), 0 14px 32px rgba(11, 36, 64, .09);
  --bk-lon: 0 10px 24px rgba(11, 36, 64, .12), 0 30px 60px rgba(11, 36, 64, .14);

  --r: 14px;
  --r-nho: 9px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--chu);
  background: var(--nen);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }
code {
  font-family: var(--mono);
  font-size: .89em;
  background: rgba(18, 57, 95, .07);
  padding: .12em .38em;
  border-radius: 5px;
}
h1, h2, h3, h4 { line-height: 1.22; margin: 0 0 .5em; letter-spacing: -.015em; }
p { margin: 0 0 1em; }

.khung { width: min(1180px, 100% - 40px); margin-inline: auto; }
.khung-hep { width: min(880px, 100% - 40px); margin-inline: auto; }

/* ───────────── NÚT ───────────── */
.nut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .82em 1.5em;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 650;
  font-family: inherit;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .18s ease, background-color .18s ease;
  text-decoration: none !important;
}
.nut:hover { transform: translateY(-1px); }
.nut:active { transform: translateY(0); }
.nut-vang { background: var(--vang); color: #1A1204; box-shadow: 0 6px 18px rgba(200, 146, 47, .35); }
.nut-vang:hover { background: #D8A03A; }
.nut-navy { background: var(--navy); color: #fff; box-shadow: 0 6px 18px rgba(18, 57, 95, .28); }
.nut-navy:hover { background: #17456F; }
.nut-vien-sang { border-color: rgba(255, 255, 255, .38); color: #fff; background: rgba(255, 255, 255, .06); }
.nut-vien-sang:hover { background: rgba(255, 255, 255, .14); }
.nut-vien { border-color: var(--vien); color: var(--navy); background: #fff; }
.nut-vien:hover { border-color: var(--navy); }
.nut-rong { width: 100%; }

/* ───────────── THANH TRÊN ───────────── */
.thanh-tren {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(6, 23, 38, .82);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.thanh-tren .khung {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 66px;
}
.hieu { display: flex; align-items: center; gap: 11px; color: #fff; font-weight: 700; letter-spacing: .01em; }
.hieu:hover { text-decoration: none; }
.hieu img { height: 30px; width: auto; display: block; }
.hieu span { font-size: 1.04rem; }
.hieu small {
  display: block;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.menu { display: flex; gap: 26px; margin-left: auto; }
.menu a { color: rgba(255, 255, 255, .8); font-size: .95rem; font-weight: 550; }
.menu a:hover { color: #fff; text-decoration: none; }
.thanh-tren .nut { padding: .6em 1.15em; font-size: .94rem; }

/* ───────────── HERO ───────────── */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 480px at 12% -10%, rgba(47, 179, 168, .22), transparent 60%),
    radial-gradient(760px 420px at 88% 8%, rgba(200, 146, 47, .18), transparent 62%),
    linear-gradient(168deg, #0C2C4A 0%, var(--navy-sau) 72%);
  color: #fff;
  padding: 78px 0 96px;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 72%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 72%);
  pointer-events: none;
}
.hero .khung { position: relative; }
.hero-luoi {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 56px;
  align-items: center;
}
.nhan-nho {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .4em .9em;
  border: 1px solid rgba(87, 214, 201, .45);
  border-radius: 999px;
  background: rgba(47, 179, 168, .13);
  color: var(--ngoc-sang);
  font-size: .82rem;
  font-weight: 650;
  letter-spacing: .02em;
  margin-bottom: 22px;
}
.nhan-nho::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ngoc-sang);
  box-shadow: 0 0 0 4px rgba(87, 214, 201, .22);
}
.hero h1 {
  font-size: clamp(2.05rem, 4.6vw, 3.35rem);
  font-weight: 760;
  letter-spacing: -.028em;
  margin-bottom: .48em;
}
.hero h1 em { font-style: normal; color: var(--vang); }
.hero-phude {
  font-size: clamp(1.02rem, 1.4vw, 1.16rem);
  color: rgba(255, 255, 255, .8);
  max-width: 44ch;
  margin-bottom: 30px;
}
.hero-phude strong { color: #fff; }
.hero-nut { display: flex; flex-wrap: wrap; gap: 13px; }
.hero-ghi {
  margin: 20px 0 0;
  font-size: .87rem;
  color: rgba(255, 255, 255, .55);
}

/* Bảng số dưới hero */
.dai-so {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 62px;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--r);
  overflow: hidden;
}
.dai-so div { background: rgba(6, 23, 38, .55); padding: 20px 22px; }
.dai-so b {
  display: block;
  font-size: 1.62rem;
  font-weight: 740;
  color: var(--vang);
  letter-spacing: -.02em;
}
.dai-so span { font-size: .85rem; color: rgba(255, 255, 255, .66); line-height: 1.45; }

/* Thẻ terminal */
.the-may {
  border-radius: 16px;
  background: rgba(3, 14, 25, .78);
  border: 1px solid rgba(255, 255, 255, .15);
  box-shadow: var(--bk-lon);
  overflow: hidden;
}
.the-may-dau {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 15px;
  background: rgba(255, 255, 255, .05);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.the-may-dau i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.the-may-dau i:first-child { background: #E5734B; }
.the-may-dau i:nth-child(2) { background: #E0B341; }
.the-may-dau i:nth-child(3) { background: #55B97C; }
.the-may-dau span {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .76rem;
  color: rgba(255, 255, 255, .5);
}
.the-may pre {
  margin: 0;
  padding: 18px 18px 22px;
  font-family: var(--mono);
  font-size: .8rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, .86);
  overflow-x: auto;
}
.the-may .nhac { color: var(--ngoc-sang); }
.the-may .khoa { color: #93B4D0; }
.the-may .ok { color: #7EDCA0; }
.the-may .cmt { color: rgba(255, 255, 255, .42); }

/* ───────────── MỤC CHUNG ───────────── */
.muc { padding: 84px 0; }
.muc-mo { background: var(--nen-mo); border-block: 1px solid var(--vien); }
.muc-dau { max-width: 720px; margin-bottom: 46px; }
.muc-dau.giua { margin-inline: auto; text-align: center; }
.muc-nhan {
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--vang);
  margin-bottom: 12px;
}
.muc-dau h2 {
  font-size: clamp(1.6rem, 3vw, 2.28rem);
  font-weight: 730;
  color: var(--navy-dam);
}
.muc-dau p { font-size: 1.06rem; color: var(--chu-nhat); margin: 0; }

/* ───────────── NỖI ĐAU ───────────── */
.luoi-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.the-dau {
  background: #fff;
  border: 1px solid var(--vien);
  border-radius: var(--r);
  padding: 26px 22px;
  box-shadow: var(--bk-nho);
}
.the-dau .icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: rgba(18, 57, 95, .08);
  color: var(--navy);
  margin-bottom: 16px;
}
.the-dau .icon svg { width: 22px; height: 22px; }
.the-dau h3 { font-size: 1.04rem; font-weight: 700; color: var(--navy-dam); }
.the-dau p { font-size: .95rem; color: var(--chu-nhat); margin: 0; }
.cau-chot {
  margin-top: 38px;
  padding: 22px 26px;
  border-left: 4px solid var(--vang);
  background: #fff;
  border-radius: 0 var(--r) var(--r) 0;
  box-shadow: var(--bk-nho);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy-dam);
}
.cau-chot p { margin: 0; }

/* ───────────── NĂNG LỰC ───────────── */
.luoi-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.the-nl {
  position: relative;
  padding: 28px 26px;
  background: #fff;
  border: 1px solid var(--vien);
  border-radius: var(--r);
  box-shadow: var(--bk-nho);
  transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}
.the-nl:hover { transform: translateY(-3px); box-shadow: var(--bk-vua); border-color: #C9D6E4; }
.the-nl .icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(140deg, rgba(47, 179, 168, .18), rgba(18, 57, 95, .1));
  color: var(--navy);
  margin-bottom: 18px;
}
.the-nl .icon svg { width: 23px; height: 23px; }
.the-nl h3 { font-size: 1.08rem; font-weight: 700; color: var(--navy-dam); }
.the-nl p { font-size: .96rem; color: var(--chu-nhat); margin: 0; }

/* ───────────── BẢNG GIÁ ───────────── */
.luoi-gia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.the-gia {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--vien);
  border-radius: 18px;
  padding: 30px 26px;
  box-shadow: var(--bk-nho);
}
.the-gia.noi-bat {
  border-color: var(--navy);
  box-shadow: var(--bk-lon);
  transform: translateY(-8px);
  position: relative;
}
.the-gia.noi-bat::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: 18px;
  border: 1px solid rgba(200, 146, 47, .55);
  pointer-events: none;
}
.nhan-noi-bat {
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  background: var(--vang);
  color: #1A1204;
  font-size: .74rem;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .35em 1em;
  border-radius: 999px;
  white-space: nowrap;
}
.the-gia h3 { font-size: 1.22rem; font-weight: 740; color: var(--navy-dam); margin-bottom: .25em; }
.the-gia .mota { font-size: .92rem; color: var(--chu-nhat); min-height: 2.9em; }
.gia-so {
  display: flex;
  align-items: baseline;
  gap: .3em;
  padding: 14px 0 18px;
  border-bottom: 1px solid var(--vien);
  margin-bottom: 20px;
}
.gia-so b { font-size: 2.05rem; font-weight: 760; color: var(--navy-dam); letter-spacing: -.03em; }
.gia-so span { font-size: .92rem; color: var(--chu-nhat); font-weight: 600; }
.ds-check { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 11px; }
/* Dung padding + ::before tuyet doi, KHONG dung grid/flex:
   li co the chua <strong>, <em>, <code> — voi grid thi moi the inline bi tach thanh mot o rieng,
   chu vo vun tung tu (da dinh 24/09/2026 o trang tai lieu API). */
.ds-check li {
  position: relative;
  padding-left: 30px;
  font-size: .95rem;
  color: #26374A;
}
.ds-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .28em;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(47, 179, 168, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232FB3A8' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
.the-gia .nut { margin-top: auto; }
.ghi-chu-gia {
  margin-top: 30px;
  font-size: .9rem;
  color: var(--chu-nhat);
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
}

/* ───────────── SO SÁNH ───────────── */
.bang-ss { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--vien); border-radius: var(--r); overflow: hidden; box-shadow: var(--bk-nho); }
.bang-ss th, .bang-ss td { padding: 15px 20px; text-align: left; font-size: .96rem; border-bottom: 1px solid var(--vien); }
.bang-ss thead th { background: var(--navy-dam); color: #fff; font-weight: 650; font-size: .92rem; }
.bang-ss thead th:last-child { background: var(--navy); color: var(--vang); }
.bang-ss tbody tr:last-child th, .bang-ss tbody tr:last-child td { border-bottom: 0; }
.bang-ss tbody th { font-weight: 640; color: var(--navy-dam); width: 34%; }
.bang-ss td:nth-of-type(1) { color: var(--chu-nhat); }
.bang-ss td:last-child { font-weight: 620; color: #15402B; background: rgba(47, 179, 168, .07); }
.bang-ss tbody tr:hover td, .bang-ss tbody tr:hover th { background-color: rgba(18, 57, 95, .03); }

/* ───────────── BƯỚC ───────────── */
.luoi-buoc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.the-buoc { padding-top: 14px; border-top: 3px solid var(--vang); }
.the-buoc b {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--navy-dam);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 720;
  margin-bottom: 14px;
}
.the-buoc h3 { font-size: 1.08rem; color: var(--navy-dam); }
.the-buoc p { font-size: .96rem; color: var(--chu-nhat); margin: 0; }

/* ───────────── SẮP CÓ ───────────── */
.sap-co {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: 48px;
  align-items: center;
  padding: 44px;
  border-radius: 20px;
  background: linear-gradient(150deg, #0E3152, var(--navy-sau));
  color: #fff;
  box-shadow: var(--bk-lon);
  position: relative;
  overflow: hidden;
}
.sap-co::before {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  right: -140px; top: -180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 146, 47, .22), transparent 68%);
}
.sap-co > * { position: relative; }
.nhan-sap {
  display: inline-block;
  padding: .34em .85em;
  border-radius: 999px;
  background: rgba(200, 146, 47, .2);
  border: 1px solid rgba(200, 146, 47, .5);
  color: var(--vang);
  font-size: .78rem;
  font-weight: 720;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.sap-co h2 { font-size: clamp(1.45rem, 2.6vw, 2rem); font-weight: 730; }
.sap-co p { color: rgba(255, 255, 255, .76); }
.sap-co .ds-check li { color: rgba(255, 255, 255, .88); font-size: .94rem; }
.sap-co .ds-check li::before { background-color: rgba(87, 214, 201, .18); }
.o-nhan-tin {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: var(--r);
  padding: 26px;
}
.o-nhan-tin h3 { font-size: 1.05rem; }
.o-nhan-tin p { font-size: .9rem; margin-bottom: 16px; }

/* ───────────── FORM ───────────── */
.o-form {
  background: #fff;
  border: 1px solid var(--vien);
  border-radius: 18px;
  padding: 32px;
  box-shadow: var(--bk-vua);
}
.hang-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.o-nhap { display: block; margin-bottom: 16px; }
.o-nhap > span { display: block; font-size: .88rem; font-weight: 640; color: var(--navy-dam); margin-bottom: 6px; }
.o-nhap .buoc { color: #C0392B; }
.o-nhap input, .o-nhap select, .o-nhap textarea {
  width: 100%;
  padding: .78em .9em;
  font-family: inherit;
  font-size: .98rem;
  color: var(--chu);
  background: #fff;
  border: 1px solid #CFDAE6;
  border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.o-nhap textarea { min-height: 96px; resize: vertical; }
.o-nhap input:focus, .o-nhap select:focus, .o-nhap textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(18, 57, 95, .14);
}
.an-di { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-ghi { font-size: .85rem; color: var(--chu-nhat); margin: 14px 0 0; }

/* trên nền tối */
.tren-toi .o-nhap > span { color: rgba(255, 255, 255, .82); }
.tren-toi .o-nhap input {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .25);
  color: #fff;
}
.tren-toi .o-nhap input::placeholder { color: rgba(255, 255, 255, .45); }
.tren-toi .o-nhap input:focus { border-color: var(--ngoc-sang); box-shadow: 0 0 0 3px rgba(87, 214, 201, .2); }

.bao {
  padding: 13px 16px;
  border-radius: 10px;
  font-size: .94rem;
  font-weight: 600;
  margin-bottom: 18px;
}
.bao-ok { background: rgba(47, 179, 168, .12); border: 1px solid rgba(47, 179, 168, .4); color: #14584F; }
.bao-loi { background: rgba(192, 57, 43, .08); border: 1px solid rgba(192, 57, 43, .32); color: #8E2A1F; }

/* ───────────── CÂU HỎI ───────────── */
.ds-hoi { display: grid; gap: 12px; }
.ds-hoi details {
  background: #fff;
  border: 1px solid var(--vien);
  border-radius: var(--r);
  box-shadow: var(--bk-nho);
  overflow: hidden;
}
.ds-hoi summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 54px 18px 22px;
  font-size: 1.02rem;
  font-weight: 650;
  color: var(--navy-dam);
  position: relative;
}
.ds-hoi summary::-webkit-details-marker { display: none; }
.ds-hoi summary::after {
  content: "";
  position: absolute;
  right: 22px; top: 50%;
  width: 11px; height: 11px;
  margin-top: -7px;
  border-right: 2.4px solid var(--vang);
  border-bottom: 2.4px solid var(--vang);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.ds-hoi details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.ds-hoi .dap { padding: 0 22px 20px; color: var(--chu-nhat); font-size: .98rem; }
.ds-hoi .dap p:last-child { margin: 0; }

/* ───────────── CTA CUỐI ───────────── */
.cta-cuoi {
  background:
    radial-gradient(700px 360px at 80% 10%, rgba(47, 179, 168, .2), transparent 62%),
    linear-gradient(160deg, #0D2E4D, var(--navy-sau));
  color: #fff;
  padding: 84px 0;
}
.cta-luoi { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 52px; align-items: start; }
.cta-luoi h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 740; }
.cta-luoi p { color: rgba(255, 255, 255, .78); }
.cta-diem { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.cta-diem li { display: flex; gap: 11px; align-items: flex-start; font-size: .97rem; color: rgba(255, 255, 255, .86); }
.cta-diem svg { width: 19px; height: 19px; flex: none; margin-top: .22em; color: var(--ngoc-sang); }

/* ───────────── CHÂN TRANG ───────────── */
.chan { background: #061523; color: rgba(255, 255, 255, .62); padding: 52px 0 32px; font-size: .93rem; }
.chan-luoi { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 36px; }
.chan h4 { color: #fff; font-size: .95rem; margin-bottom: 14px; }
.chan a { color: rgba(255, 255, 255, .72); }
.chan a:hover { color: #fff; }
.chan .hieu { margin-bottom: 14px; }
.chan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.chan-day {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  font-size: .87rem;
  color: rgba(255, 255, 255, .45);
}

/* ───────────── TRANG PHỤ ───────────── */
.trang-gon { min-height: 72vh; display: grid; place-items: center; text-align: center; padding: 70px 0; }
.trang-gon .hop { max-width: 560px; }
.trang-gon .dau-ok {
  width: 66px; height: 66px;
  margin: 0 auto 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(47, 179, 168, .14);
  color: var(--ngoc);
}
.trang-gon h1 { font-size: 1.85rem; color: var(--navy-dam); }
.trang-gon p { color: var(--chu-nhat); }

/* ───────────── QUẢN TRỊ ───────────── */
.qt { padding: 20px 0 64px; }
.qt h1 { font-size: 1.5rem; color: var(--navy-dam); }
.qt-bang { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--vien); border-radius: var(--r); font-size: .92rem; overflow: hidden; }
.qt-bang th, .qt-bang td { padding: 10px 13px; border-bottom: 1px solid var(--vien); text-align: left; vertical-align: top; }
.qt-bang thead th { background: var(--nen-mo); font-size: .84rem; text-transform: uppercase; letter-spacing: .05em; color: var(--chu-nhat); }
.qt-bang tr:last-child td { border-bottom: 0; }
.tt { display: inline-block; padding: .18em .6em; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.tt-moi { background: rgba(200, 146, 47, .16); color: #7A5710; }
.tt-dang_xu_ly { background: rgba(18, 57, 95, .12); color: var(--navy); }
.tt-da_chot { background: rgba(47, 179, 168, .16); color: #14584F; }
.tt-bo { background: rgba(0, 0, 0, .07); color: #5B6B7A; }
.qt form { display: inline; }
/* ⛔ PHAI co :not(.nut): khong thi quy tac nay (do dac hieu cao hon) de len .nut-navy,
   nen trang + chu trang = nut tang hinh (da dinh 24/09/2026 o nut "Dong bo ngay"). */
.qt select, .qt button:not(.nut) { font-family: inherit; font-size: .84rem; padding: .28em .5em; border-radius: 7px; border: 1px solid var(--vien); background: #fff; color: var(--chu); cursor: pointer; }
.qt button:not(.nut):hover { border-color: var(--navy); color: var(--navy); }

/* ───────────── CO GIÃN ───────────── */
@media (max-width: 1040px) {
  .hero-luoi { grid-template-columns: 1fr; gap: 42px; }
  .hero-phude { max-width: none; }
  .luoi-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sap-co { grid-template-columns: 1fr; gap: 32px; padding: 34px; }
  .cta-luoi { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 860px) {
  .menu { display: none; }
  .luoi-3, .luoi-gia, .luoi-buoc { grid-template-columns: 1fr; }
  .the-gia.noi-bat { transform: none; }
  .dai-so { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chan-luoi { grid-template-columns: 1fr; gap: 28px; }
  .muc { padding: 62px 0; }
  .hero { padding: 56px 0 72px; }
  .bang-ss thead { display: none; }
  .bang-ss tbody th, .bang-ss tbody td { display: block; width: auto; border-bottom: 0; padding: 4px 18px; }
  .bang-ss tbody th { padding-top: 16px; }
  .bang-ss tbody td:last-child { padding-bottom: 16px; border-bottom: 1px solid var(--vien); }
  .bang-ss tbody td::before { content: attr(data-nhan) ": "; font-weight: 650; color: var(--navy-dam); }
}
@media (max-width: 560px) {
  .khung, .khung-hep { width: min(100% - 32px, 1180px); }
  .luoi-4 { grid-template-columns: 1fr; }
  .hang-form { grid-template-columns: 1fr; }
  .o-form { padding: 22px; }
  body { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* =====================================================================
   KHU QUAN TRI + CONG KHACH HANG (admin, /cong, cac trang dang nhap)
   ===================================================================== */

body.nen-qt { background: var(--nen-mo); }

.phu { color: var(--chu-nhat); }
.nho { font-size: .88rem; }

.qt-thanh {
  background: var(--navy-sau);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  position: sticky; top: 0; z-index: 40;
}
.qt-thanh .khung { display: flex; align-items: center; gap: 22px; height: 60px; }
.qt-menu { display: flex; gap: 20px; margin-left: 14px; }
.qt-menu a {
  color: rgba(255, 255, 255, .72);
  font-size: .94rem;
  font-weight: 600;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.qt-menu a:hover { color: #fff; text-decoration: none; }
.qt-menu a.dang { color: #fff; border-bottom-color: var(--vang); }
.qt-nguoi { margin-left: auto; display: flex; align-items: center; gap: 14px; color: rgba(255, 255, 255, .72); font-size: .9rem; }
.qt-nguoi code { background: rgba(255, 255, 255, .12); color: #fff; }
.qt-nguoi a { color: var(--vang); font-weight: 600; }

.qt-dau { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin: 22px 0 16px; }
/* Tieu de dung ngay dau trang thi ap sat thanh tren (ong chu 24/09: "cach voi phan tren cao qua") */
.qt > .qt-dau:first-child { margin-top: 0; }
.qt-dau h1 { margin: 0; font-size: 1.45rem; color: var(--navy-dam); }
.qt-dau p { margin: 0; font-size: .94rem; }
.qt-dau form { margin-left: auto; }

.qt-the {
  background: #fff;
  border: 1px solid var(--vien);
  border-radius: var(--r);
  box-shadow: var(--bk-nho);
  padding: 24px;
  margin-bottom: 20px;
}
.qt-the h2 { font-size: 1.1rem; color: var(--navy-dam); margin-bottom: 16px; }
.qt-the .qt-bang { box-shadow: none; }

.hang-day { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.hang-day .o-nhap { margin-bottom: 0; }
.hang-day form { margin: 0; }

.ds-buoc { margin: 0; padding-left: 20px; display: grid; gap: 9px; color: var(--chu-nhat); font-size: .96rem; }
.ds-buoc code { white-space: nowrap; }

/* O han muc trong cong khach hang */
.luoi-han-muc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.the-so .nhan {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--chu-nhat);
  margin-bottom: 10px;
}
.the-so b { display: block; font-size: 2rem; font-weight: 750; color: var(--navy-dam); letter-spacing: -.02em; }
.the-so b span { font-size: .5em; font-weight: 600; color: var(--chu-nhat); letter-spacing: 0; }
.the-so .thanh {
  height: 8px;
  border-radius: 999px;
  background: rgba(18, 57, 95, .1);
  margin: 12px 0 10px;
  overflow: hidden;
}
.the-so .thanh i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--ngoc), var(--navy)); }

/* Trang dang nhap (quan tri + khach) */
body.trang-vao {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 20px;
  background:
    radial-gradient(760px 420px at 20% 0%, rgba(47, 179, 168, .22), transparent 62%),
    linear-gradient(165deg, #0C2C4A, var(--navy-sau));
}
.hop-vao {
  width: min(430px, 100%);
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--bk-lon);
  padding: 34px 32px 30px;
}
.hop-vao .hieu { margin-bottom: 22px; }
.hop-vao .hieu span { color: var(--navy-dam); }
.hop-vao .hieu small { color: var(--chu-nhat); }
.hop-vao h1 { font-size: 1.4rem; color: var(--navy-dam); margin-bottom: .3em; }
.hop-vao .phu { font-size: .93rem; }
.hop-vao form { margin-top: 20px; }
.hop-vao .nut { margin-top: 6px; }
.hop-vao .phu.nho { margin: 18px 0 0; line-height: 1.6; }

@media (max-width: 860px) {
  .luoi-han-muc { grid-template-columns: 1fr; }
  .qt-menu { gap: 14px; margin-left: 0; }
  .qt-thanh .khung { height: auto; padding: 12px 0; flex-wrap: wrap; gap: 12px; }
  .qt-nguoi { margin-left: 0; }
}

/* ---- Doi ngon ngu (VI / EN / ZH) ---- */
.doi-tieng {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
}
.doi-tieng a {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 650;
  color: rgba(255, 255, 255, .7);
  line-height: 1.6;
}
.doi-tieng a:hover { color: #fff; text-decoration: none; }
.doi-tieng a.dang { background: var(--vang); color: #1A1204; }

.doi-tieng-sang {
  background: rgba(18, 57, 95, .06);
  border-color: var(--vien);
  width: fit-content;
  margin: 0 0 18px auto;
}
.doi-tieng-sang a { color: var(--chu-nhat); }
.doi-tieng-sang a:hover { color: var(--navy-dam); }
.doi-tieng-sang a.dang { background: var(--navy); color: #fff; }

/* ---- Khoi soan noi dung theo tung ngon ngu trong trang Goi ---- */
.o-tieng {
  border: 1px solid var(--vien);
  border-radius: var(--r);
  padding: 18px 18px 6px;
  margin-bottom: 16px;
  background: var(--nen-mo);
}
.o-tieng h3 { font-size: .98rem; color: var(--navy-dam); margin-bottom: 12px; }
.o-tieng textarea { font-size: .92rem; }

@media (max-width: 860px) {
  .thanh-tren .doi-tieng { order: 3; }
}

/* =====================================================================
   KHU QUAN TRI — MENU DOC BEN TRAI (ong chu chot 24/09/2026)
   ===================================================================== */

.bo-qt { display: flex; align-items: flex-start; min-height: 100vh; }

.canh-trai {
  position: sticky;
  top: 0;
  flex: 0 0 248px;
  width: 248px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-right: 1px solid var(--vien);
  z-index: 30;
}

.canh-hieu {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 18px 20px;
  border-bottom: 0;
  color: var(--navy-dam);
  font-weight: 700;
}
.canh-hieu:hover { text-decoration: none; }
.canh-hieu img { height: 30px; width: auto; display: block; }
.canh-hieu span { font-size: 1.02rem; line-height: 1.2; }
.canh-hieu small {
  display: block;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--chu-nhat);
  margin-top: 2px;
}

.canh-menu { display: flex; flex-direction: column; padding: 12px 10px; gap: 2px; margin-bottom: auto; }
.canh-menu a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 9px;
  border-left: 3px solid transparent;
  color: var(--chu-nhat);
  font-size: .95rem;
  font-weight: 600;
  transition: background-color .15s ease, color .15s ease;
}
.canh-menu a svg { width: 19px; height: 19px; flex: none; opacity: .85; }
.canh-menu a:hover { background: rgba(18, 57, 95, .06); color: var(--navy-dam); text-decoration: none; }
.canh-menu a.dang {
  background: rgba(18, 57, 95, .07);
  border-left-color: var(--vang);
  color: var(--navy-dam);
}
.canh-menu a.dang svg { color: var(--vang); opacity: 1; }

/* Menu con theo loai dich vu (ong chu 25/09: moi loai mot muc con).
   Thut vao cho thang hang voi chu cua muc cha, khong voi bieu tuong. */
.menu-con { display: flex; flex-direction: column; gap: 1px; margin: 1px 0 3px; }
.menu-con a {
  padding: 7px 12px 7px 43px;
  font-size: .87rem;
  font-weight: 500;
  border-left: 3px solid transparent;
  border-radius: 9px;
  color: var(--chu-nhat);
}
.menu-con a::before {
  content: '';
  width: 5px; height: 5px;
  margin: 0 9px 0 -14px;
  border-radius: 50%;
  background: currentColor;
  opacity: .35;
  display: inline-block;
  vertical-align: middle;
}
.menu-con a:hover { background: rgba(18, 57, 95, .05); color: var(--navy-dam); text-decoration: none; }
/* Muc con dang chon: CHI dau cham doi mau.
   Ong chu 25/09: "menu con chi can dau cham doi mau, con cai mau cam khong can vi
   dang o trong menu con roi" — vach cam ben trai la dau hieu cua muc CHA, lap lai o
   muc con thi thua va lam menu ron. Phai ghi de border-left-color vi .canh-menu a.dang
   to no vang, ma muc con nam trong .canh-menu. */
.menu-con a.dang {
  color: var(--navy-dam);
  font-weight: 700;
  background: none;
  border-left-color: transparent;
}
.menu-con a.dang::before { opacity: 1; background: var(--vang); }
/* Menu thu gon thi giau muc con, chi con bieu tuong cua muc cha */
.gon .menu-con { display: none; }

/* Tieu de hai khu trong menu trai (ong chu chot 24/09: "chia thanh hai khu") */
.canh-nhom {
  margin: 14px 0 4px;
  padding: 0 12px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--chu-nhat);
  opacity: .62;
}
.canh-menu > .canh-nhom:first-child { margin-top: 2px; }
/* Menu thu gon: bo chu, chi con mot duong ke ngan cach hai khu */
.gon .canh-nhom { margin: 10px 14px; padding: 0; border-top: 1px solid var(--vien); }
.gon .canh-nhom span { display: none; }
.gon .canh-menu > .canh-nhom:first-child { border-top: 0; margin-top: 0; }

/* So du vi Cloud tren thanh tren (ong chu 24/09: "de truoc ngon ngu") */
.so-du-top {
  display: flex; flex-direction: column; gap: 1px;
  padding: 5px 12px; border-radius: 9px;
  background: rgba(18, 57, 95, .06);
  border: 1px solid var(--vien);
  line-height: 1.15; white-space: nowrap;
}
.so-du-top:hover { background: rgba(18, 57, 95, .1); text-decoration: none; }
.so-du-top span { font-size: .7rem; color: var(--chu-nhat); }
.so-du-top b { font-size: .95rem; color: var(--navy-dam); }

/* Phan trang danh sach phieu nap */
.phan-trang { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 16px; }
.phan-trang a {
  min-width: 34px; padding: 6px 10px; text-align: center;
  border: 1px solid var(--vien); border-radius: 8px;
  background: #fff; color: var(--navy); font-size: .88rem; font-weight: 600;
}
.phan-trang a:hover { background: var(--nen-mo); text-decoration: none; }
.phan-trang a.dang { background: var(--navy-dam); border-color: var(--navy-dam); color: #fff; }
.phan-trang a.tat { opacity: .4; pointer-events: none; }
.phan-trang .cach { color: var(--chu-nhat); padding: 0 2px; }
.phan-trang .dem { margin-left: auto; font-size: .85rem; color: var(--chu-nhat); }

/* Bang gia dich vu: o nhap nam gon trong o bang, cot vi du chu nho */
.bang-gia input[type="text"] { padding: 5px 8px; font-size: .9rem; border: 1px solid var(--vien); border-radius: 7px; }
.bang-gia td { vertical-align: middle; }
.bang-gia .nho { font-size: .78rem; }
.bang-gia .o-vi-du { font-size: .78rem; line-height: 1.35; white-space: nowrap; }

/* ⭐ Ông chủ 24/09: "sử dụng font chữ nhỏ như bên SM".
   Đổi gốc rem của RIÊNG khu quản trị ⇒ mọi cỡ chữ, khoảng đệm co lại đồng đều,
   không phải sửa từng dòng. Trang bán hàng giữ nguyên chữ to cho dễ đọc. */
html.qt-html { font-size: 14px; }
html.qt-html body { font-size: 1rem; line-height: 1.55; }
html.qt-html .qt-bang th,
html.qt-html .qt-bang td { padding: 8px 11px; }
html.qt-html .qt-dau h1 { font-size: 1.35rem; }
html.qt-html .qt-the { padding: 18px; }

/* Popup them moi (ong chu 24/09: "form them moi dang popup") */
.hop { border: 0; border-radius: 14px; padding: 0; width: min(640px, 92vw); box-shadow: 0 24px 60px rgba(6,23,38,.28); }
.hop::backdrop { background: rgba(6, 23, 38, .45); }
.hop[open] { animation: hop-hien .14s ease-out; }
@keyframes hop-hien { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* display:flow-root chan le cua khoi cuoi tran ra ngoai hop — truoc day no lam
   popup co thanh cuon thua du noi dung thua cho (ong chu 24/09: "van loi") */
.hop form { padding: 20px 22px 18px; display: flow-root; }
.hop-dau { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.hop-dau h2 { margin: 0; font-size: 1.1rem; color: var(--navy-dam); }
.hop-dong { margin-left: auto; border: 0; background: transparent; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--chu-nhat); padding: 0 4px; }
.hop-dong:hover { color: var(--navy-dam); }
.hop-cuoi { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.hang-nut { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.bang-gia .o-vao { background: rgba(18, 57, 95, .035); }

/* BAY: thuoc tinh hidden cua HTML chi la display:none o muc user-agent, nen bat ky
   class nao dat display (vi du .o-nhap, .hang-form deu la flex/grid) cung de len no
   => o "an" van hien ra. Phai ep bang !important thi hidden moi co tac dung. */
[hidden] { display: none !important; }

/* ─── GON THEO LOI SYSTEMMANAGER (ong chu 24/09) ─── */
/* Tieu de cot khong xuong dong, hang thang hang giua, chu gon */
html.qt-html .qt-bang thead th { white-space: nowrap; font-size: .76rem; padding: 9px 11px; }
html.qt-html .qt-bang td { vertical-align: middle; }
html.qt-html .qt-bang tbody tr:hover { background: rgba(18, 57, 95, .025); }
html.qt-html .qt-bang code { font-size: .82rem; }
/* Thao tac trong bang: nut nho, khong lam phinh hang */
html.qt-html .qt-bang .nut-nho {
  padding: .3em .7em; font-size: .8rem; border-radius: 7px;
  border: 1px solid var(--vien); background: #fff; color: var(--navy); cursor: pointer; font-weight: 600;
}
html.qt-html .qt-bang .nut-nho:hover { background: var(--nen-mo); }
html.qt-html .qt-bang select { max-width: 130px; }
.o-thao-tac { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }

/* Popup: khong bao gio cao qua man hinh, tieu de tach bach voi phan mo ta */
.hop { max-height: 88vh; overflow: auto; }
.hop-dau { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--vien); }
.hop form > p.phu { margin: 0 0 16px; }
.hop-cuoi { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--vien); }

/* ─── TAB GACH CHAN theo loi SystemManager (ong chu 24/09: "format theo style giao dien nay") ─── */
.tab-ngang {
  display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 1px solid var(--vien);
  margin: 0 0 18px;
}
.tab-ngang a {
  padding: 10px 16px;
  font-size: .98rem; font-weight: 600;
  color: var(--chu-nhat);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab-ngang a:hover { color: var(--navy-dam); text-decoration: none; }
/* Dang o tab nao thi boi dam tab do */
.tab-ngang a.dang { color: var(--navy-dam); font-weight: 800; border-bottom-color: var(--navy); }


/* Tab PHU (bo loc trong mot tab chinh): nho hon tab chinh mot co,
   chon thi CHI DOI MAU, khong boi dam (ong chu 24/09). */
.tab-ngang.tab-phu { border-bottom: 0; margin-bottom: 12px; gap: 2px; }
.tab-ngang.tab-phu a { font-size: .88rem; font-weight: 600; padding: 6px 12px; border-bottom: 0; }
.tab-ngang.tab-phu a.dang { color: var(--navy); font-weight: 600; border-bottom: 0; }
/* Trong khoi tieu de thi tab nam tron mot hang rieng, khong dinh vao h1 */
.qt-dau .tab-ngang { flex-basis: 100%; margin-bottom: 0; }

/* Dong dem ban ghi kieu "47 co so du lieu" */
.dem-ban-ghi { font-size: .85rem; color: var(--chu-nhat); margin: 0 0 10px; }

/* CAN THANG khi tab lam tieu de: khoi tieu de khong con h1 thi tab sat mep tren,
   thang hang voi bang ben duoi (ong chu 24/09: "canh lai cho thang") */
/* Hang ten khach + nut "Ve danh sach" cach phan duoi mot chut cho do dinh (ong chu 25/09) */
html.qt-html .qt-dau { margin-bottom: 6px; gap: 10px; }
html.qt-html .qt-dau .tab-ngang { margin-top: 0; }
html.qt-html .qt > .tab-ngang:first-child { margin-top: 0; }
/* Thanh tren khong con ten trang thi phan ben phai van phai nam sat phai */
html.qt-html .qt-dinh-trong .nguoi-top { margin-left: auto; }

/* HAI HEADER THANG HANG (ong chu 24/09: "canh hai header cho thang hang")
   Thanh tren cua vung noi dung cao 60px; khoi logo ben menu trai truoc day cao ~66px
   (do padding cua .canh-hieu) nen hai duong ke duoi lech nhau. Ep bang dung 60px. */
html.qt-html .canh-dinh { height: 60px; box-sizing: border-box; }
html.qt-html .canh-hieu { padding: 0 16px; height: 100%; }
html.qt-html .qt-dinh-trong { box-sizing: border-box; }
/* Khi thu gon menu thi logo va nut xep doc, khong ep chieu cao nua */
html.qt-html.gon .canh-dinh { height: auto; }

/* BANG RONG THI TU CUON, KHONG DAY CA TRANG TRAN NGANG (ong chu 24/09: "loi em oi")
   Bang gia co 7 cot kem o nhap nen rong hon khung; truoc day no day ca thanh tren
   tran ra ngoai, nut "Thoat" bi cat mat. */
.bang-cuon { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* CHI bang gia moi can rong 860px; bang khac nam trong cot hep ma ep 860px thi
   sinh ra thanh cuon thua, nhin rat xau (ong chu 25/09 chup duoc). */
.bang-cuon > .qt-bang.bang-gia { min-width: 860px; }
/* KHU LAM VIEC: canh trai, sat mep, responsive.
   Ong chu chot 25/09/2026 — ap cho CA khu quan tri LAN cong khach hang, vi hai ben
   dung chung .khung-qt.
   Truoc day thua ke margin-inline:auto cua .khung nen noi dung bi day vao giua, man
   hinh rong thi chua mot khoang trong vo ich ben trai trong khi bang bi ep hep. */
html.qt-html .khung-qt {
  max-width: none;
  width: 100%;
  margin-inline: 0;
  padding-inline: 22px;
}
@media (max-width: 900px) { html.qt-html .khung-qt { padding-inline: 16px; } }
@media (max-width: 560px) { html.qt-html .khung-qt { padding-inline: 12px; } }

/* Hang tab co nut hanh dong ben phai. Tab van sat mep trai, nut day sang phai,
   xuong man hinh hep thi nut rot xuong dong duoi chu khong ep tab co lai. */
.hang-tab { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.hang-tab > .tab-ngang { flex: 1; min-width: 0; }
.hang-tab .tab-nut { padding-bottom: 10px; }
.hang-tab .tab-nut > * { margin-left: 0 !important; }
@media (max-width: 640px) {
  .hang-tab { align-items: stretch; }
  .hang-tab .tab-nut { padding-bottom: 0; }
}

/* Tab dau tien sat mep trai de thang hang voi bang va dong dem ben duoi
   (ong chu 24/09: "dua tieu de tab ra trai them chut nua cho do bi hut") */
.tab-ngang a:first-child { padding-left: 0; padding-right: 22px; }
.tab-ngang.tab-phu a:first-child { padding-left: 0; padding-right: 16px; }

/* TRANG CHI TIET KHACH: luoi RIENG hai cot bang nhau.
   (.luoi-phieu la luoi cua trang phieu nap: 320px cho ma QR + phan con lai,
    dung lai o day thi cot ho so bi bop con 320px, dia chi thu vo dong.) */
.luoi-doi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.luoi-doi > .qt-the { display: flex; flex-direction: column; margin-bottom: 0; }
@media (max-width: 900px) { .luoi-doi { grid-template-columns: minmax(0, 1fr); } }
html.qt-html .qt-the > table.qt-bang th { white-space: nowrap; text-transform: none; letter-spacing: 0; font-size: .84rem; }
/* Dia chi thu dien tu dai thi ngat theo ky tu, dung day rong cot */
html.qt-html .qt-the td a[href^="mailto:"] { word-break: break-all; }

/* Chi tiet khach: trai 1/3 (ho so + vi), phai 2/3 (ha tang + dich vu) — ong chu 25/09 */
.luoi-chitiet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 18px; align-items: start; }
.luoi-chitiet .cot-trai, .luoi-chitiet .cot-phai { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.luoi-chitiet .qt-the { margin-bottom: 0; }
@media (max-width: 980px) { .luoi-chitiet { grid-template-columns: minmax(0, 1fr); } }

/* NUT TRONG KHU QUAN TRI nho lai con khoang 2/3 va cach thanh tren ra
   (ong chu 25/09: "may nut nay em cho no be lai bang 2/3 va cach cai header ra").
   Trang ban hang van giu nut to cho khach de bam. */
html.qt-html .nut { padding: .55em 1em; font-size: .88rem; border-radius: 8px; }
html.qt-html .hang-nut { margin-top: 12px; margin-bottom: 16px; }
html.qt-html .qt-dau .nut { padding: .5em .95em; font-size: .86rem; }

/* Khoi tieu de: nut trong khoi tieu de khong duoc tran ra ngoai mep phai */
html.qt-html .qt-dau { flex-wrap: wrap; }
html.qt-html .qt-dau > .nut { flex: none; max-width: 100%; }

/* Luoi the so o cong khach (tong quan, lich su giao dich) */
.luoi-the { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.luoi-the > .qt-the { margin-bottom: 0; display: flex; flex-direction: column; }
.luoi-the .qt-the .nut { margin-top: auto; align-self: flex-start; }

/* O bao gia khi khach dat mua — con so phai to, thay ngay truoc khi bam */
.o-bao-gia {
  background: rgba(18, 57, 95, .05);
  border: 1px solid var(--vien);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 4px 0 16px;
}
.o-bao-gia b { display: block; font-size: 1.6rem; font-weight: 750; color: var(--navy-dam); line-height: 1.2; }

/* Man hinh chi tiet co so du lieu: ba cot (bang du lieu - tai khoan - sao luu) */
.luoi-ba { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.luoi-ba > .qt-the { margin-bottom: 0; }
@media (max-width: 1100px) { .luoi-ba { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .luoi-ba { grid-template-columns: minmax(0, 1fr); } }
/* Danh sach bang dai thi cuon trong o, khong keo dai ca trang */
.khung-cuon { max-height: 320px; overflow-y: auto; }

/* The mot dich vu trong danh sach */
.the-dich-vu { border: 1px solid var(--vien); border-radius: 10px; padding: 14px; margin-bottom: 12px; }
.the-dich-vu:last-of-type { margin-bottom: 0; }

.canh-ngoai {
  padding: 14px 22px;
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--vien);
}
.canh-ngoai a { color: var(--chu-nhat); font-size: .85rem; }
.canh-ngoai a:hover { color: var(--navy-dam); text-decoration: none; }

/* THANH TREN cua vung noi dung — tai khoan nam o GOC PHAI TREN CUNG
   (ong chu chot 24/09/2026: "la dua qua top tren goc phai kia em oi") */
.qt-dinh {
  position: sticky;
  top: 0;
  z-index: 25;
  background: #fff;
  border-bottom: 1px solid var(--vien);
}
.qt-dinh-trong {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 60px;
  width: min(1180px, 100% - 56px);
  margin-inline: auto;
}
.qt-dinh h2 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--navy-dam);
  letter-spacing: -.01em;
}
.nguoi-top { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.nguoi-ten { text-align: right; line-height: 1.25; min-width: 0; }
.nguoi-ten b {
  display: block;
  font-size: .92rem;
  font-weight: 650;
  color: var(--navy-dam);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nguoi-ten span { display: block; font-size: .78rem; color: var(--chu-nhat); }
.nut-thoat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: .45em .9em;
  border: 1px solid var(--vien);
  border-radius: 9px;
  color: var(--navy);
  font-size: .88rem;
  font-weight: 650;
  background: #fff;
  transition: border-color .15s ease, background-color .15s ease;
}
.nut-thoat svg { width: 17px; height: 17px; }
.nut-thoat:hover { border-color: var(--vang); background: rgba(200, 146, 47, .09); text-decoration: none; }

.qt-than { flex: 1; min-width: 0; }
.khung-qt { width: min(1180px, 100% - 56px); margin-inline: auto; }

@media (max-width: 900px) {
  /* Menu trai tro thanh NGAN KEO — xem tiep khoi ".man-che" o cuoi tep */
  .bo-qt { display: block; }
  .khung-qt, .qt-dinh-trong { width: min(100% - 32px, 1180px); }
  .qt-dinh-trong { height: 56px; gap: 10px; }
  .qt-dinh h2 {
    font-size: .95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nut-thoat span { display: none; }
  .nut-thoat { padding: .45em .6em; }
  .nguoi-ten b { font-size: .86rem; max-width: 40vw; }
  .nguoi-ten span { font-size: .72rem; }
  .nguoi-top { gap: 10px; }
}

@media (max-width: 560px) {
  .nguoi-ten { display: none; }
  .qt { padding-top: 20px; }
}

/* ─── Nut an/hien menu trai + ngan keo tren man hinh nho ─── */
.canh-dinh {
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--vien);
  padding-right: 8px;
}
.canh-dinh .canh-hieu { flex: 1; min-width: 0; border-bottom: 0; }

.nut-gon, .nut-mo {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  flex: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  background: rgba(18, 57, 95, .07);
  color: var(--navy);
  transition: background-color .15s ease, transform .2s ease;
}
.nut-gon svg, .nut-mo svg { width: 18px; height: 18px; }
.nut-gon:hover { background: rgba(18, 57, 95, .14); color: var(--navy-dam); }

.nut-mo { display: none; background: rgba(18, 57, 95, .08); color: var(--navy); }
.nut-mo:hover { background: rgba(18, 57, 95, .15); }

.man-che { display: none; }

/* --- Trang thai THU GON (chi con bieu tuong) --- */
.gon .canh-trai { flex-basis: 74px; width: 74px; }
.gon .canh-hieu span,
.gon .canh-menu a span,
.gon .canh-ngoai { display: none; }
.gon .canh-hieu { justify-content: center; padding: 18px 0; }
.gon .canh-dinh { flex-direction: column; gap: 0; padding: 0 0 10px; }
.gon .canh-menu a { justify-content: center; padding: 11px 0; border-left: 0; border-right: 3px solid transparent; }
.gon .canh-menu a.dang { border-right-color: var(--vang); }
.gon .nut-gon svg { transform: rotate(180deg); }

/* --- Man hinh nho: menu thanh NGAN KEO truot ra, co nen mo --- */
@media (max-width: 900px) {
  .canh-trai,
  .gon .canh-trai {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 264px;
    flex-basis: 264px;
    height: 100%;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 0 0 40px rgba(11, 36, 64, .22);
    overflow-y: auto;
  }
  .mo .canh-trai { transform: translateX(0); }
  /* Thu gon khong ap dung tren man hinh nho */
  .gon .canh-hieu span,
  .gon .canh-menu a span,
  .gon .canh-ngoai { display: block; }
  .gon .canh-hieu { justify-content: flex-start; padding: 18px 20px; }
  .gon .canh-dinh { flex-direction: row; padding-right: 8px; }
  .gon .canh-menu a { justify-content: flex-start; padding: 10px 12px; border-right: 0; }
  .nut-gon { display: none; }
  .nut-mo { display: grid; }

  .man-che {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(6, 23, 38, .5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 29;
  }
  .mo .man-che { opacity: 1; pointer-events: auto; }
  .mo { overflow: hidden; }
}

/* Man hinh nho: bang quan tri cuon ngang trong khung, khong lam vo trang */
@media (max-width: 900px) {
  .qt-bang {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--r);
  }
  .qt-bang thead, .qt-bang tbody { display: table; width: 100%; min-width: 660px; }
  .qt-bang th, .qt-bang td { padding: 9px 11px; }

  .qt-dau { gap: 10px; }
  .qt-dau form { margin-left: 0; width: 100%; }
  .qt-dau .nut { width: 100%; }

  .hang-form { grid-template-columns: 1fr; }
  .hang-day { flex-direction: column; align-items: stretch; }
  .hang-day .nut, .hang-day button { width: 100%; }
  .luoi-han-muc { grid-template-columns: 1fr !important; }
  .qt-the { padding: 18px 16px; }
}

/* ─── Cong khach: o so du tren thanh tren ─── */
.o-so-du {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  padding: 6px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
}
.o-so-du:hover { background: rgba(200, 146, 47, .18); text-decoration: none; }
.o-so-du span { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.o-so-du b { font-size: .98rem; color: var(--vang); font-weight: 700; }

/* ─── Trang phieu nap ─── */
.luoi-phieu { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 20px; align-items: start; }
.o-qr { text-align: center; }
.o-qr h2 { margin-bottom: 4px; }
.khung-qr {
  margin: 14px auto 0;
  width: 236px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--vien);
  border-radius: 14px;
}
.khung-qr svg { display: block; width: 100%; height: auto; }

@media (max-width: 860px) {
  .luoi-phieu { grid-template-columns: 1fr; }
  .an-hep { display: none; }
  .o-so-du { padding: 5px 10px; }
}

/* So du tren thanh tren: tien Viet la chinh, USD nho ben duoi (USD la don vi goc) */
.o-so-du i { display: block; font-style: normal; font-size: .7rem; color: rgba(255, 255, 255, .5); }

/* ─── Khoi DANH CHO DOI TAC tren trang chu ─── */
.khoi-doi-tac {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: 28px;
  align-items: center;
  margin-top: 34px;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--vien);
  border-radius: 18px;
  box-shadow: var(--bk-nho);
}
.khoi-doi-tac > div > h3 {
  font-size: 1.12rem;
  color: var(--navy-dam);
  margin-bottom: 18px;
}
.khoi-doi-tac .luoi-buoc { gap: 18px; }
.khoi-doi-tac .the-buoc h3 { font-size: 1rem; }
.o-cta-doi-tac {
  padding: 22px;
  border-radius: 14px;
  background: linear-gradient(150deg, #0E3152, var(--navy-sau));
  text-align: center;
}
.o-cta-doi-tac .phu { color: rgba(255, 255, 255, .7); }

@media (max-width: 900px) {
  .khoi-doi-tac { grid-template-columns: 1fr; padding: 20px; }
}

/* ═══ POPUP THÊM TÊN MIỀN — MỘT hộp, hai lớp ═══
   ⛔ ĐỪNG lồng hai <dialog>: hộp con lệch khỏi hộp cha, nút của cha thò ra dưới,
      hai lớp nền mờ chồng nhau (ông chủ 25/09/2026: "xấu thế em"). Một hộp rồi
      đổi lớp bên trong thì bao giờ cũng thẳng hàng và chỉ có một nền mờ.
   ⚠️ Nhớ luật cũ ở dòng 635: `.qt button:not(.nut)` đè nền trắng + cỡ chữ nhỏ lên
      MỌI nút không mang class `.nut`. Nên nút ở đây phải có class riêng, có tiền tố
      `.qt`, và khối này phải nằm SAU luật ấy trong tệp. */
.hop-lop { display: none; }
.hop-lop.hien { display: block; }

.hop-quay { display: flex; align-items: center; gap: 10px; }
.qt .hop-quay button.nut-quay { border: 0; background: transparent; font-size: 1.3rem; line-height: 1;
  padding: 0 2px; cursor: pointer; color: var(--chu-nhat); }
.qt .hop-quay button.nut-quay:hover { color: var(--navy-dam); }

/* Ô "Khách hàng": trông y như ô nhập, bấm vào thì mở lớp chọn */
.qt button.o-chon { display: flex; align-items: center; gap: 8px; width: 100%;
  padding: .78em .9em; font-family: inherit; font-size: .98rem; text-align: left; cursor: pointer;
  border: 1px solid var(--vien); border-radius: var(--r-nho); background: #fff; color: var(--chu); }
.qt button.o-chon:hover { border-color: var(--navy); }
.qt button.o-chon.trong { color: var(--chu-nhat); }
.qt button.o-chon .mui { margin-left: auto; color: var(--chu-nhat); font-size: .78em; }

/* Danh sách khách trong lớp chọn */
.ds-chon { max-height: 46vh; overflow: auto; border: 1px solid var(--vien); border-radius: var(--r-nho); }
.qt .ds-chon button.dong-chon { display: block; width: 100%; text-align: left;
  padding: .7em .9em; font-family: inherit; font-size: .94rem; line-height: 1.45;
  border: 0; border-bottom: 1px solid var(--vien); border-radius: 0;
  background: #fff; color: var(--chu); cursor: pointer; }
.qt .ds-chon button.dong-chon:last-child { border-bottom: 0; }
.qt .ds-chon button.dong-chon:hover { background: var(--nen-mo); }
.ds-chon .ma-nho { color: var(--chu-nhat); font-size: .86em; }
.ds-chon .rong { padding: 16px; text-align: center; color: var(--chu-nhat); font-size: .9rem; }

/* ═══ BẢNG BẢN GHI DNS — lối Namecheap ═══
   Ông chủ 25/09/2026: *"thêm record như này"* (kèm ảnh trang Advanced DNS).
   Dòng hiện ra là CHỮ, bấm mới thành ô nhập. Cả bảng là ô nhập thì nhìn như tờ khai
   thuế, mà chín phần mười thời gian người ta chỉ vào ĐỌC xem có gì.
   ⚠️ Ô nhập lúc không sửa vẫn nằm trong DOM (chỉ `display:none`) nên biểu mẫu vẫn gửi
      đủ — đừng đổi sang tháo khỏi DOM, máy chủ đang nhận CẢ BẢNG mỗi lần lưu. */
.bg-dong .sua { display: none; }
.bg-dong.dang-sua .xem { display: none; }
.bg-dong.dang-sua .sua { display: block; }
.bg-dong.dang-sua select.sua { display: block; }
.bg-dong .xem { display: block; padding: .25em 0; }
.bg-dong .xem.trong { color: var(--chu-nhat); }
.bg-dong.dang-sua { background: var(--nen-mo); }
.bg-dong input.sua, .bg-dong select.sua { width: 100%; font-family: inherit; font-size: .9rem;
  padding: .4em .55em; border: 1px solid var(--vien); border-radius: 7px; background: #fff; color: var(--chu); }
.bg-dong input.sua:focus, .bg-dong select.sua:focus { outline: 2px solid var(--navy); outline-offset: -1px; }

.bg-nut { white-space: nowrap; text-align: right; }
.qt .bg-nut button.ico { border: 0; background: transparent; cursor: pointer; padding: 2px 5px;
  font-size: 1rem; line-height: 1; color: var(--chu-nhat); border-radius: 6px; }
.qt .bg-nut button.ico:hover { background: #fff; color: var(--navy-dam); }
.qt .bg-nut button.ico.ok { color: #047857; font-size: 1.1rem; }
.qt .bg-nut button.ico.huy { color: #B91C1C; font-size: 1.05rem; }
.bg-dong .chi-sua { display: none; }
.bg-dong.dang-sua .chi-sua { display: inline-block; }
.bg-dong.dang-sua .chi-xem { display: none; }

/* Cột ĐỘ ƯU TIÊN của bản ghi: có cột nhưng không có tên cột, đứng sau Giá trị
   (ông chủ 25/09, theo lối Namecheap). Chỉ loại bản ghi CÓ độ ưu tiên mới hiện ô.
   ⚠️ Ẩn bằng `display:none` chứ đừng dùng `disabled`: ô disabled KHÔNG được gửi lên, mà
      máy chủ ghép các mảng theo chỉ số — thiếu một ô là lệch cả bảng.
   ⚠️ Phải đặt SAU luật `.bg-dong.dang-sua .sua { display:block }` và đủ độ đặc hiệu,
      không thì luật kia đè, ô ưu tiên xuống dòng nằm dưới ô Giá trị (đã dính 25/09). */
.bg-dong .sua.o-ut { display: none; }
.bg-dong.la-mx.dang-sua .sua.o-ut { display: block; }