/* =========================================================================
   JK UI — App shell + component library
   ========================================================================= */

/* ------------------------------- Reset --------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font-family: var(--font-body);
  font-size: var(--fs-14);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
h1,h2,h3,h4,h5 { margin: 0; font-weight: 700; line-height: 1.3; }
p { margin: 0 0 .75em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-4) 0; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-pill); border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--tx-3); background-clip: content-box; }

:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--r-xs); }

.jk-display { font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; }
.jk-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ------------------------------- Shell --------------------------------- */
.jk-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}
.jk-main { min-width: 0; display: flex; flex-direction: column; }
.jk-content {
  flex: 1;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-6) var(--sp-12);
}
@media (max-width: 1280px) { .jk-content { padding: var(--sp-5) var(--sp-4) var(--sp-10); } }

/* ------------------------------ Sidebar -------------------------------- */
.jk-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-3);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--line-soft);
  z-index: var(--z-drawer);
}
.jk-brand {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3) var(--sp-5);
  min-width: 0;
}
.jk-brand > span { min-width: 0; }
.jk-brand__mark {
  width: 44px; height: 44px; flex: none;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  display: grid; place-items: center;
  overflow: hidden;
}
.jk-brand__mark img { width: 30px; height: 30px; object-fit: contain; }
.jk-brand__name { display: block; font-family: var(--font-display); font-size: var(--fs-16); font-weight: 800; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jk-brand__sub { display: block; font-size: var(--fs-11); color: var(--tx-3); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.jk-nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; padding-right: 2px; }
.jk-nav__item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px var(--sp-3);
  border-radius: var(--r-pill);
  color: var(--tx-2);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.jk-nav__item:hover { background: var(--bg-hover); color: var(--tx); }
.jk-nav__item.is-active { background: var(--accent-soft); color: var(--accent-soft-tx); font-weight: 700; }
.jk-nav__item .jk-i { flex: none; width: 20px; height: 20px; }
.jk-nav__label { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.jk-nav__en { font-size: var(--fs-14); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jk-nav__jp { font-size: var(--fs-11); color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jk-nav__item.is-active .jk-nav__jp { color: currentColor; opacity: .72; }

.jk-usercard {
  margin-top: auto;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-1);
}
.jk-usercard__av { width: 36px; height: 36px; border-radius: var(--r-pill); background: var(--accent-soft); display:grid; place-items:center; flex:none; color: var(--accent-soft-tx); font-weight: 700; font-size: var(--fs-13); }
.jk-usercard__meta { min-width: 0; flex: 1; overflow: hidden; }
.jk-usercard__name { font-size: var(--fs-13); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jk-usercard__plan { display: block; font-size: var(--fs-11); color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Drawer (mobile) */
.jk-scrim {
  position: fixed; inset: 0; background: var(--scrim);
  opacity: 0; pointer-events: none; transition: opacity var(--t-base) var(--ease);
  z-index: calc(var(--z-drawer) - 1);
}
body.jk-drawer-open .jk-scrim { opacity: 1; pointer-events: auto; }

@media (max-width: 1023px) {
  .jk-shell { grid-template-columns: minmax(0, 1fr); }
  .jk-sidebar {
    position: fixed; inset: 0 auto 0 0;
    width: 292px;
    transform: translateX(-100%);
    transition: transform var(--t-base) var(--ease);
    box-shadow: var(--shadow-3);
  }
  body.jk-drawer-open .jk-sidebar { transform: none; }
  .jk-content { padding-bottom: var(--sp-6); }
}

/* ------------------------------ Topbar --------------------------------- */
.jk-topbar {
  position: sticky; top: 0; z-index: var(--z-topbar);
  display: flex; align-items: center; gap: var(--sp-3);
  height: var(--topbar-h);
  padding: 0 var(--sp-6);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
@media (max-width: 1280px) { .jk-topbar { padding: 0 var(--sp-4); } }
.jk-topbar__greet { min-width: 0; margin-right: auto; }
.jk-topbar__greet h1 { font-family: var(--font-display); font-size: var(--fs-20); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jk-topbar__greet p { margin: 0; font-size: var(--fs-12); color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* [FIX 2026-08-25] Duoi 1024px thanh tren chat, ca tieu de lan phu de bi ellipsis
   cat cut ("Good morning, Tai kh…"). An dong phu (chi trang tri) de tieu de du cho. */
@media (max-width: 1024px) { .jk-topbar__greet p { display: none; } }
/* [FIX 2026-08-25] Ten nguoi dung trong loi chao: chi hien tu 1440px tro len.
   Do thuc te: chuoi "Good afternoon, Tai khoan test!" can 318px, nhung cho trong
   thanh tren chi co 260px o 1280 · 292px o 1366 · 305px o 1400 — mai den 1440
   moi vua, va vua khit khong con du.
   Vi ca loi chao (thay doi theo gio) lan ten (do dai tuy nguoi) deu khong doan
   truoc duoc, khong the chinh mot diem cat vua khit. An ten o man hep la cach
   chac chan: con lai "Good afternoon!" luon tron ven. */
@media (max-width: 1439px) { .jk-greet-name { display: none; } }
/* [FIX 2026-08-25] Do o 1024px: H1 "検索" can 44px nhung chi duoc 33px -> bi cat.
   Nguyen nhan: .jk-search co flex-basis 380px con .jk-topbar__greet co min-width:0
   nen tieu de bi ep het cho truoc. Cho tieu de mot muc san, o tim kiem co lai. */
@media (max-width: 767px)  { .jk-topbar__greet h1 { font-size: var(--fs-16); } }

/* [FIX 2026-08-25] Them flex:none — o 390px nut bi container flex bop con 23px,
   duoi nguong vung bam 24px. */
.jk-burger { display: none; flex: none; width: 40px; height: 40px; border-radius: var(--r-pill); align-items:center; justify-content:center; }
.jk-burger:hover { background: var(--bg-hover); }
@media (max-width: 1023px) { .jk-burger { display: inline-flex; } }

.jk-search {
  position: relative; flex: 0 1 380px; display: flex; align-items: center;
}
.jk-search input {
  width: 100%;
  padding: 10px var(--sp-4) 10px 40px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--bg-card);
  font-size: var(--fs-13);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.jk-search input::placeholder { color: var(--tx-3); }
.jk-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.jk-search .jk-i { position: absolute; left: 14px; width: 16px; height: 16px; color: var(--tx-3); pointer-events: none; }
/* [FIX 2026-08-25] Uu tien cho TIEU DE trang, khong phai o tim kiem. O 1024 thanh
   tren chi co 724px dung duoc; o tim kiem co flex-basis 380px nen tieu de bi ep
   xuong 150px va cat cut.
   PHAI dat SAU khoi .jk-search o tren: media query KHONG lam tang do uu tien, nen
   neu de truoc thi chinh luat goc (cung do uu tien, nam sau) se de len. */
@media (max-width: 1200px) {
  .jk-search { flex: 0 1 170px; }
  .jk-topbar__greet { flex: 1 1 auto; min-width: 0; }
}
@media (max-width: 767px) { .jk-search { display: none; } }

.jk-iconbtn {
  position: relative;
  width: 40px; height: 40px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  color: var(--tx-2);
  transition: background var(--t-fast), color var(--t-fast);
}
.jk-iconbtn:hover { background: var(--bg-hover); color: var(--tx); }
.jk-iconbtn__badge {
  position: absolute; top: 4px; right: 4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--accent-coral); color: #2A2420;
  font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
}

/* Dropdown */
.jk-drop { position: relative; }
.jk-drop__panel {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 224px; padding: var(--sp-2);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  display: none;
}
.jk-drop.is-open .jk-drop__panel { display: block; }
.jk-drop__item {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 8px 10px; border-radius: var(--r-sm);
  font-size: var(--fs-13); color: var(--tx-2);
}
.jk-drop__item:hover { background: var(--bg-hover); color: var(--tx); }
.jk-drop__label { padding: 6px 10px; font-size: var(--fs-11); color: var(--tx-3); text-transform: uppercase; letter-spacing: .08em; }

.jk-avatarchip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 4px 10px 4px 4px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--bg-card);
}
.jk-avatarchip:hover { background: var(--bg-hover); }
.jk-avatarchip__av { width: 30px; height: 30px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-soft-tx); display: grid; place-items: center; font-weight: 800; font-size: var(--fs-12); }
/* [2026-08-25] Mat cuoi thay chu cai dau — giu nguyen kich thuoc o 30x30. */
.jk-avatarchip__av .jk-i { width: 19px; height: 19px; }
.jk-avatarchip__meta { line-height: 1.15; text-align: left; }
.jk-avatarchip__meta { max-width: 190px; }
.jk-avatarchip__name { display: block; font-size: var(--fs-12); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jk-avatarchip__plan { display: block; font-size: 10px; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* [FIX 2026-08-25] Nang nguong tu 767 len 1200. Do o 1024: thanh tren chi rong
   756px (sidebar 268px van chiem cho), trong do chip tai khoan ngon 229px — lon
   nhat va it thong tin nhat, khien tieu de trang bi ep xuong 150px va cat cut.
   An phan chu cua chip: ten tai khoan van hien o the nguoi dung cuoi sidebar va
   trong menu xo xuong, nen khong mat thong tin. */
@media (max-width: 1200px) { .jk-avatarchip__meta { display: none; } }

/* ---------------------------- Bottom nav ------------------------------- */
.jk-bottomnav { display: none; }
@media (max-width: 1023px) {
  .jk-bottomnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-topbar);
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: color-mix(in srgb, var(--bg-sidebar) 94%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line-soft);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .jk-bottomnav__item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 2px; border-radius: var(--r-sm);
    font-size: 10px; color: var(--tx-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  .jk-bottomnav__item.is-active { color: var(--accent-soft-tx); background: var(--accent-soft); }
}

/* ------------------------------ Bento ---------------------------------- */
.jk-bento { display: grid; gap: var(--sp-5); grid-template-columns: repeat(12, minmax(0,1fr)); }
.jk-col-3 { grid-column: span 3; } .jk-col-4 { grid-column: span 4; }
.jk-col-5 { grid-column: span 5; } .jk-col-6 { grid-column: span 6; }
.jk-col-7 { grid-column: span 7; } .jk-col-8 { grid-column: span 8; }
.jk-col-9 { grid-column: span 9; } .jk-col-12 { grid-column: span 12; }
@media (max-width: 1279px) {
  .jk-col-3, .jk-col-4, .jk-col-5 { grid-column: span 6; }
  .jk-col-7, .jk-col-8, .jk-col-9 { grid-column: span 12; }
}
@media (max-width: 767px) { .jk-bento > * { grid-column: span 12 !important; } }

/* ------------------------------- Card ---------------------------------- */
.jk-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: var(--sp-5);
}
.jk-card--flush { padding: 0; overflow: hidden; }
.jk-card--inset { background: var(--bg-inset); }
.jk-card__head {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.jk-card__title { font-family: var(--font-display); font-size: var(--fs-18); }
.jk-card__sub { font-size: var(--fs-11); color: var(--tx-3); }
/* [FIX 2026-08-25] Cao 21px, duoi nguong vung bam 24px cua WCAG 2.2. Them
   min-height va padding doc — khong doi dang nhin thay vi chu van can giua. */
.jk-card__action { margin-left: auto; font-size: var(--fs-12); color: var(--accent-soft-tx); white-space: nowrap; display:inline-flex; align-items:center; gap:4px; min-height: 24px; padding: 2px 0; }
.jk-card__action:hover { text-decoration: underline; }

.jk-section { margin-bottom: var(--sp-8); }
.jk-section__head { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.jk-section__title { font-family: var(--font-display); font-size: var(--fs-24); }
.jk-section__sub { font-size: var(--fs-12); color: var(--tx-3); }

/* ------------------------------ Buttons -------------------------------- */
.jk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 10px var(--sp-5);
  border-radius: var(--r-pill);
  font-size: var(--fs-13); font-weight: 700;
  border: 1px solid transparent;
  transition: background var(--t-fast) var(--ease), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  white-space: nowrap;
}
.jk-btn:active { transform: translateY(1px); }
.jk-btn--primary { background: var(--accent); color: var(--accent-tx); }
.jk-btn--primary:hover { background: color-mix(in srgb, var(--accent) 84%, #000); }
.jk-btn--secondary { background: var(--accent-soft); color: var(--accent-soft-tx); }
.jk-btn--secondary:hover { background: color-mix(in srgb, var(--accent-soft) 78%, var(--brand-300)); }
.jk-btn--ghost { background: transparent; border-color: var(--line); color: var(--tx); }
.jk-btn--ghost:hover { background: var(--bg-hover); }
/* Nut phu tren nen sang: ghost cho ra chu den tuyen tren nen kem — doc kho.
   Ban "soft" dung mau thuong hieu nen ro rang o ca 3 theme. */
.jk-btn--soft {
  background: var(--accent-soft); color: var(--accent-soft-tx);
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
}
.jk-btn--soft:hover {
  background: color-mix(in srgb, var(--accent-soft) 84%, var(--accent));
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
}
.jk-btn--danger { background: var(--danger); color: #fff; }
.jk-btn--sm { padding: 6px var(--sp-3); font-size: var(--fs-12); }
.jk-btn--lg { padding: 13px var(--sp-6); font-size: var(--fs-15); }
.jk-btn--block { width: 100%; }
.jk-btn[disabled], .jk-btn.is-disabled { opacity: .5; pointer-events: none; }
/* Icon trong nut: khoa kich thuoc + canh giua theo truc doc, khong troi theo
   line-height cua chu (nguyen nhan icon/chu lech nhau giua cac ngon ngu). */
.jk-btn > .jk-i { flex: 0 0 auto; width: 15px; height: 15px; }
.jk-btn > span { display: inline-block; line-height: 1.25; }
.jk-btn--sm > .jk-i { width: 14px; height: 14px; }

/* Hang nut duoi ten kenh — cao bang nhau du nhan dai ngan khac nhau */
.jk-chan-actions { align-items: stretch; }
.jk-chan-actions .jk-btn { min-height: 34px; }

/* ------------------------------- Tabs ---------------------------------- */
.jk-tabs {
  display: flex; gap: var(--sp-2);
  overflow-x: auto; scrollbar-width: none;
  padding-bottom: 2px;
  /* Khong co min-width:0 thi hop cha (flex/grid) gian theo noi dung
     => tren mobile hang tab day trang rong ra thay vi tu cuon. */
  min-width: 0; max-width: 100%;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.jk-tabs::-webkit-scrollbar { display: none; }
.jk-tab {
  flex: 0 0 auto;
  padding: 7px var(--sp-4);
  border-radius: var(--r-pill);
  font-size: var(--fs-13); color: var(--tx-2);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.jk-tab:hover { background: var(--bg-hover); color: var(--tx); }
.jk-tab.is-active { background: var(--accent); color: var(--accent-tx); font-weight: 700; }

/* ------------------------------- Chips --------------------------------- */
.jk-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: var(--fs-11); font-weight: 700;
  background: var(--accent-soft); color: var(--accent-soft-tx);
}
.jk-chip--live { background: var(--accent-coral); color: #2A2420; }
.jk-chip--new { background: var(--accent-peach); color: #5A3F1E; }
.jk-chip--premium { background: var(--accent-orange); color: #4A2E10; }
.jk-chip--info { background: var(--accent-blue); color: #143049; }
.jk-chip--genre { background: var(--accent-lavender); color: #2E2350; }
.jk-chip--muted { background: var(--bg-inset); color: var(--tx-2); }
.jk-chip__dot { width: 6px; height: 6px; border-radius: var(--r-pill); background: currentColor; animation: jk-pulse 1.6s var(--ease) infinite; }
@keyframes jk-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ------------------------------- Forms --------------------------------- */
.jk-field { margin-bottom: var(--sp-4); }
.jk-label { display: block; margin-bottom: 6px; font-size: var(--fs-12); font-weight: 700; color: var(--tx-2); }
.jk-input, .jk-select, .jk-textarea {
  width: 100%;
  padding: 11px var(--sp-4);
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--bg-card-2);
  font-size: var(--fs-14);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.jk-input:focus, .jk-select:focus, .jk-textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring);
}
.jk-input.is-error, .jk-select.is-error { border-color: var(--danger); }
.jk-input.success { border-color: var(--ok); }
.jk-textarea { min-height: 110px; resize: vertical; }
.jk-select { appearance: none; padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.jk-help { font-size: var(--fs-12); color: var(--tx-3); margin-top: 5px; }
.jk-error { font-size: var(--fs-12); color: var(--danger); margin-top: 5px; display: block; }
.jk-check { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-13); color: var(--tx-2); cursor: pointer; }
.jk-check input { width: 16px; height: 16px; accent-color: var(--accent); }
/* WCAG 2.2 (2.5.8) yeu cau vung bam toi thieu 24x24. O tick ve 16px cho gon,
   nen noi rong vung bam bang pseudo-element thay vi phong to o tick. */
.jk-check input { position: relative; }
.jk-check input::after { content: ''; position: absolute; left: 50%; top: 50%;
    width: 24px; height: 24px; transform: translate(-50%, -50%); }

/* ------------------------------ Player --------------------------------- */
.jk-player {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #0C1A1B;
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-2);
  aspect-ratio: 16 / 9;
}
.jk-player > .video-js, .jk-player > video { width: 100%; height: 100%; }
.jk-player__badge { position: absolute; top: var(--sp-4); left: var(--sp-4); z-index: 3; }
.jk-player__lock {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(12,26,27,.55), rgba(12,26,27,.88));
  padding: var(--sp-6); text-align: center; color: #F5F0E6;
}
.jk-player__lock h3 { font-family: var(--font-display); font-size: var(--fs-24); margin-bottom: var(--sp-2); }
.jk-player__lock p { color: #CFE3C6; max-width: 420px; margin: 0 auto var(--sp-5); }
.jk-player__poster { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(2px) brightness(.5); }

.jk-servers { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }

/* --------------------------- Media cards -------------------------------- */
.jk-rail { position: relative; }
.jk-rail__track {
  display: flex; gap: var(--sp-4);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: var(--sp-2);
  scroll-behavior: smooth;
}
.jk-rail__track::-webkit-scrollbar { display: none; }
.jk-rail__track > * { scroll-snap-align: start; flex: 0 0 auto; }
.jk-rail__nav {
  position: absolute; top: 38%; z-index: 2;
  width: 36px; height: 36px; border-radius: var(--r-pill);
  background: var(--bg-card); border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  display: grid; place-items: center;
  transition: opacity var(--t-fast);
}
.jk-rail__nav--prev { left: -12px; }
.jk-rail__nav--next { right: -12px; }
.jk-rail__nav[hidden] { display: none; }
@media (max-width: 767px) { .jk-rail__nav { display: none; } }

.jk-grid { display: grid; gap: var(--sp-4); }
.jk-grid--poster { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
.jk-grid--chan { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
@media (max-width: 480px) {
  .jk-grid--poster { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
  .jk-grid--chan { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}

.jk-poster {
  display: block; width: 100%;
  border-radius: var(--r-md);
  transition: transform var(--t-base) var(--ease);
}
.jk-poster:hover { transform: translateY(-4px); }
/* [FIX 2026-08-25] Markup dung <span> cho .jk-poster__media, ma <span> mac dinh
   la inline. Phan tu inline BO QUA aspect-ratio, va position:relative tren no
   khong tao duoc khung chua tu te cho lop phu tuyet doi ben trong.
   Hau qua: khung anh cao 376px thay vi 237px (2/3 cua 158), nut play rong 0px
   nen icon dat sang trai, va ten phim bi day ra khoi luong -> khong nhin thay.
   Chi can cho no thanh block la ca ba loi het. */
.jk-poster__media {
  display: block;
  position: relative; aspect-ratio: 2 / 3;
  border-radius: var(--r-md); overflow: hidden;
  background: var(--bg-inset);
  border: 1px solid var(--line-soft);
}
.jk-poster__media img { width: 100%; height: 100%; object-fit: cover; }
.jk-poster__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(12,26,27,0) 40%, rgba(12,26,27,.62));
  opacity: 0; transition: opacity var(--t-base) var(--ease);
}
.jk-poster:hover .jk-poster__play { opacity: 1; }
.jk-poster__play span {
  width: 44px; height: 44px; border-radius: var(--r-pill);
  background: rgba(253,246,233,.92); color: #1B2F2F;
  display: grid; place-items: center;
}
.jk-poster__title { display: block; margin-top: 8px; font-size: var(--fs-13); font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jk-poster__meta { display: block; font-size: var(--fs-11); color: var(--tx-3); }

.jk-poster--wide .jk-poster__media { aspect-ratio: 16 / 9; }
.jk-poster--rail { width: 174px; }
.jk-poster--rail.jk-poster--wide { width: 264px; }

/* Tile kenh — logo tran vien, khong nhay khi bam.
   Kho anh kenh tron 2 ti le: 800x400 (2:1) va 320x320 (1:1) tren cung mot o.
   => lop nen la chinh anh do, phong to + lam mo, bi bo goc cat (hieu ung tran);
      logo net nam tren, `contain` nen khong bao gio bi cat mat chu. */
.jk-chan { display: block; text-align: center; }

.jk-chan__media {
  /* Kho anh kenh that su la 800x400 (2:1) — khung 16/9 cu lam anh thap hon o
     chua => con vien tren/duoi, khong tran duoc. Khop dung ti le nguon. */
  position: relative; aspect-ratio: 2 / 1;
  border-radius: var(--r-md); overflow: hidden;
  background: var(--bg-card-2); border: 1px solid var(--line-soft);
  display: grid; place-items: center; padding: 0;
  isolation: isolate;
}

/* Nen tran: to hon khung, bi border-radius cat => vien bo cong "day" mau */
.jk-chan__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.35);
  filter: blur(14px) saturate(1.3);
  opacity: .92;
}

/* Logo net — chieu cao LUON bang chieu cao o (khong con vien den/trang) */
/* Dat tuyet doi thay vi height:100%: o cha dung `aspect-ratio` nen chieu cao
   phan tram cua con khong xac dinh -> anh roi ve kich thuoc goc (320px) va
   cao gap doi o. inset:0 luon khop dung khung. */
.jk-chan__media img.jk-chan__fg {
  position: absolute; inset: 0; z-index: 1;
  display: block;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  border-radius: inherit;
}

/* Anh le ti le (JK.fitOddLogos danh dau): khong cat chu, de nen blur lap day */
.jk-chan__media img.jk-chan__fg.is-contain {
  /* width/height:auto se lam anh tuyet doi tro ve kich thuoc goc — phai giu
     100% va chi doi object-fit. */
  object-fit: contain;
  inset: 4px;
  width: calc(100% - 8px); height: calc(100% - 8px);
}

.jk-chan__play {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  background: rgba(12,26,27,.42); opacity: 0; transition: opacity var(--t-fast);
  color: #FDF6E9;
}
.jk-chan:hover .jk-chan__play,
.jk-chan:focus-visible .jk-chan__play { opacity: 1; }

/* <span> mac dinh la inline => overflow:hidden khong cat, ten kenh dai lam
   tran ca trang tren mobile. Phai la block thi ellipsis moi an. */
.jk-chan__name {
  display: block; max-width: 100%;
  margin-top: 7px; font-size: var(--fs-12); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jk-chan--rail { width: 164px; flex: 0 0 auto; }

/* Tile chi co logo (home rail + luoi Live TV): bo vien ngoai cho lien mach */
/* Bien the chi-logo: bo han vien 1px (border-color:transparent van chiem cho,
   khien anh nho hon o dung 2px va khong cham duoc mep bo cong). */
.jk-chan--logo .jk-chan__media { border: 0; box-shadow: var(--shadow-1); }

/* Channel list row */
.jk-chrow {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 9px var(--sp-3);
  border-radius: var(--r-sm);
  transition: background var(--t-fast);
}
.jk-chrow:hover { background: var(--bg-hover); }
.jk-chrow.is-active { background: var(--accent-soft); }
/* Tren nen accent-soft, --tx-3 chi con 4.0:1 — dung tong dam hon cua chinh accent. */
.jk-chrow.is-active .jk-chrow__no,
.jk-chrow.is-active .jk-chrow__sub { color: var(--accent-soft-tx); opacity: .78; }
.jk-chrow.is-active .jk-chrow__name { color: var(--accent-soft-tx); }
.jk-chrow__no { width: 20px; font-size: var(--fs-11); color: var(--tx-3); text-align: right; flex: none; }
.jk-chrow__logo {
  width: 52px; aspect-ratio: 2 / 1; flex: none;
  border-radius: var(--r-xs); background: var(--bg-card-2);
  overflow: hidden; padding: 0; display: block;
}
/* Anh phai cao bang chinh span bao ngoai — truoc day contain + padding lam
   anh thap hon o nen lo ra vien nen phia tren/duoi. */
.jk-chrow__logo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  border-radius: inherit;
}
/* [FIX 2026-08-25] Logo nguon khong phai 2:1 (vd vuong 1:1) duoc JK.fitOddLogos
   danh dau .is-contain: doi sang contain de khong cat mat logo; nen thẻ lo ra
   hai ben la chu y, hon la cat cut logo. */
.jk-chrow__logo img.is-contain {
  object-fit: contain;
  padding: 2px;
}

.jk-chrow__meta { min-width: 0; flex: 1; }
.jk-chrow__name { display: block; font-size: var(--fs-13); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jk-chrow__sub { display: block; font-size: var(--fs-11); color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --------------------------- Quick access ------------------------------ */
/* [FIX 2026-08-25] Truoc moi o cao 160px ma chi chua icon 38px (~24%) — rat thua,
   khien Quick Access chiem ~290px va day DAI KENH xuong duoi man hinh dau o MOI kich
   thuoc. Xep icon va chu nam ngang, o con ~64px. */
.jk-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.jk-quick__item {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  align-items: center; column-gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--bg-card-2);
  border: 1px solid var(--line-soft);
  text-align: left;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast);
}
.jk-quick__item:hover { transform: translateY(-2px); background: var(--bg-hover); }
.jk-quick__item.is-active { background: var(--accent-soft); border-color: var(--accent); }
.jk-quick__item.is-active .jk-quick__ico { background: var(--accent); color: var(--accent-tx); }
.jk-quick__ico { grid-row: 1 / 3; grid-column: 1; flex: none; width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-soft-tx); display: grid; place-items: center; }
.jk-quick__en { grid-column: 2; align-self: end;   font-size: var(--fs-12); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jk-quick__jp { grid-column: 2; align-self: start; font-size: var(--fs-11); color: var(--tx-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* [FIX 2026-08-25] Nguong cu 380px qua thap: o 390px van la 4 cot, moi cot ~72px
   nen cot chu (1fr) bi bop ve 0 va nhan bien mat, chi con tro icon. Nang len 560px
   va cho o xep doc lai o man hinh rat hep de nhan luon co cho. */
@media (max-width: 560px) {
  .jk-quick { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 360px) {
  .jk-quick__item { grid-template-columns: 1fr; justify-items: center; row-gap: 4px; text-align: center; }
  .jk-quick__ico { grid-row: 1; grid-column: 1; }
  .jk-quick__en, .jk-quick__jp { grid-column: 1; align-self: auto; }
}

/* ------------------------------ Tables --------------------------------- */
.jk-tablewrap { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--line-soft); }
.jk-table { min-width: 620px; font-size: var(--fs-13); }
.jk-table th, .jk-table td { padding: 12px var(--sp-4); text-align: left; }
.jk-table thead th { background: var(--bg-inset); font-size: var(--fs-11); text-transform: uppercase; letter-spacing: .06em; color: var(--tx-3); font-weight: 700; white-space: nowrap; }
.jk-table tbody tr + tr td { border-top: 1px solid var(--line-soft); }
.jk-table tbody tr:hover td { background: var(--bg-hover); }

/* ------------------------------ States --------------------------------- */
.jk-empty { text-align: center; padding: var(--sp-10) var(--sp-4); color: var(--tx-3); }
.jk-empty__ico { width: 64px; height: 64px; margin: 0 auto var(--sp-4); opacity: .5; }
.jk-empty h4 { font-family: var(--font-display); font-size: var(--fs-18); color: var(--tx-2); margin-bottom: 6px; }
.jk-skeleton { background: var(--skeleton); background-size: 400% 100%; animation: jk-shimmer 1.3s ease-in-out infinite; border-radius: var(--r-sm); }
@keyframes jk-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ------------------------------ Modal ---------------------------------- */
.jk-modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: none; place-items: center; padding: var(--sp-5);
  background: var(--scrim);
}
.jk-modal.is-open { display: grid; }
.jk-modal__box {
  width: min(460px, 100%);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  padding: var(--sp-6);
  text-align: center;
}
.jk-modal__box h3 { font-family: var(--font-display); font-size: var(--fs-20); margin-bottom: var(--sp-2); }

/* ---------------------------- Pagination -------------------------------- */
.jk-pager, .pagination {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin: var(--sp-6) 0 0; padding: 0; list-style: none;
}
.jk-pager li a, .jk-pager li span,
.pagination li a, .pagination li span {
  display: grid; place-items: center;
  min-width: 36px; height: 36px; padding: 0 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--bg-card);
  font-size: var(--fs-13);
}
.jk-pager li.active span, .pagination li.active span { background: var(--accent); color: var(--accent-tx); border-color: var(--accent); font-weight: 700; }
.jk-pager li.disabled span, .pagination li.disabled span { opacity: .45; }
.jk-pager li a:hover, .pagination li a:hover { background: var(--bg-hover); }

/* ------------------------------ Footer --------------------------------- */
.jk-footer {
  border-top: 1px solid var(--line-soft);
  background: var(--bg-sidebar);
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  margin-top: auto;
}
.jk-footer__inner { max-width: var(--content-max); margin: 0 auto; display: grid; gap: var(--sp-6); grid-template-columns: 1.4fr 1fr 1fr; }
.jk-footer__logo { display: inline-block; margin-bottom: var(--sp-3); }
/* [2026-08-25] Tren PC cho logo chan trang bang logo dau trang (176px).
   Truoc dung bien the --sm 148px nen nhin lech nhau giua hai dau trang.
   Man hep van giu 148px cho do chiem cho. */
@media (min-width: 768px) {
  .jk-footer__logo .jk-brand__logo--sm { width: 176px; }
}

@media (max-width: 900px) {
  /* Tren mobile de 2 cot link canh nhau — xep doc 1 cot lam footer dai gap doi */
  .jk-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4); }
  .jk-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 380px) {
  .jk-footer__inner { grid-template-columns: 1fr; }
}
.jk-footer h5 { font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .08em; color: var(--tx-3); margin-bottom: var(--sp-3); }
.jk-footer a { color: var(--tx-2); font-size: var(--fs-13); }
.jk-footer a:hover { color: var(--accent-soft-tx); }
.jk-footer__links { display: flex; flex-direction: column; gap: 8px; }
/* Link footer xep doc chi cao 21px -> duoi nguong 24px, de bam nham sang dong ben canh. */
.jk-footer__links a { display: inline-flex; align-items: center; min-height: 24px; }
.jk-footer__bottom {
  max-width: var(--content-max); margin: var(--sp-6) auto 0;
  padding-top: var(--sp-4); border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: space-between;
  font-size: var(--fs-12); color: var(--tx-3);
}
.jk-social { display: flex; gap: var(--sp-2); }
.jk-social a { width: 34px; height: 34px; border-radius: var(--r-pill); background: var(--bg-card-2); display: grid; place-items: center; border: 1px solid var(--line-soft); }

/* --------------------------- Soot sprites ------------------------------- */
.jk-soot { position: absolute; pointer-events: none; opacity: .5; color: var(--tx-2); }
@media (prefers-reduced-motion: no-preference) {
  .jk-soot { animation: jk-float 6s ease-in-out infinite; }
  @keyframes jk-float { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(6deg); } }
}
@media (max-width: 767px) { .jk-soot { display: none; } }

/* ------------------------------ Toast ---------------------------------- */
.jk-toasts { position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--sp-2); }
.jk-toast {
  padding: 12px var(--sp-4); border-radius: var(--r-sm);
  background: var(--bg-card); border: 1px solid var(--line);
  box-shadow: var(--shadow-3); font-size: var(--fs-13); max-width: 320px;
}

/* ----------------------------- Back to top ------------------------------ */
.jk-totop {
  position: fixed; right: var(--sp-5); bottom: 84px; z-index: var(--z-topbar);
  width: 44px; height: 44px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-tx);
  display: none; place-items: center; box-shadow: var(--shadow-2);
}
.jk-totop.is-visible { display: grid; }
@media (min-width: 1024px) { .jk-totop { bottom: var(--sp-5); } }

/* ---------------------------- Utilities --------------------------------- */
.jk-stack { display: flex; flex-direction: column; }
.jk-row { display: flex; align-items: center; }
.jk-wrap { flex-wrap: wrap; }
.jk-gap-1 { gap: var(--sp-1); } .jk-gap-2 { gap: var(--sp-2); } .jk-gap-3 { gap: var(--sp-3); }
.jk-gap-4 { gap: var(--sp-4); } .jk-gap-5 { gap: var(--sp-5); } .jk-gap-6 { gap: var(--sp-6); }
.jk-mt-2 { margin-top: var(--sp-2); } .jk-mt-3 { margin-top: var(--sp-3); }
.jk-mt-4 { margin-top: var(--sp-4); } .jk-mt-5 { margin-top: var(--sp-5); } .jk-mt-6 { margin-top: var(--sp-6); }
.jk-mb-2 { margin-bottom: var(--sp-2); } .jk-mb-3 { margin-bottom: var(--sp-3); }
.jk-mb-4 { margin-bottom: var(--sp-4); } .jk-mb-5 { margin-bottom: var(--sp-5); } .jk-mb-6 { margin-bottom: var(--sp-6); }
.jk-auto { margin-left: auto; }
.jk-center { text-align: center; }
.jk-right { text-align: right; }
.jk-muted { color: var(--tx-3); }
.jk-t-12 { font-size: var(--fs-12); } .jk-t-13 { font-size: var(--fs-13); }
.jk-bold { font-weight: 700; }
.jk-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.jk-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jk-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.jk-hide-mobile { }
@media (max-width: 767px) { .jk-hide-mobile { display: none !important; } }
.jk-only-mobile { display: none !important; }
@media (max-width: 767px) { .jk-only-mobile { display: block !important; } }

/* Chua bottom tab bar tren mobile — dat cuoi file de thang shorthand padding cua .jk-footer */
@media (max-width: 1023px) {
  .jk-footer { padding-bottom: calc(var(--sp-6) + 78px); }
}

/* ─────────────────── Logo thuong hieu (BBinfo) ───────────────────
   Hai ban: muc dam cho theme sang, ban co vien trang cho theme toi.
   Doi bang CSS thay vi JS de khong nhap nhay khi tai trang. */
/* Logo co 2 dong (BBinfo + tagline). Neo theo CHIEU RONG chu khong phai chieu
   cao: sidebar rong 248px nen de 176px -> cao ~68px, doc duoc dong tagline.
   Neo theo chieu cao 40px thi tagline chi con ~8px, khong doc noi. */
.jk-brand__logo {
  width: 176px; max-width: 100%; height: auto;
  object-fit: contain; display: block;
}
.jk-brand__logo--sm { width: 148px; }

/* Mac dinh (light / forest) hien ban muc dam */
.jk-brand__logo--ondark { display: none; }
[data-theme="dark"] .jk-brand__logo--onlight { display: none; }
[data-theme="dark"] .jk-brand__logo--ondark { display: block; }

@media (max-width: 640px) {
  .jk-brand__logo { width: 146px; }
  .jk-brand__logo--sm { width: 128px; }
}

/* ------------------------- Vo cho khach chua dang nhap -------------------
   [2026-08-25] Truoc day khach chua dang nhap van thay sidebar 10 muc, topbar,
   bottomnav va footer day link noi bo — bam vao chi bi day ve /login. Nay giong
   CMS: chua dang nhap thi khong co dieu huong noi bo nao. */
.jk-guest {
  min-height: 100vh;
  display: flex; flex-direction: column;
  background: var(--bg);
}
.jk-guestbar {
  display: flex; align-items: center; gap: var(--sp-3);
  height: var(--topbar-h);
  padding: 0 var(--sp-6);
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  position: sticky; top: 0; z-index: 20;
}
.jk-guestbar__brand { margin-right: auto; padding: 0; }
/* [2026-08-25] Cho bang logo trong sidebar (176px) de dong bo giua man dang
   nhap va man da dang nhap. Truoc gioi han max-height 40px nen no nho hon han. */
.jk-guestbar__brand .jk-brand__logo { width: 176px; max-height: none; height: auto; }
.jk-guestbar__right { display: flex; align-items: center; gap: var(--sp-2); }

.jk-guest__content {
  flex: 1;
  width: 100%; max-width: 1100px; margin: 0 auto;
  padding: var(--sp-8) var(--sp-6) var(--sp-10);
}
.jk-guest__foot {
  padding: var(--sp-5) var(--sp-6);
  border-top: 1px solid var(--line-soft);
  color: var(--tx-3); font-size: var(--fs-12); text-align: center;
}

@media (max-width: 767px) {
  .jk-guestbar { padding: 0 var(--sp-4); gap: var(--sp-2); }
  .jk-guestbar__brand .jk-brand__logo { width: 140px; }
  .jk-guest__content { padding: var(--sp-5) var(--sp-4) var(--sp-8); }
}

/* Tieu de trang cho khach chua dang nhap (thay cho <h1> von nam o topbar). */
.jk-guest__head { margin-bottom: var(--sp-6); }
.jk-guest__head h1 {
  font-family: var(--font-display); font-size: var(--fs-28);
  line-height: 1.2; color: var(--tx);
}
.jk-guest__head p { margin: 6px 0 0; color: var(--tx-3); font-size: var(--fs-13); }

/* Ghi chu "chi nhan tien ma hoa" tren trang thanh toan (thay cho logo the). */
.jk-paynote {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: 10px var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--accent-soft); color: var(--accent-soft-tx);
  font-size: var(--fs-12); line-height: 1.5;
}
.jk-paynote .jk-i { flex: none; width: 15px; height: 15px; margin-top: 2px; }

/* Popup tao nhanh tai khoan mien phi ------------------------------------- */
.jk-modal--form .jk-modal__box { position: relative; text-align: left; width: min(420px, 100%); }
.jk-modal__x {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px; border-radius: var(--r-pill);
  display: grid; place-items: center; color: var(--tx-3);
}
.jk-modal__x:hover { background: var(--bg-hover); color: var(--tx); }
.jk-modal__title { font-family: var(--font-display); font-size: var(--fs-20); margin-bottom: 4px; padding-right: 32px; }
.jk-modal__sub { color: var(--tx-3); font-size: var(--fs-12); margin-bottom: var(--sp-5); }
.jk-modal--form .jk-field { margin-bottom: var(--sp-4); }

/* Bang thong bao tinh trang tai khoan (cho duyet, tam dung...) ------------ */
.jk-notice {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--accent-soft); color: var(--accent-soft-tx);
  border: 1px solid var(--line-soft);
}
.jk-notice .jk-i { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.jk-notice b { display: block; font-size: var(--fs-14); margin-bottom: 4px; }
.jk-notice p { margin: 0; font-size: var(--fs-13); line-height: 1.55; }

/* Cho biet dang doi mat khau cho tai khoan nao ---------------------------- */
.jk-whoami {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px var(--sp-3);
  border-radius: var(--r-md);
  background: var(--bg-card-2);
  border: 1px solid var(--line-soft);
}
.jk-whoami__av {
  flex: none; width: 34px; height: 34px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-soft-tx);
  font-weight: 700; font-size: var(--fs-14);
}
/* [2026-08-25] PHAI la `> div b` / `> div span`, khong duoc de `.jk-whoami span`.
   Vong tron avatar CUNG la mot the <span> (.jk-whoami__av). Bo chon hau due
   `.jk-whoami span` co do uu tien 0-1-1, cao hon `.jk-whoami__av` (0-1-0), nen no
   de mat `display: grid` cua avatar bang `display: block` — chu cai trong vong
   tron het duoc can giua, va con bi lay ca font-size 11px lan mau chu mo. Do la
   ly do chu o icon nguoi dung trong trang doi mat khau bi lech. */
.jk-whoami > div b { display: block; font-size: var(--fs-13); word-break: break-all; }
.jk-whoami > div span { display: block; font-size: var(--fs-11); color: var(--tx-3); }

/* Khung soan tin nhan ----------------------------------------------------
   [2026-08-25] Nut gui bi meo: .jk-chat__compose la flex, align-items mac dinh
   la stretch nen nut bi keo cao bang o nhap (70px) trong khi be ngang chi la
   icon 16px + padding -> ti le 0.83, tron meo.
   Neo cac phan tu xuong day va cho nut mot kich thuoc vuong co dinh. */
.jk-chat__compose { align-items: flex-end; }
.jk-chat__compose .send-message-button {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  padding: 0;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
}
.jk-chat__compose .send-message-button .jk-i { width: 17px; height: 17px; }

/* Link trong tin nhan chat: phai noi bat tren ca nen bong minh lan nen toi */
.jk-chat-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
  font-weight: 600;
}
.jk-chat-link:hover { opacity: .8; }

/* ===== Emoji + anh trong khung chat cua khach (2026-08-25) ===== */
.jk-emoji-wrap { position: relative; flex: 0 0 auto; }
.jk-emoji-panel {
  position: absolute; bottom: calc(100% + 10px); left: 0;
  width: 272px; max-height: 220px; overflow-y: auto;
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px;
  padding: 8px; z-index: 60;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: 0 14px 36px rgba(0,0,0,.28);
}
.jk-emoji-panel[hidden] { display: none; }
.jk-emoji-item {
  border: 0; background: transparent; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 3px; border-radius: 6px;
}
.jk-emoji-item:hover { background: var(--accent-soft); }

.jk-chat-img { display: block; margin-top: 6px; }
.jk-chat-img img {
  max-width: 240px; max-height: 200px; border-radius: 10px; display: block;
  border: 1px solid var(--line-soft);
}
@media (max-width: 480px) {
  .jk-emoji-panel { width: 236px; grid-template-columns: repeat(8, 1fr); }
  .jk-chat-img img { max-width: 180px; }
}

/* [2026-08-27] Banner chi duong sang trang vung kia khi het goi o trang nay.
   Dung bien mau san co nen tu theo giao dien sang/toi, khong can them bien. */
.jk-xsite {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin: 0 0 var(--sp-5); padding: var(--sp-3) var(--sp-4);
  background: var(--bg-card-2); border: 1px solid var(--line-soft);
  border-left: 4px solid var(--info); border-radius: var(--r-md);
}
.jk-xsite__txt { flex: 1 1 260px; color: var(--tx-2); font-size: var(--fs-14); line-height: 1.5; }
.jk-xsite__btn {
  flex: 0 0 auto; padding: 8px 16px; border-radius: var(--r-pill);
  background: var(--info); color: #fff; font-size: var(--fs-13); font-weight: 600;
  text-decoration: none; transition: opacity var(--t-fast) var(--ease);
}
.jk-xsite__btn:hover { opacity: .88; color: #fff; text-decoration: none; }