/* CEO Center V4 — unified executive workspace */
:root {
  --bone:#F5F1EA;
  --bone-2:#EBE5DA;
  --paper:#FAF8F4;
  --ink:#1C1B19;
  --ink-2:#2A2825;
  --clay:#B85C38;
  --taupe:#8B7C66;
  --line:#D5CDBE;
  --line-strong:#C5BDA8;
  --green:#3F9656;
  --amber:#D88E3C;
  --red:#C44A3A;
  --serif:'Fraunces',serif;
  --sans:'Manrope',sans-serif;
  --mono:'JetBrains Mono',monospace;
  --sidebar-width:252px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:18px;
  --shadow-soft:0 14px 40px rgba(28,27,25,.065);
  --shadow-float:0 24px 70px rgba(28,27,25,.11);
}

html { background:var(--bone); scroll-behavior:smooth; }
body {
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  letter-spacing:-.005em;
  text-rendering:optimizeLegibility;
}
a,button,input,select,textarea { -webkit-tap-highlight-color:rgba(184,92,56,.12); }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:2px solid var(--clay);
  outline-offset:3px;
}
.skip-link {
  position:fixed;
  left:16px;
  top:-72px;
  z-index:300;
  padding:10px 14px;
  border-radius:999px;
  background:var(--clay);
  color:var(--bone);
  text-decoration:none;
  font:500 9px var(--mono);
}
.skip-link:focus { top:14px; }

