/* ==========================================================================
   Sigologin — Component layer
   Phu thuoc tokens.css. Khong ma mau truc tiep o day.
   ========================================================================== */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 var(--s-3); line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
p  { margin: 0 0 var(--s-4); color: var(--text-dim); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.mono  { font-family: var(--mono); }
.muted { color: var(--muted); }
.dim   { color: var(--text-dim); }
.xs    { font-size: var(--fs-xs); }
.sm    { font-size: var(--fs-sm); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--s-5); }
.stack > * + * { margin-top: var(--s-4); }
.row { display: flex; gap: var(--s-3); align-items: center; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; }

.grid { display: grid; gap: var(--s-5); }
.grid.c2 { grid-template-columns: repeat(2, 1fr); }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid.c3, .grid.c4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- Thuong hieu */

.brand { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; letter-spacing: -0.02em; }
.brand-mark {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  /* Nen chuyen mau la de danh cho mot chu cai, tu thoi chua co logo. Gio o day
     la anh logo that, va nen mau lot qua nhung cho trong suot cua no. */
  &:is(img) { background: none; }
  display: grid; place-items: center;
  color: var(--accent-ink); font-size: var(--fs-sm); font-weight: 700;
  flex: none;
}
.brand-mark.lg { width: 40px; height: 40px; border-radius: 12px; font-size: var(--fs-lg); }

/* ------------------------------------------------------------------- Nut bam */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  color: var(--text);
  font: inherit; font-size: var(--fs-sm); font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  white-space: nowrap;
}
.btn:hover { border-color: var(--muted); text-decoration: none; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent; color: var(--accent-ink); font-weight: 600;
}
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; }
.btn.danger:hover { border-color: var(--err); color: var(--err); }
.btn.lg { padding: 13px 24px; font-size: var(--fs-base); border-radius: var(--r-lg); }
.btn.sm { padding: 5px 10px; font-size: var(--fs-xs); }
.btn.block { width: 100%; }

/* --------------------------------------------------------------------- Nhan */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: var(--fs-xs); font-weight: 500;
  white-space: nowrap;
}
.badge.ok   { border-color: var(--ok);   color: var(--ok);   background: var(--ok-bg); }
.badge.warn { border-color: var(--warn); color: var(--warn); background: var(--warn-bg); }
.badge.err  { border-color: var(--err);  color: var(--err);  background: var(--err-bg); }
.badge.info { border-color: var(--accent); color: var(--accent); background: var(--info-bg); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* ----------------------------------------------------------------------- The */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.card.tight { padding: var(--s-4); }
.card.flush { padding: 0; overflow: hidden; }
.card-head {
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
.card-head h3, .card-head h4 { margin: 0; }

/* --------------------------------------------------------------- O so lieu */

.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4) var(--s-5); }
.stat .label { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.stat .value { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.03em; margin: 2px 0; }
.stat .delta { font-size: var(--fs-xs); }
.stat .delta.up { color: var(--ok); }
.stat .delta.down { color: var(--err); }

/* --------------------------------------------------------------------- Bang */

table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
th {
  text-align: left; font-weight: 500; font-size: var(--fs-xs);
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em;
  padding: 10px var(--s-4);
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
  position: sticky; top: 0; z-index: 1;
}
td { padding: 12px var(--s-4); border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tbody tr:hover td { background: var(--hover-tint); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }

/* ----------------------------------------------------------------- O nhap */

label.field { display: block; margin-bottom: var(--s-4); }
label.field > span { display: block; font-size: var(--fs-sm); margin-bottom: 6px; color: var(--text-dim); }
/* LIET KE TUNG `type` LA MOT CAI BAY.
   `<input>` khong khai `type` thi mac dinh la text NHUNG bo chon
   `input[type="text"]` KHONG khop - thuoc tinh do khong ton tai trong DOM. Cac
   type moi hon nhu `number`, `date` cung roi ra ngoai. Ket qua la trong cung mot
   bieu mau co o an vien mac dinh cua he dieu hanh, co o an vien cua ta, cao thap
   khong deu. Loai tru hai type khong phai o nhap thi khong bao gio sot. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select,
textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-soft);
  color: var(--text);
  font: inherit; font-size: var(--fs-sm);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
::placeholder { color: var(--muted); }
.hint { font-size: var(--fs-xs); color: var(--muted); margin-top: 5px; }

/* Mot o nhap trong bieu mau: NHAN TREN, o duoi.
   Nhan nam cung dong voi o thi moi nhan mot do dai khac nhau day o lech nhau,
   va o bi bop lai theo phan con thua. Xep doc thi moi o rong bang nhau va nhan
   thang hang. */
.o { display: block; }
.o > span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: var(--fs-xs);
}

/* ------------------------------------------------------------------- Canh bao */

.notice {
  display: flex; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: var(--fs-sm);
}
.notice.warn { border-color: var(--warn); background: var(--warn-bg); }
.notice.err  { border-color: var(--err);  background: var(--err-bg); }
.notice.info { border-color: var(--accent); background: var(--info-bg); }
.notice .ico { flex: none; font-size: var(--fs-lg); line-height: 1.2; }

/* ------------------------------------------------------------- Bo cuc app */

.shell { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; }
.sidebar {
  background: var(--bg-soft);
  border-right: 1px solid var(--line);
  padding: var(--s-4) var(--s-3);
  display: flex; flex-direction: column; gap: var(--s-5);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav .section { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; padding: var(--s-3) var(--s-3) 5px; }
.nav a {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 8px var(--s-3);
  border-radius: var(--r-sm);
  color: var(--text-dim); font-size: var(--fs-sm);
}
.nav a:hover { background: var(--panel); color: var(--text); text-decoration: none; }
.nav a.active { background: var(--panel); color: var(--accent); font-weight: 500; }
.nav a .ico { width: 17px; text-align: center; flex: none; }
.nav a .count { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); }

.main { min-width: 0; }
.topbar {
  height: var(--header-h);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--s-4);
  padding: 0 var(--s-5);
  position: sticky; top: 0; background: var(--bg); z-index: 10;
}
.content { padding: var(--s-5); }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); }
.page-head h2 { margin: 0 0 4px; }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
}