/* Executive shell */
.ceo-shell-v4 {
  display:grid;
  grid-template-columns:var(--sidebar-width) minmax(0,1fr);
  min-height:100vh;
  padding:0;
}
.ceo-shell-v4 .sidebar {
  width:var(--sidebar-width);
  height:100vh;
  position:sticky;
  inset:0 auto auto 0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:0;
  background:var(--ink);
  color:var(--bone);
  border-right:1px solid rgba(245,241,234,.09);
  z-index:80;
}
.brand-lockup {
  padding:23px 20px 17px;
  border-bottom:1px solid rgba(245,241,234,.09);
}
.brand-home {
  display:flex;
  align-items:center;
  gap:11px;
  color:var(--bone);
  text-decoration:none;
}
.brand-mark {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex:none;
  border:1px solid rgba(245,241,234,.24);
  border-radius:50%;
  color:var(--clay);
  font:500 11px var(--serif);
}
.brand-copy strong {
  display:block;
  color:var(--bone);
  font:500 20px/1 var(--serif);
  letter-spacing:-.025em;
}
.brand-copy strong em { color:var(--clay); font-style:italic; }
.brand-copy small {
  display:block;
  margin-top:5px;
  color:rgba(245,241,234,.42);
  font:8px/1.4 var(--mono);
  letter-spacing:.13em;
  text-transform:uppercase;
}
.sidebar-search-wrap { padding:13px 14px 10px; }
.sidebar-search-shell { position:relative; }
.sidebar-search {
  width:100%;
  height:39px;
  padding:0 12px 0 34px;
  border:1px solid rgba(245,241,234,.15);
  border-radius:var(--radius-sm);
  background:rgba(245,241,234,.06);
  color:var(--bone);
  font:10px var(--mono);
  letter-spacing:.015em;
}
.sidebar-search::placeholder { color:rgba(245,241,234,.43); }
.sidebar-search-shell::before {
  content:'⌕';
  position:absolute;
  left:12px;
  top:9px;
  color:rgba(245,241,234,.48);
  font:14px var(--mono);
  pointer-events:none;
}
.search-results {
  display:none;
  position:absolute;
  left:0;
  right:0;
  top:45px;
  max-height:340px;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--paper);
  color:var(--ink);
  box-shadow:var(--shadow-float);
  z-index:200;
}
.ceo-shell-v4 .nav {
  flex:1;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:4px 10px 18px;
  scrollbar-width:thin;
  scrollbar-color:rgba(245,241,234,.2) transparent;
}
.ceo-shell-v4 .nav-group {
  margin:15px 10px 6px;
  padding:0;
  border:0;
  color:rgba(245,241,234,.34);
  font:500 8px/1.4 var(--mono);
  letter-spacing:.18em;
  text-transform:uppercase;
}
.ceo-shell-v4 .nav-group:first-child { margin-top:8px; }
.ceo-shell-v4 .nav a {
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:9px 11px;
  border:0;
  border-radius:var(--radius-sm);
  color:rgba(245,241,234,.63);
  background:transparent;
  text-decoration:none;
  font:12px/1.25 var(--sans);
  letter-spacing:0;
  transition:color .16s ease,background .16s ease;
}
.ceo-shell-v4 .nav a:hover { color:var(--bone); background:rgba(245,241,234,.06); }
.ceo-shell-v4 .nav a.active {
  color:var(--bone);
  background:rgba(184,92,56,.2);
  font-weight:600;
}
.ceo-shell-v4 .nav a.active::before {
  content:'';
  position:absolute;
  left:0;
  top:12px;
  bottom:12px;
  width:2px;
  border-radius:2px;
  background:var(--clay);
}
.ceo-shell-v4 .nav .icon {
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  flex:none;
  color:rgba(245,241,234,.48);
  font:500 12px var(--mono);
}
.ceo-shell-v4 .nav a.active .icon { color:var(--clay); }
.ceo-shell-v4 .nav .badge {
  margin-left:auto;
  min-width:21px;
  padding:3px 6px;
  border-radius:999px;
  background:var(--clay);
  color:var(--bone);
  text-align:center;
  font:500 8px var(--mono);
}
.ceo-shell-v4 .sidebar .footer {
  padding:14px 20px 18px;
  border-top:1px solid rgba(245,241,234,.09);
  color:rgba(245,241,234,.4);
  font:8px/1.7 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.footer-user-row { display:flex;align-items:center;gap:9px;margin-bottom:8px; }
.user-avatar {
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  flex:none;
  border:1px solid rgba(245,241,234,.16);
  border-radius:50%;
  color:var(--bone);
  background:rgba(245,241,234,.06);
  font:500 10px var(--serif);
}
.ceo-shell-v4 .sidebar .footer .user { margin:0;color:var(--bone);font-size:10px; }
.ceo-shell-v4 .sidebar .footer a { color:rgba(245,241,234,.55);text-decoration:none; }
.ceo-shell-v4 .sidebar .footer a:hover { color:var(--clay); }

.workspace { min-width:0; container-type:inline-size; container-name:workspace-shell; }
.workspace-bar {
  position:sticky;
  top:0;
  z-index:45;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:64px;
  padding:12px clamp(20px,3vw,42px);
  border-bottom:1px solid rgba(213,205,190,.78);
  background:rgba(245,241,234,.93);
  backdrop-filter:blur(14px);
}
.workspace-context { display:flex;align-items:center;gap:10px;min-width:0; }
.workspace-context .eyebrow {
  color:var(--taupe);
  font:500 8px var(--mono);
  letter-spacing:.16em;
  text-transform:uppercase;
  white-space:nowrap;
}
.workspace-context .divider { color:var(--line-strong); }
.workspace-context .current {
  overflow:hidden;
  color:var(--ink);
  font:600 12px var(--sans);
  text-overflow:ellipsis;
  white-space:nowrap;
}
.workspace-actions { display:flex;align-items:center;gap:7px;flex:none; }
.workspace-action {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:38px;
  padding:8px 11px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper);
  color:var(--ink);
  text-decoration:none;
  font:500 9px var(--mono);
  letter-spacing:.02em;
  transition:border-color .16s ease,color .16s ease,background .16s ease;
}
.workspace-action:hover { border-color:var(--clay);color:var(--clay); }
.workspace-action[data-variant='primary'] { border-color:var(--ink);background:var(--ink);color:var(--bone); }
.workspace-action[data-variant='primary']:hover { border-color:var(--clay);background:var(--clay); }
.workspace-action.profile-shortcut { width:38px;padding:0;border-radius:50%; }
.ceo-shell-v4 .main {
  width:100%;
  max-width:1440px;
  min-width:0;
  margin:0 auto;
  padding:clamp(24px,3.5vw,48px) clamp(18px,3.8vw,54px) 88px;
  overflow:visible;
}

/* Shared page hierarchy */
.pageheader,.hd,.cf-h {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin:0 0 28px;
  padding:4px 0 22px;
  border-bottom:1px solid var(--line);
}
.pageheader h2,.hd h1,.cf-h h1 {
  margin:0;
  color:var(--ink);
  font:400 clamp(28px,3.3vw,44px)/1.05 var(--serif);
  letter-spacing:-.03em;
}
.pageheader .meta,.hd .sub,.cf-sub {
  color:var(--taupe);
  font:9px/1.6 var(--mono);
  letter-spacing:.09em;
  text-transform:uppercase;
}
.card,.kpi,.panel,.master-card,.eh-chart,.chart-wrap,.simple-panel,.simple-kpi {
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--paper);
  box-shadow:none;
}
.card,.panel,.master-card { padding:clamp(16px,2vw,24px); }
.card:hover,.kpi:hover,.simple-kpi:hover { border-color:var(--line-strong); }
.card-title,.panel-title {
  color:var(--taupe);
  font:500 9px var(--mono);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.kpi { min-height:126px;padding:18px 19px; }
.kpi.accent { border-color:var(--ink);background:var(--ink);color:var(--bone); }
.kpi-label { font-size:8px;letter-spacing:.14em; }
.kpi-value { font-weight:400;font-size:clamp(27px,3vw,38px); }
.kpi-sub { line-height:1.5; }

.eh { max-width:100%;overflow:visible; }
.eh-hero {
  margin:0 0 36px;
  padding:4px 0 30px;
  border-bottom:1px solid var(--line);
}
.eh-hero .eyebrow,.simple-kicker {
  color:var(--taupe);
  font:500 9px var(--mono);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.eh-hero h1 { max-width:850px;font-size:clamp(34px,4.5vw,58px);font-weight:400;line-height:1.02; }
.eh-hero .meta { max-width:860px;line-height:1.65; }
.eh-hero-stats { gap:clamp(22px,3vw,46px); }
.eh-stat .num { font-size:clamp(38px,5vw,68px);font-weight:400; }
.eh-stat .sub { max-width:36ch; }
.eh-sec { margin-bottom:44px; }
.eh-sec-head { margin-bottom:18px;padding-bottom:12px; }
.eh-sec-head h2 { color:var(--taupe);font-size:9px;letter-spacing:.19em; }
.eh-chart { padding:clamp(16px,2.4vw,30px);box-shadow:var(--shadow-soft); }
.eh-insights { overflow:hidden;border-radius:var(--radius-md);background:var(--paper); }
.eh-ins { background:var(--paper); }
.eh-order-row { border-color:var(--line); }

table,.eh-table { width:100%;border-collapse:separate;border-spacing:0; }
thead tr { background:var(--bone-2);color:var(--ink); }
th,.eh-table thead th {
  padding:11px 10px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--bone-2);
  color:var(--taupe);
  font:500 8px var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
}
th:first-child { border-left:1px solid var(--line);border-radius:8px 0 0 8px; }
th:last-child { border-right:1px solid var(--line);border-radius:0 8px 8px 0; }
td,.eh-table tbody td { padding:13px 10px;border-bottom:1px solid var(--line);background:transparent; }
tbody tr:nth-child(even) { background:rgba(235,229,218,.45); }
tbody tr:hover { background:rgba(184,92,56,.045); }

input,select,textarea {
  min-height:44px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--paper);
  color:var(--ink);
  padding:10px 12px;
}
input::placeholder,textarea::placeholder { color:var(--taupe); }
label { color:var(--taupe);font:500 9px var(--mono);letter-spacing:.08em;text-transform:uppercase; }
.btn,.eh-btn,button[type='submit'] {
  min-height:44px;
  border-radius:999px;
  font:500 9px var(--mono);
  letter-spacing:.08em;
}
.btn,.eh-btn { background:var(--paper); }
.btn:hover,.eh-btn:hover { border-color:var(--ink);background:var(--ink);color:var(--bone); }
.btn.approve,.eh-btn.primary,button[type='submit'] { border-color:var(--ink);background:var(--ink);color:var(--bone); }
.btn.approve:hover,.eh-btn.primary:hover,button[type='submit']:hover { border-color:var(--clay);background:var(--clay); }
.tag { border-radius:999px; }