/* --------------------------------------------------------------- Trang web */

.site-header {
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid var(--line);
  background: var(--header-bg);
  backdrop-filter: blur(12px);
}
.site-header .container { display: flex; align-items: center; gap: var(--s-5); height: var(--header-h); }
.site-nav { display: flex; gap: var(--s-5); margin-left: var(--s-6); }
.site-nav a { color: var(--text-dim); font-size: var(--fs-sm); }
.site-nav a:hover { color: var(--text); text-decoration: none; }
@media (max-width: 780px) { .site-nav { display: none; } }

.hero { padding: var(--s-9) 0 var(--s-8); text-align: center; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -40% 20% auto; height: 460px;
  background: radial-gradient(ellipse at center, var(--hero-glow), transparent 68%);
  pointer-events: none;
}
.hero h1 { font-size: var(--fs-4xl); max-width: 17ch; margin: 0 auto var(--s-4); }
.hero .lede { font-size: var(--fs-lg); max-width: 56ch; margin: 0 auto var(--s-6); }
@media (max-width: 640px) { .hero h1 { font-size: var(--fs-3xl); } }

.section { padding: var(--s-8) 0; }
.section-head { max-width: 62ch; margin-bottom: var(--s-6); }
.eyebrow {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-2);
}

.feature { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.feature .ico { font-size: var(--fs-xl); margin-bottom: var(--s-3); display: block; }
.feature h4 { margin-bottom: var(--s-2); }
.feature p { margin: 0; font-size: var(--fs-sm); }

.price {
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--panel); padding: var(--s-5);
  display: flex; flex-direction: column;
}
.price.featured { border-color: var(--accent); box-shadow: var(--glow); }
.price .tier { font-size: var(--fs-sm); color: var(--text-dim); }
.price .amount { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.03em; margin: var(--s-2) 0 0; }
.price .per { font-size: var(--fs-sm); color: var(--muted); font-weight: 400; }
.price ul { list-style: none; padding: 0; margin: var(--s-4) 0; font-size: var(--fs-sm); flex: 1; }
.price li { padding: 6px 0 6px 22px; position: relative; color: var(--text-dim); }
.price li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); }
.price li.no { color: var(--muted); }
.price li.no::before { content: "—"; color: var(--muted); }

.site-footer { border-top: 1px solid var(--line); padding: var(--s-6) 0; margin-top: var(--s-8); font-size: var(--fs-sm); }

/* ----------------------------------------------------------- Tien ich khac */

.kbd {
  font-family: var(--mono); font-size: var(--fs-xs);
  padding: 2px 6px; border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: var(--r-sm);
  background: var(--bg-soft);
}
.bar { height: 6px; border-radius: var(--r-full); background: var(--line); overflow: hidden; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--panel-2); border: 1px solid var(--line);
  display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 600;
  flex: none;
}
.sep { height: 1px; background: var(--line); margin: var(--s-5) 0; }
code {
  font-family: var(--mono); font-size: 0.9em;
  background: var(--bg-soft); border: 1px solid var(--line);
  padding: 1px 5px; border-radius: var(--r-sm);
}
pre {
  font-family: var(--mono); font-size: var(--fs-sm);
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--r); padding: var(--s-4);
  overflow-x: auto; margin: 0;
}

/* ==========================================================================
   Nut doi theme
   ========================================================================== */

.theme-toggle {
  display: inline-flex; align-items: center;
  padding: 3px; gap: 2px;
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--panel);
}
.theme-toggle button {
  width: 28px; height: 26px;
  display: grid; place-items: center;
  border: none; border-radius: var(--r-full);
  background: transparent; color: var(--muted);
  cursor: pointer; padding: 0;
}
.theme-toggle button:hover { color: var(--text); }
.theme-toggle button[aria-pressed="true"] { background: var(--panel-2); color: var(--accent); }
.theme-toggle svg { width: 15px; height: 15px; }

/* ==========================================================================
   Section truc quan: vong quy dao van tay
   --------------------------------------------------------------------------
   SVG noi dong + nhan tuyet doi. Khong dung anh: nhan phai doi mau theo theme
   va doc duoc boi trinh doc man hinh.
   ========================================================================== */

.orbit-section { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; }
@media (max-width: 900px) { .orbit-section { grid-template-columns: 1fr; gap: var(--s-6); } }

.orbit { position: relative; aspect-ratio: 1; max-width: 460px; margin: 0 auto; width: 100%; }
.orbit svg { width: 100%; height: 100%; display: block; }
.orbit .ring { fill: none; stroke: var(--orbit-ring); stroke-width: 1; }
.orbit .spoke { stroke: var(--orbit-ring); stroke-width: 1; }
.orbit .node { fill: var(--accent); }
.orbit .node.dim { fill: var(--accent); opacity: 0.45; }

/* Vong xoay cham. Tu dung lai neu nguoi dung tat hieu ung chuyen dong. */
.orbit .rotor { transform-origin: 50% 50%; animation: orbit-spin 46s linear infinite; }
.orbit .rotor.rev { animation-duration: 68s; animation-direction: reverse; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }

.orbit-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 27%; aspect-ratio: 1; border-radius: 50%;
  background: var(--orbit-core);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg), var(--glow);
  display: grid; place-items: center;
}
.orbit-core svg { width: 46%; height: 46%; color: var(--accent); }

/* Nhan noi quanh quy dao */
.orbit-tag {
  position: absolute; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--panel); box-shadow: var(--shadow);
  font-size: var(--fs-xs); font-weight: 500; white-space: nowrap;
}
.orbit-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.orbit-tag.hot { border-color: var(--accent); color: var(--accent); }
.orbit-tag.hot i { box-shadow: 0 0 0 3px var(--info-bg); }

/* Danh sach loi ich ben phai */
.benefit { display: flex; gap: var(--s-4); align-items: flex-start; }
.benefit + .benefit { margin-top: var(--s-5); }
.benefit .ico {
  width: 40px; height: 40px; flex: none;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--info-bg); border: 1px solid var(--line);
  color: var(--accent);
}
.benefit .ico svg { width: 19px; height: 19px; }
.benefit h4 { margin: 0 0 4px; font-size: var(--fs-lg); }
.benefit p { margin: 0; font-size: var(--fs-sm); }

/* ==========================================================================
   Blog
   ========================================================================== */

.post {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--panel); overflow: hidden;
  color: inherit; text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}