/* Home */
.simple-dash { max-width:1240px; }
.simple-head { padding:4px 0 27px;margin-bottom:20px; }
.simple-head h1 { font-size:clamp(37px,5vw,62px);font-weight:400; }
.simple-summary { margin-bottom:16px;padding:22px 24px;border-radius:var(--radius-lg);box-shadow:var(--shadow-soft); }
.simple-summary-main { font-size:clamp(18px,2vw,25px); }
.simple-kpis { gap:10px;margin-bottom:16px; }
.simple-kpi { min-height:142px;padding:18px; }
.simple-kpi-value { font-weight:400; }
.simple-grid { gap:10px;margin-bottom:16px; }
.simple-panel { padding:20px; }
.simple-link { min-height:52px;border-radius:var(--radius-md);background:var(--paper); }
.simple-link:hover { background:var(--paper);box-shadow:var(--shadow-soft); }

/* Login */
.login-editorial {
  display:grid;
  grid-template-columns:minmax(300px,.9fr) minmax(390px,1.1fr);
  min-height:100vh;
  padding:0;
  background:var(--bone);
}
.login-story {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:100vh;
  padding:clamp(32px,5vw,72px);
  background:var(--ink);
  color:var(--bone);
}
.login-story-brand { color:var(--bone);font:500 19px var(--serif); }
.login-story-brand em { color:var(--clay);font-style:italic; }
.login-story-copy { max-width:520px; }
.login-story-kicker { color:var(--clay);font:500 9px var(--mono);letter-spacing:.18em;text-transform:uppercase; }
.login-story h1 { margin:16px 0;font:400 clamp(38px,5vw,68px)/1.02 var(--serif);letter-spacing:-.04em; }
.login-story p { max-width:42ch;color:rgba(245,241,234,.62);font-size:13px;line-height:1.75; }
.login-story-foot { color:rgba(245,241,234,.35);font:8px var(--mono);letter-spacing:.14em;text-transform:uppercase; }
.login-form-side { display:grid;place-items:center;padding:28px; }
.login-editorial .login-box {
  width:min(440px,100%);
  max-width:440px;
  padding:34px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--paper);
  box-shadow:var(--shadow-float);
}
.login-editorial .login-box h1 { text-align:left;font-size:32px;font-weight:400; }
.login-editorial .login-box .sub { text-align:left;margin-bottom:24px; }
.login-editorial .login-box input { background:var(--bone); }
.login-editorial .login-box button { border-radius:999px; }
.btn-zalo {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:100%;
  min-height:46px;
  padding:11px 16px;
  border:1px solid var(--ink);
  border-radius:999px;
  background:var(--ink);
  color:var(--bone);
  text-decoration:none;
  font-size:12px;
  font-weight:600;
}
.btn-zalo:hover { border-color:var(--clay);background:var(--clay); }
.login-support-copy { margin:10px 0 16px;color:var(--taupe);font-size:10px;line-height:1.6;text-align:center; }
.login-divider { margin:14px 0 17px;color:var(--taupe);font:8px var(--mono);letter-spacing:.14em;text-align:center;text-transform:uppercase; }

/* Mobile shell */
.mobile-header,.mobile-primary-nav,.sidebar-backdrop { display:none; }
.mobile-header {
  align-items:center;
  justify-content:space-between;
  min-height:58px;
  padding:8px 12px;
  padding-top:max(8px,env(safe-area-inset-top));
  border-bottom:1px solid var(--line);
  background:rgba(245,241,234,.96);
  backdrop-filter:blur(14px);
}
.mobile-menu-button,.mobile-home-button {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--paper);
  color:var(--ink);
  text-decoration:none;
  font:500 14px var(--mono);
}
.mobile-context { min-width:0;text-align:center; }
.mobile-context small { display:block;color:var(--taupe);font:8px var(--mono);letter-spacing:.14em;text-transform:uppercase; }
.mobile-context strong { display:block;overflow:hidden;max-width:210px;margin-top:2px;font:600 11px var(--sans);text-overflow:ellipsis;white-space:nowrap; }
.mobile-primary-nav {
  position:fixed;
  right:10px;
  bottom:max(10px,env(safe-area-inset-bottom));
  left:10px;
  z-index:70;
  align-items:center;
  justify-content:space-around;
  min-height:62px;
  padding:6px;
  border:1px solid rgba(213,205,190,.9);
  border-radius:18px;
  background:rgba(250,248,244,.96);
  box-shadow:0 18px 50px rgba(28,27,25,.16);
  backdrop-filter:blur(16px);
}
.mobile-primary-nav a,.mobile-primary-nav button {
  display:flex;
  flex:1;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  min-width:52px;
  min-height:48px;
  padding:4px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:var(--taupe);
  text-decoration:none;
  font:500 8px var(--mono);
}
.mobile-primary-nav .glyph { color:var(--ink);font-size:15px;line-height:1; }
.mobile-primary-nav a.active { background:var(--bone);color:var(--clay); }
.mobile-primary-nav a.active .glyph { color:var(--clay); }