.post:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-2px); }
.post .thumb {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--panel-2), var(--bg-soft));
  border-bottom: 1px solid var(--line);
  display: grid; place-items: center;
  font-size: 30px; opacity: 0.85;
}
.post .body { padding: var(--s-4); display: flex; flex-direction: column; flex: 1; }
.post h4 { margin: var(--s-2) 0; font-size: var(--fs-base); line-height: 1.35; }
.post p { font-size: var(--fs-sm); margin: 0 0 var(--s-3); }
.post .meta { margin-top: auto; font-size: var(--fs-xs); color: var(--muted); display: flex; gap: var(--s-3); }

/* ==========================================================================
   Chat dock ben phai
   --------------------------------------------------------------------------
   Danh sach kenh do JS quyet dinh theo vung: Viet Nam thay Zalo, noi khac
   thay Telegram. Xem assets/site.js.
   ========================================================================== */

.dock {
  position: fixed; right: var(--s-4); top: 50%; transform: translateY(-50%);
  z-index: 60;
  display: flex; flex-direction: column; gap: 10px;
}
@media (max-width: 640px) {
  .dock { right: 10px; bottom: 14px; top: auto; transform: none; }
  .dock .dock-btn { width: 42px; height: 42px; }
}

.dock-btn {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  border: none; cursor: pointer; padding: 0;
  color: #fff; box-shadow: var(--shadow-lg);
  transition: transform 0.15s, filter 0.15s;
  position: relative;
}
.dock-btn:hover { transform: scale(1.07); filter: brightness(1.06); text-decoration: none; }
.dock-btn svg { width: 22px; height: 22px; }
.dock-btn .zalo-text { font-weight: 800; font-size: 13px; letter-spacing: -0.03em; }

/* Mau lay theo nhan dien tung nen tang - co y KHONG dua vao token theme,
   vi logo Telegram phai xanh Telegram du web dang o theme nao. */
.dock-btn.zalo     { background: #0068ff; }
.dock-btn.telegram { background: #29a9eb; }
.dock-btn.messenger{ background: #0084ff; }
.dock-btn.mail     { background: #ea4335; }
.dock-btn.chat     { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.dock-btn.top      { background: var(--muted); }

.dock-btn .tip {
  position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 4px 10px; font-size: var(--fs-xs); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.15s;
  box-shadow: var(--shadow);
}
.dock-btn:hover .tip { opacity: 1; }

/* Nut len dau trang chi hien khi da cuon xuong */
.dock-btn.top { opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.15s; }
.dock.scrolled .dock-btn.top { opacity: 1; pointer-events: auto; }

/* ==========================================================================
   Showcase — ba tinh nang chinh, hang xen ke
   --------------------------------------------------------------------------
   Hinh minh hoa dung bang CSS/SVG chu khong dung anh chup: doi mau theo theme,
   khong bi mo tren man hinh HiDPI, va sua noi dung chi la sua HTML.
   ========================================================================== */

.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; }
.showcase + .showcase { margin-top: var(--s-9); }
.showcase.flip .sc-visual { order: 2; }
@media (max-width: 900px) {
  .showcase { grid-template-columns: 1fr; gap: var(--s-5); }
  .showcase.flip .sc-visual { order: 0; }
  .showcase + .showcase { margin-top: var(--s-7); }
}

.sc-text h3 { font-size: var(--fs-xl); margin-bottom: var(--s-3); }
.sc-text > p { font-size: var(--fs-base); }
.sc-points { list-style: none; padding: 0; margin: var(--s-4) 0 0; }
.sc-points li {
  position: relative; padding: 5px 0 5px 26px;
  font-size: var(--fs-sm); color: var(--text-dim);
}
.sc-points li::before {
  content: ""; position: absolute; left: 4px; top: 13px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
}

/* Khung "anh chup man hinh" gia lap */
.mini {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--panel); box-shadow: var(--shadow-lg);
  overflow: hidden; font-size: var(--fs-xs);
}
.mini-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 9px var(--s-3);
  border-bottom: 1px solid var(--line); background: var(--bg-soft);
}
.mini-bar .dots { display: flex; gap: 4px; }
.mini-bar .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); display: block; }
.mini-bar .title { color: var(--muted); font-size: var(--fs-xs); }
.mini-body { padding: var(--s-3); }