@container workspace-shell (max-width:760px) {
  .kpi-row.cols-3,.kpi-row.cols-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .eh-split,.simple-grid { grid-template-columns:1fr;gap:14px; }
}

@media (max-width:1024px) {
  :root { --sidebar-width:224px; }
  .workspace-action span { display:none; }
  .workspace-action { width:38px;padding:0; }
  .ceo-shell-v4 .main { padding-inline:22px; }
}

@media (max-width:900px) {
  html,body { max-width:100%;overflow-x:hidden; }
  .ceo-shell-v4 { display:block;min-height:100vh;padding:0; }
  .mobile-header { position:sticky;top:0;z-index:60;display:flex; }
  .ceo-shell-v4 .sidebar {
    position:fixed;
    left:-292px;
    top:0;
    width:282px;
    height:100dvh;
    transition:left .22s ease;
    box-shadow:var(--shadow-float);
  }
  .ceo-shell-v4 .sidebar.open { left:0; }
  .sidebar-backdrop {
    position:fixed;
    inset:0;
    z-index:75;
    background:rgba(28,27,25,.48);
    backdrop-filter:blur(2px);
  }
  .sidebar-backdrop.show { display:block; }
  .workspace-bar { display:none; }
  .mobile-primary-nav { display:flex; }
  .ceo-shell-v4 .main { padding:22px 14px 98px;overflow:visible; }
  .eh-split { grid-template-columns:minmax(0,1fr) !important;gap:20px !important; }
  .eh-split > * { min-width:0;max-width:100%;overflow-x:auto; }
  .pageheader,.hd,.cf-h { align-items:flex-start;flex-direction:column;padding-bottom:17px;margin-bottom:20px; }
  .pageheader h2,.hd h1,.cf-h h1 { font-size:30px; }
  .card { overflow:visible; }
  .card > table,.card > .scroll-x,.panel > table,.eh-sec > table { overflow-x:auto; }
  table { min-width:620px; }
  .eh-table { min-width:560px; }
  .eh-hero { padding-top:0;margin-bottom:26px; }
  .eh-hero h1 { font-size:38px; }
  .simple-links { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #gth-visitor-widget { display:none !important; }
}

@media (max-width:620px) {
  .simple-kpis,.kpi-row.cols-3,.kpi-row.cols-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .simple-head { align-items:flex-start;flex-direction:column; }
  .simple-date { text-align:left; }
  .simple-kpi { min-height:126px;padding:14px; }
  .simple-kpi-value { font-size:27px; }
  .eh-hero-stats { grid-template-columns:1fr;gap:20px; }
  .eh-stat .num { font-size:45px; }
  .login-editorial { display:block; }
  .login-story { min-height:auto;padding:26px 22px 32px; }
  .login-story h1 { margin:10px 0 8px;font-size:36px; }
  .login-story p,.login-story-foot { display:none; }
  .login-form-side { display:block;padding:18px 12px 28px; }
  .login-editorial .login-box { margin:-10px auto 0;padding:24px 20px;box-shadow:var(--shadow-soft); }
}

@media (max-width:420px) {
  .ceo-shell-v4 .main { padding-inline:11px; }
  .simple-kpis { grid-template-columns:1fr 1fr;gap:7px; }
  .simple-kpi { min-height:118px; }
  .simple-links { grid-template-columns:1fr; }
  .mobile-primary-nav { right:6px;bottom:max(6px,env(safe-area-inset-bottom));left:6px; }
  .mobile-primary-nav a,.mobile-primary-nav button { min-width:48px; }
}

@media print {
  .mobile-primary-nav,.workspace-bar,.sidebar,.mobile-header,.sidebar-backdrop { display:none !important; }
  .ceo-shell-v4 { display:block; }
  .ceo-shell-v4 .main { max-width:none;padding:0; }
}

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