.mini-row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 8px 6px; border-radius: var(--r-sm);
}
.mini-row + .mini-row { border-top: 1px solid var(--line-soft); }
.mini-row.sel { background: var(--info-bg); }
.mini-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--bg-soft);
  font-size: var(--fs-xs); white-space: nowrap;
}
.chip i { width: 7px; height: 7px; border-radius: 2px; display: block; flex: none; }
.chip.on { border-color: var(--accent); color: var(--accent); background: var(--info-bg); }

.bulkbar {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  padding: 8px var(--s-3); margin: -1px calc(-1 * var(--s-3)) var(--s-3);
  background: var(--info-bg); border-block: 1px solid var(--accent);
  font-size: var(--fs-xs);
}
.bulkbar .btn { padding: 3px 9px; font-size: var(--fs-xs); }

/* Do tai nguyen */
.meter + .meter { margin-top: var(--s-3); }
.meter .lbl { display: flex; justify-content: space-between; font-size: var(--fs-xs); margin-bottom: 5px; }
.meter .track { height: 8px; border-radius: var(--r-full); background: var(--line); overflow: hidden; }
.meter .track > i { display: block; height: 100%; border-radius: var(--r-full); }
.meter .track > i.good { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.meter .track > i.bad  { background: var(--warn); opacity: 0.75; }

/* Luoi cua so xep gach */
.tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.tiles i {
  display: block; aspect-ratio: 4 / 3; border-radius: 3px;
  background: var(--bg-soft); border: 1px solid var(--line);
}
.tiles i.live { border-color: var(--accent); background: var(--info-bg); }

/* Thanh vien trong nhom */
.member { display: flex; align-items: center; gap: var(--s-3); padding: 7px 6px; }
.member + .member { border-top: 1px solid var(--line-soft); }
.member .who { flex: 1; min-width: 0; }
.member .who b { display: block; font-weight: 500; font-size: var(--fs-xs); }
.member .who span { color: var(--muted); font-size: 11px; }

/* ==========================================================================
   Nen tang & gia lap thiet bi
   ========================================================================== */

/* --- The nen tang chay app --- */
.plat {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--panel);
}
.plat.on { border-color: var(--accent); box-shadow: var(--glow); }
.plat .logo { width: 34px; height: 34px; flex: none; color: var(--text); }
.plat.on .logo { color: var(--accent); }
.plat .info { flex: 1; min-width: 0; }
.plat .info b { display: block; font-size: var(--fs-base); font-weight: 600; }
.plat .info span { font-size: var(--fs-xs); color: var(--muted); }

/* --- Bo chon he dieu hanh cua profile, dang giong trong app --- */
.os-picker { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.os-chip {
  display: inline-flex; align-items: stretch;
  border: 1.5px solid var(--line); border-radius: var(--r);
  background: var(--panel); overflow: hidden;
  transition: border-color 0.15s, background 0.15s;
}
.os-chip .main {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
}
.os-chip .box {
  width: 17px; height: 17px; flex: none;
  border: 1.5px solid var(--muted); border-radius: 4px;
  display: grid; place-items: center; color: transparent;
}
.os-chip .box svg { width: 11px; height: 11px; }
.os-chip .logo { width: 21px; height: 21px; color: var(--text-dim); flex: none; }
.os-chip .caret {
  display: grid; place-items: center;
  padding: 0 9px; border-left: 1px solid var(--line);
  color: var(--muted);
}
.os-chip .caret svg { width: 13px; height: 13px; }

.os-chip.on { border-color: var(--accent); background: var(--info-bg); }
.os-chip.on .box { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.os-chip.on .logo { color: var(--accent); }
.os-chip.on .caret { border-left-color: color-mix(in srgb, var(--accent) 35%, transparent); }

.os-chip.soon { opacity: 0.55; }
.os-chip.soon .main { padding-right: 10px; }

/* ==========================================================================
   Trang dang nhap / dang ky
   --------------------------------------------------------------------------
   Chia doi: form ben trai, ly do nen dang ky ben phai. Cot phai bien mat tren
   man hinh hep - luc do form la thu duy nhat con y nghia.
   ========================================================================== */

.auth { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; } .auth-aside { display: none; } }

.auth-form {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--s-7) var(--s-6);
}
.auth-form .inner { width: 100%; max-width: 380px; margin: 0 auto; }

.auth-aside {
  background: var(--bg-soft);
  border-left: 1px solid var(--line);
  padding: var(--s-7) var(--s-6);
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
.auth-aside::before {
  content: ""; position: absolute; inset: -30% -20% auto;
  height: 420px;
  background: radial-gradient(ellipse at center, var(--hero-glow), transparent 70%);
  pointer-events: none;
}
.auth-aside > * { position: relative; }

.oauth { display: flex; flex-direction: column; gap: var(--s-2); }
.divider {
  display: flex; align-items: center; gap: var(--s-3);
  color: var(--muted); font-size: var(--fs-xs);
  margin: var(--s-4) 0;
}
.divider::before, .divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

.checkline { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--fs-xs); color: var(--text-dim); }
.checkline input { width: auto; margin-top: 3px; flex: none; }

/* ==========================================================================
   Bang gia day du
   ========================================================================== */

.pricing-table th:first-child { text-align: left; }
.pricing-table th, .pricing-table td { text-align: center; }
.pricing-table td:first-child { text-align: left; font-weight: 500; }
.pricing-table .yes { color: var(--ok); font-weight: 600; }
.pricing-table .no  { color: var(--muted); }
.pricing-table tr.group td {
  background: var(--bg-soft); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
  font-weight: 500;
}
.pricing-table th.hot { color: var(--accent); }

.toggle-period {
  display: inline-flex; padding: 3px; gap: 2px;
  border: 1px solid var(--line); border-radius: var(--r-full); background: var(--panel);
}
.toggle-period button {
  padding: 5px 14px; border: none; border-radius: var(--r-full);
  background: transparent; color: var(--text-dim);
  font: inherit; font-size: var(--fs-sm); cursor: pointer;
}
.toggle-period button[aria-pressed="true"] { background: var(--panel-2); color: var(--accent); font-weight: 500; }

/* ==========================================================================
   Bang admin: hang co the mo rong, o loc
   ========================================================================== */

.filters { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-bottom: var(--s-4); }
.filters input[type="search"] { max-width: 260px; }
.filters select { width: auto; }

.money { font-variant-numeric: tabular-nums; font-family: var(--mono); }
.check-cell { width: 34px; }
.check-cell input { width: auto; }

.pager { display: flex; gap: var(--s-2); align-items: center; justify-content: flex-end; padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); font-size: var(--fs-sm); }

/* Logo that la anh trong suot: bo nen gradient va can chinh chu cua the
   <span> cu, neu khong nen se hien qua nhung cho trong cua logo. */
img.brand-mark {
  background: none;
  border-radius: 0;
  object-fit: contain;
}

/* Blazor đặt tiêu điểm vào <h1> sau mỗi lần điều hướng để trình đọc màn hình
   đọc lại tiêu đề trang — `FocusOnNavigate` trong Routes.razor. Nó gắn
   tabindex="-1" vào tiêu đề rồi gọi focus().

   Bấm F5 là một thao tác BÀN PHÍM, nên Chrome coi cú focus tiếp theo là do bàn
   phím và vẽ khung focus quanh tiêu đề: một hình chữ nhật đen bao cả khối chữ,
   ở lại cho tới khi khách chạm chuột. Nhìn như trang bị lỗi.

   Chỉ tắt cho phần tử `tabindex="-1"`, tức là những chỗ chỉ nhận tiêu điểm
   bằng mã và không bấm được. Nút và liên kết thật vẫn giữ nguyên khung focus,
   vì người dùng bàn phím cần thấy mình đang đứng ở đâu.

   Trang công khai đã sửa đúng lỗi này; trang quản trị dùng cùng `FocusOnNavigate`
   nên thừa hưởng cùng triệu chứng. Xem `Sigologin.Web/wwwroot/app.css`. */
[tabindex="-1"]:focus { outline: none; }

/* Chon loai chuong trinh khuyen mai.
   Hai o tron nam canh nhau, moi o co mot dong giai thich ngan ngay duoi ten.
   Khong co dong do thi "Ma giam gia" va "Chien dich tu dong" nghe na na nhau,
   ma hai cai lai hanh xu khac han. */
.chon-loai { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.chon-loai label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1 1 260px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: pointer;
}
.chon-loai label:has(input:checked) {
  border-color: var(--accent);
  background: var(--info-bg);
}
.chon-loai input { width: auto; margin-top: 2px; flex: none; }
.chon-loai span { display: block; }
.chon-loai small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-xs); }