/* ========================================================================
   HTN Cloud — Design System
   v0.1 prototype — light+dark mode
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap');

/* ---------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------- */
:root {
  /* brand (pulled from logo gradient) */
  --htn-cyan-300: #7EE0F2;
  --htn-cyan-400: #4DD0E8;
  --htn-cyan-500: #2EB8DE;
  --htn-blue-400: #3AA8E8;
  --htn-blue-500: #1E8BDE;
  --htn-blue-600: #0E6DC4;
  --htn-blue-700: #094FA0;
  --htn-blue-900: #062E6A;

  --gradient-brand: linear-gradient(135deg, #4DD0E8 0%, #1E8BDE 45%, #094FA0 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(77,208,232,.12) 0%, rgba(14,109,196,.08) 100%);
  --gradient-hero: radial-gradient(ellipse at 20% 30%, rgba(77,208,232,.18), transparent 60%),
                   radial-gradient(ellipse at 80% 20%, rgba(14,109,196,.15), transparent 55%);

  /* semantic */
  --success: #10B981;
  --success-bg: #D1FAE5;
  --warning: #F59E0B;
  --warning-bg: #FEF3C7;
  --danger:  #EF4444;
  --danger-bg: #FEE2E2;
  --info:    #3B82F6;
  --info-bg: #DBEAFE;

  /* light theme neutral */
  --bg: #FFFFFF;
  --bg-alt: #F6F9FC;
  --bg-subtle: #ECF2F8;
  --bg-elevated: #FFFFFF;
  --border: #E4ECF4;
  --border-strong: #C6D0DC;
  --text: #0C1726;
  --text-soft: #2D3E52;
  --text-muted: #6B7B90;
  --text-on-brand: #FFFFFF;

  --shadow-sm: 0 1px 2px rgba(12,23,38,.04), 0 2px 8px rgba(12,23,38,.06);
  --shadow-md: 0 4px 12px rgba(12,23,38,.07), 0 12px 28px rgba(12,23,38,.05);
  --shadow-lg: 0 10px 32px rgba(12,23,38,.12), 0 24px 56px rgba(12,23,38,.08);
  --shadow-glow: 0 0 0 1px rgba(46,184,222,.35), 0 8px 24px rgba(46,184,222,.18);

  /* typography */
  --font-heading: 'Be Vietnam Pro', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* radius / spacing */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  --container: 1280px;
  --header-h: 72px;

  /* motion */
  --ease: cubic-bezier(.16,.84,.44,1);
  --dur: 200ms;
}

[data-theme="dark"] {
  --bg: #0A1628;
  --bg-alt: #0F1E35;
  --bg-subtle: #14253F;
  --bg-elevated: #14253F;
  --border: #1E3252;
  --border-strong: #2A4570;
  --text: #F5F9FF;
  --text-soft: #C6D4E8;
  --text-muted: #8CA0BD;

  --success-bg: rgba(16,185,129,.12);
  --warning-bg: rgba(245,158,11,.12);
  --danger-bg: rgba(239,68,68,.12);
  --info-bg: rgba(59,130,246,.12);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.2), 0 2px 8px rgba(0,0,0,.25);
  --shadow-md: 0 4px 12px rgba(0,0,0,.3), 0 12px 28px rgba(0,0,0,.2);
  --shadow-lg: 0 10px 32px rgba(0,0,0,.45), 0 24px 56px rgba(0,0,0,.3);
  --shadow-glow: 0 0 0 1px rgba(77,208,232,.4), 0 8px 24px rgba(77,208,232,.2);

  --gradient-hero: radial-gradient(ellipse at 20% 30%, rgba(77,208,232,.18), transparent 55%),
                   radial-gradient(ellipse at 80% 20%, rgba(9,79,160,.4), transparent 55%);
}

/* ---------------------------------------------------------------
   2. RESET + BASE — scoped to .htn-page only
   Avoid breaking Lagom native layout: all rules apply ONLY when
   body has class "htn-page" (added to pages we redesigned).
   --------------------------------------------------------------- */
.htn-page *, .htn-page *::before, .htn-page *::after { box-sizing: border-box; }
body.htn-page {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  min-width: 320px;
}
.htn-page img, .htn-page svg { max-width: 100%; }
.htn-page a { color: var(--htn-blue-600); text-decoration: none; transition: color var(--dur) var(--ease); }
.htn-page a:hover { color: var(--htn-blue-700); }
[data-theme="dark"] .htn-page a { color: var(--htn-cyan-400); }
[data-theme="dark"] .htn-page a:hover { color: var(--htn-cyan-300); }

.htn-page h1, .htn-page h2, .htn-page h3, .htn-page h4, .htn-page h5, .htn-page h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
  color: var(--text);
  overflow-wrap: break-word;
  text-wrap: balance;
}
.htn-page p { margin: 0 0 1em; color: var(--text-soft); text-wrap: pretty; }
.htn-page .display, .htn-page .h1, .htn-page .h2, .htn-page .h3 { text-wrap: balance; }
.htn-page .lead, .htn-page .cta-banner p { text-wrap: pretty; }

.htn-page ::selection { background: var(--htn-cyan-400); color: #042142; }

/* ---------------------------------------------------------------
   Lagom theme override for .htn-skinned pages
   Force light theme matching homepage, regardless of Lagom's admin
   theme preset (which is stored in DB as dark navy).
   --------------------------------------------------------------- */
body.htn-skinned {
  --body-bg: #F6F9FC !important;
  --body-color: #0C1726 !important;
  --content-bg: #FFFFFF !important;
  --card-bg: #FFFFFF !important;
  --text-color: #0C1726 !important;
  --text-color-base: #0C1726 !important;
  --text-color-secondary: #2D3E52 !important;
  --heading-color: #0C1726 !important;
  --border-color: #E4ECF4 !important;
  --input-bg: #FFFFFF !important;
  --input-color: #0C1726 !important;
  --input-border: #C6D0DC !important;
  background: #F6F9FC !important;
  color: #0C1726 !important;
}
body.htn-skinned .app-main,
body.htn-skinned .main-body,
body.htn-skinned .page-container,
body.htn-skinned .main-content {
  background: transparent !important;
}
/* Force dark text on key typography (Lagom defaults many to light for dark bg) */
body.htn-skinned h1,
body.htn-skinned h2,
body.htn-skinned h3,
body.htn-skinned h4,
body.htn-skinned h5,
body.htn-skinned h6,
body.htn-skinned p,
body.htn-skinned label,
body.htn-skinned .form-group label,
body.htn-skinned .form-label,
body.htn-skinned .btn-text,
body.htn-skinned .control-label {
  color: #0C1726 !important;
}
body.htn-skinned ::placeholder {
  color: #6B7B90 !important;
  opacity: 1;
}
/* Lagom form inputs on light bg */
body.htn-skinned .form-control,
body.htn-skinned input[type="text"],
body.htn-skinned input[type="email"],
body.htn-skinned input[type="password"],
body.htn-skinned input[type="tel"],
body.htn-skinned input[type="number"],
body.htn-skinned input[type="search"],
body.htn-skinned textarea,
body.htn-skinned select {
  background: #FFFFFF !important;
  color: #0C1726 !important;
  border: 1px solid #C6D0DC !important;
}
/* Links — keep HTN brand blue */
body.htn-skinned a:not(.btn):not(.nav-link):not(.dropdown-item):not(.logo):not(.trust-badge):not(.socials a) {
  color: #0E6DC4;
}
body.htn-skinned a:not(.btn):not(.nav-link):not(.dropdown-item):not(.logo):not(.trust-badge):not(.socials a):hover {
  color: #094FA0;
}

/* ---------------------------------------------------------------
   3. TYPOGRAPHY SCALE
   --------------------------------------------------------------- */
.display { font-size: clamp(2rem, 4vw + 1rem, 3.5rem); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; word-break: break-word; overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 600px) {
  .display { font-size: clamp(1.5rem, 7vw, 2rem); line-height: 1.2; }
  .h1 { font-size: clamp(1.375rem, 5.5vw, 1.75rem); }
}
.h1 { font-size: clamp(1.875rem, 2.5vw + 1rem, 2.5rem); font-weight: 700; line-height: 1.15; }
.h2 { font-size: clamp(1.5rem, 1.5vw + .75rem, 1.875rem); font-weight: 700; line-height: 1.25; }
.h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.35; }
.h4 { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
/* Lagom theme.css sets .h1/.h2/.h3 font-size via `!important` + CSS vars.
   Override by (1) redefining the variables under .htn-page scope so Lagom's
   own rule picks up our values, and (2) adding a matching !important rule
   for pages that don't have Lagom CSS loaded. */
.htn-page {
  --font-size-h1: clamp(1.875rem, 2.5vw + 1rem, 2.5rem);
  --font-size-h2: clamp(1.5rem, 1.5vw + .75rem, 1.875rem);
  --font-size-h3: 1.25rem;
  --line-height-h1: 1.15;
  --line-height-h2: 1.25;
  --line-height-h3: 1.35;
  --font-weight-h1: 700;
  --font-weight-h2: 700;
  --font-weight-h3: 600;
}
.htn-page h1.h1, .htn-page h2.h1, .htn-page .h1 { font-size: clamp(1.875rem, 2.5vw + 1rem, 2.5rem) !important; line-height: 1.15 !important; }
.htn-page h1.h2, .htn-page h2.h2, .htn-page h3.h2, .htn-page .h2 { font-size: clamp(1.5rem, 1.5vw + .75rem, 1.875rem) !important; line-height: 1.25 !important; }
.htn-page h1.h3, .htn-page h2.h3, .htn-page h3.h3, .htn-page .h3 { font-size: 1.25rem !important; font-weight: 600 !important; line-height: 1.35 !important; }
.htn-page h1.display, .htn-page .display { font-size: clamp(2rem, 4vw + 1rem, 3.5rem) !important; font-weight: 800 !important; line-height: 1.05 !important; letter-spacing: -.02em !important; }
.lead { font-size: 1.125rem; color: var(--text-soft); line-height: 1.6; overflow-wrap: break-word; }
@media (max-width: 600px) { .lead { font-size: .9375rem; } .small { font-size: .8125rem; } }
.small { font-size: .875rem; color: var(--text-muted); }
.kicker { font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--htn-cyan-500); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.text-gradient {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------------------------------------------------------------
   4. LAYOUT
   --------------------------------------------------------------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .container { padding: 0 16px; } }
.section { padding: clamp(48px, 6vw, 96px) 0; }
.section-alt { background: var(--bg-alt); }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; }
.text-center { text-align: center; }
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}.mt-5{margin-top:48px}
.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:32px}.mb-5{margin-bottom:48px}

/* ---------------------------------------------------------------
   5. HEADER / NAV
   --------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.78);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border);
  height: var(--header-h);
  display: flex; align-items: center;
}
[data-theme="dark"] .header { background: rgba(10,22,40,.78); }

.header-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; }

.logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-heading); font-weight: 800; font-size: 1.125rem;
  letter-spacing: -.01em;
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.logo img { width: 36px; height: 36px; }
.logo > div { background: inherit; -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo-tag { color: var(--text-muted); font-weight: 500; font-size: .8125rem; display: block; line-height: 1; margin-top: 2px; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a, .nav .nav-link {
  padding: 8px 14px; border-radius: var(--radius-sm);
  color: var(--text-soft); font-weight: 500; font-size: .9375rem;
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
}
.nav a:hover, .nav .nav-link:hover { color: var(--text); background: var(--bg-subtle); }
.nav .nav-link svg.chev { width: 12px; height: 12px; opacity: .6; transition: transform var(--dur) var(--ease); }
.nav .dropdown { position: relative; }
.nav .dropdown:hover > .nav-link svg.chev,
.nav .dropdown:focus-within > .nav-link svg.chev { transform: rotate(180deg); }
.nav .dropdown-menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 280px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  z-index: 50;
}
.nav .dropdown:hover > .dropdown-menu,
.nav .dropdown:focus-within > .dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.nav .dropdown-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  color: var(--text-soft);
}
.nav .dropdown-item:hover { background: var(--bg-subtle); color: var(--text); }
.nav .dropdown-icon {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  background: var(--gradient-brand-soft);
  color: var(--htn-blue-600);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
[data-theme="dark"] .nav .dropdown-icon { color: var(--htn-cyan-400); }
.nav .dropdown-icon svg { width: 18px; height: 18px; }
.nav .dropdown-item b { display: block; font-weight: 600; font-size: .9375rem; color: var(--text); margin-bottom: 2px; line-height: 1.2; }
.nav .dropdown-item span { font-size: .8125rem; color: var(--text-muted); line-height: 1.3; }
/* Dark: --bg-subtle equals --bg-elevated (#14253F) so the default hover bg is invisible against the dropdown panel — lift it with a translucent white tint instead. */
[data-theme="dark"] .nav a:hover,
[data-theme="dark"] .nav .nav-link:hover { color: var(--text); background: rgba(255,255,255,.08); }
[data-theme="dark"] .nav .dropdown-item:hover { background: rgba(255,255,255,.08); color: var(--text); }

.header-actions { display: flex; align-items: center; gap: 8px; }
@media (max-width: 900px) {
  .header-actions > a.btn { display: none; }
}

/* theme toggle */
.theme-toggle {
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-soft);
  transition: all var(--dur) var(--ease);
}
.theme-toggle:hover { border-color: var(--htn-cyan-500); color: var(--htn-cyan-500); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .sun { display: none; }
[data-theme="dark"] .theme-toggle .moon { display: none; }
[data-theme="dark"] .theme-toggle .sun { display: inline; }

/* mobile nav drawer */
.nav-toggle {
  display: none;
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: transparent;
  align-items: center; justify-content: center;
  cursor: pointer; color: var(--text);
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-close { display: none; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }

  .nav {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(380px, 92vw);
    height: 100vh; height: 100dvh;
    background: var(--bg);
    border-left: 1px solid var(--border);
    box-shadow: -16px 0 40px rgba(12,23,38,.18);
    z-index: 100;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 20px 0;
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .3s var(--ease), visibility 0s linear .3s;
  }
  [data-theme="dark"] .nav { box-shadow: -16px 0 40px rgba(0,0,0,.5); }

  body.nav-open .nav {
    transform: translateX(0);
    visibility: visible;
    transition: transform .3s var(--ease);
  }
  body.nav-open { overflow: hidden; }
  body.nav-open::after {
    content: '';
    position: fixed; inset: 0; z-index: 99;
    background: rgba(12,23,38,.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: navBackdropIn .3s ease;
  }
  @keyframes navBackdropIn { from { opacity: 0; } }

  .nav-close {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 20px 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
  }
  .nav-close .logo img { width: 32px; height: 32px; }
  .nav-close button {
    width: 36px; height: 36px; border-radius: var(--radius-pill);
    border: 1px solid var(--border); background: transparent; color: var(--text);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* flatten dropdowns into vertical sections on mobile */
  .nav .dropdown { position: static; }
  .nav .nav-link {
    padding: 14px 20px; border-radius: 0;
    font-size: .75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--text-muted);
    width: 100%; justify-content: flex-start;
  }
  .nav .nav-link svg.chev { display: none; }
  .nav .nav-link:hover { background: transparent; color: var(--text); }

  .nav .dropdown-menu {
    position: static; width: 100%; min-width: 0;
    background: transparent; border: none; box-shadow: none;
    padding: 0 12px 12px;
    opacity: 1; visibility: visible; transform: none;
    transition: none;
  }
  .nav .dropdown-item { padding: 12px; border-radius: var(--radius-sm); }
  .nav .dropdown-item:hover { background: var(--bg-subtle); }

  .nav > a {
    padding: 14px 20px;
    color: var(--text); font-weight: 500;
    border-top: 1px solid var(--border);
  }

  .nav-footer {
    padding: 16px 20px; margin-top: auto;
    border-top: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 10px;
  }
  .nav-footer .btn { width: 100%; }
}

@media (min-width: 901px) {
  .nav-close { display: none !important; }
  .nav-footer { display: none !important; }
}

/* ---------------------------------------------------------------
   6. BUTTONS
   --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; font-family: var(--font-body); font-weight: 600; font-size: .9375rem;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; line-height: 1;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(46,184,222,.4); }

.btn-primary {
  background: var(--gradient-brand); color: #fff;
  box-shadow: 0 4px 14px rgba(14,109,196,.35);
}
.btn-primary:hover { color: #fff; box-shadow: 0 8px 22px rgba(14,109,196,.45); }
/* Higher-specificity override — beats .htn-page a { color: blue } */
.htn-page .btn-primary, .htn-page a.btn-primary { color: #fff; }
.htn-page .btn-primary:hover, .htn-page a.btn-primary:hover { color: #fff; }
.htn-page .btn-secondary { color: var(--text); }
.htn-page .btn-secondary:hover { color: var(--htn-blue-600); }
.htn-page .btn-ghost { color: var(--text-soft); }
.htn-page .btn-ghost:hover { color: var(--text); }
.htn-page .cta-banner .btn-primary, .htn-page .cta-banner a.btn-primary { color: var(--htn-blue-700); }
.htn-page .cta-banner .btn-primary:hover, .htn-page .cta-banner a.btn-primary:hover { color: var(--htn-blue-900); }
.htn-page .cta-banner .btn-ghost, .htn-page .cta-banner a.btn-ghost { color: #fff; }
.htn-page .cta-banner .btn-ghost:hover, .htn-page .cta-banner a.btn-ghost:hover { color: #fff; }

.btn-secondary {
  background: var(--bg-elevated); color: var(--text); border-color: var(--border-strong);
}
.btn-secondary:hover { border-color: var(--htn-cyan-500); color: var(--htn-blue-600); }
[data-theme="dark"] .btn-secondary:hover { color: var(--htn-cyan-400); }

.btn-ghost { background: transparent; color: var(--text-soft); }
.btn-ghost:hover { background: var(--bg-subtle); color: var(--text); }

.btn-sm { padding: 7px 12px; font-size: .8125rem; }
.btn-lg { padding: 14px 28px; font-size: 1rem; }
.btn-block { width: 100%; }

/* ---------------------------------------------------------------
   7. CARDS
   --------------------------------------------------------------- */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card-hover:hover {
  transform: translateY(-4px);
  border-color: var(--htn-cyan-500);
  box-shadow: var(--shadow-md);
}
.card, .card * { color: var(--text); }
.card p, .card .small { color: var(--text-soft); }
details.card summary { color: var(--text); font-size: 1.125rem; font-weight: 600; display: block; }
details.card summary::-webkit-details-marker { display: none; }
details.card summary::marker { content: ''; }
details.card[open] summary { margin-bottom: 8px; }

.card-highlighted {
  position: relative; overflow: hidden;
}
.card-highlighted::before {
  content: ''; position: absolute; inset: 0;
  padding: 1.5px; border-radius: inherit;
  background: var(--gradient-brand);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

/* ---------------------------------------------------------------
   8. BADGES / PILLS
   --------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: .75rem; font-weight: 600; line-height: 1;
  background: var(--bg-subtle); color: var(--text-soft);
}
.badge-brand { background: var(--gradient-brand-soft); color: var(--htn-blue-600); }
[data-theme="dark"] .badge-brand { color: var(--htn-cyan-400); }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger  { background: var(--danger-bg); color: var(--danger); }
.badge-info    { background: var(--info-bg); color: var(--info); }

.badge-dot::before {
  content:''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}

/* ---------------------------------------------------------------
   9. INPUTS
   --------------------------------------------------------------- */
.input, .select, .textarea {
  width: 100%;
  padding: 11px 14px;
  font-family: var(--font-body); font-size: .9375rem;
  background: var(--bg-elevated); color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  min-width: 0;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--htn-cyan-500);
  box-shadow: 0 0 0 3px rgba(46,184,222,.2);
}
.input::placeholder { color: var(--text-muted); }

.input-group { position: relative; }
.input-group .input { padding-left: 40px; }
.input-group-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); width: 18px; height: 18px; pointer-events: none;
}

.label { display: block; font-size: .875rem; font-weight: 500; color: var(--text-soft); margin-bottom: 6px; }

.checkbox {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .875rem; color: var(--text-soft); cursor: pointer;
}
.checkbox input { accent-color: var(--htn-blue-600); width: 16px; height: 16px; }

/* ---------------------------------------------------------------
   10. HERO
   --------------------------------------------------------------- */
.hero {
  position: relative;
  padding: clamp(40px, 5vw, 96px) 0 clamp(48px, 8vw, 112px);
  background: var(--gradient-hero), var(--bg);
  overflow: hidden;
}
@media (max-width: 600px) {
  .hero { padding: 28px 0 40px; }
  .hero .display { font-size: clamp(1.5rem, 7vw, 2rem); line-height: 1.15; }
  .hero .lead { font-size: .9375rem; }
  .hero-trust { gap: 10px 16px; font-size: .8125rem; }
  .hero .flex, .subpage-hero .flex, .cta-banner .flex { flex-direction: column; align-items: stretch; }
  .hero .btn, .subpage-hero .btn, .cta-banner .btn { width: 100%; }
}
@media (max-width: 600px) {
  .hero .display, .subpage-hero .display, .display { font-size: 1.5rem !important; line-height: 1.2; }
}
@media (max-width: 400px) {
  .hero .display, .subpage-hero .display, .display { font-size: 1.375rem !important; }
}
.hero-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(14,109,196,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(14,109,196,.04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at center top, #000 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center top, #000 30%, transparent 70%);
  pointer-events: none;
}
[data-theme="dark"] .hero-grid {
  background-image: linear-gradient(rgba(77,208,232,.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(77,208,232,.06) 1px, transparent 1px);
}

.hero-inner {
  position: relative; display: grid; grid-template-columns: 1.1fr .9fr;
  gap: 48px; align-items: center;
  min-width: 0;
}
.hero-inner > * { min-width: 0; }
@media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 600px) {
  .hero-inner { display: block; }
  .hero-inner > div:first-child { margin-bottom: 28px; }
}

.hero-trust {
  display: flex; flex-wrap: wrap; gap: 20px 32px; margin-top: 32px;
  align-items: center; color: var(--text-muted); font-size: .875rem;
}
.hero-trust b { color: var(--text); font-weight: 700; font-family: var(--font-mono); }

/* hero dashboard mockup */
.dashboard-mock {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
  max-width: 100%;
}
@media (max-width: 480px) {
  .dashboard-mock { font-size: .875rem; }
  .dashboard-headline { font-size: 1rem !important; }
  .dashboard-grid { grid-template-columns: 1fr 1fr; gap: 8px !important; }
  .stat-mini { padding: 10px !important; }
  .stat-mini-value { font-size: 1rem !important; }
}
.hero-inner { min-width: 0; }
.hero-inner > div { min-width: 0; }
.dashboard-mock::before {
  content: ''; position: absolute; inset: -1px;
  border-radius: inherit;
  background: var(--gradient-brand);
  opacity: .18; z-index: -1; filter: blur(28px);
}
.dashboard-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.dashboard-head .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.dashboard-head .dot:nth-child(1) { background: #FF5F57; }
.dashboard-head .dot:nth-child(2) { background: #FEBC2E; }
.dashboard-head .dot:nth-child(3) { background: #28C840; }
.dashboard-head .url {
  font-family: var(--font-mono); font-size: .75rem; color: var(--text-muted);
  margin-left: 12px;
}
.dashboard-body { padding: 20px; }
.dashboard-title { font-size: .875rem; color: var(--text-muted); margin-bottom: 4px; }
.dashboard-headline { font-size: 1.125rem; font-weight: 700; margin-bottom: 16px; color: var(--text); }
.dashboard-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
.stat-mini {
  padding: 12px; background: var(--bg-alt); border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.stat-mini-label { font-size: .6875rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.stat-mini-value { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 700; color: var(--text); margin-top: 4px; }
.stat-mini-delta { font-size: .6875rem; color: var(--success); font-weight: 600; }

.sparkline {
  height: 60px; position: relative;
  background: linear-gradient(180deg, rgba(46,184,222,.08), transparent);
  border-radius: var(--radius-sm);
  padding: 0 2px;
}
.sparkline svg { width: 100%; height: 100%; }

/* ---------------------------------------------------------------
   11. STATUS STRIP
   --------------------------------------------------------------- */
.status-strip {
  background: var(--bg-alt);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 14px 0;
}
.status-strip-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  font-size: .875rem; color: var(--text-soft);
}
@media (max-width: 600px) {
  .status-strip-inner { font-size: .75rem; gap: 8px; }
  .status-chip { font-size: .75rem; padding: 3px 8px; }
  .subpage-hero h1 { font-size: clamp(1.75rem, 7vw, 2.25rem) !important; }
}
.status-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px; background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: .8125rem; font-weight: 600;
}
.status-chip b { color: var(--text); }

/* ---------------------------------------------------------------
   12. SERVICE CARD (homepage grid + cart)
   --------------------------------------------------------------- */
.service-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  position: relative;
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), border-color 260ms var(--ease);
  display: flex; flex-direction: column; gap: 16px;
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: var(--htn-cyan-500);
  box-shadow: var(--shadow-lg), 0 12px 28px -8px rgba(46,184,222,.30);
}
.service-card .service-icon { transition: transform 260ms var(--ease); }
.service-card:hover .service-icon { transform: scale(1.08); }
.service-icon {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
  background: var(--gradient-brand-soft);
  color: var(--htn-blue-600);
}
[data-theme="dark"] .service-icon { color: var(--htn-cyan-400); }
.service-icon svg { width: 28px; height: 28px; }
.service-card h3 { margin: 0; font-size: 1.125rem; }
.htn-page .service-card h3.h3, .htn-page .service-card h3 { font-size: 1.125rem !important; line-height: 1.35 !important; }
.service-card .desc { color: var(--text-muted); font-size: .875rem; margin: 0; }

.service-specs {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 8px;
  font-size: .875rem; color: var(--text-soft);
}
.service-specs li { display: flex; align-items: center; gap: 8px; }
.service-specs li::before {
  content:''; width:14px; height:14px; flex-shrink:0;
  background: var(--success);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M13.5 4.5L6 12 2.5 8.5'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke-width='2' stroke-linecap='round' fill='none' stroke='white'%3E%3Cpath stroke='white' d='M13.5 4.5L6 12 2.5 8.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

.htn-page .price { display: flex; align-items: baseline; gap: 6px; }
.htn-page .price .amount { font-family: var(--font-mono); font-size: 2rem; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.htn-page .price .unit { color: var(--text-muted); font-size: .875rem; }

.stock-bar { height: 4px; background: var(--bg-subtle); border-radius: var(--radius-pill); overflow: hidden; }
.stock-bar-fill { height: 100%; background: var(--gradient-brand); border-radius: inherit; }

/* ---------------------------------------------------------------
   13. PILLARS
   --------------------------------------------------------------- */
.pillar {
  text-align: center; padding: 24px;
}
.pillar-value {
  font-family: var(--font-heading); font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 800; letter-spacing: -.02em;
  background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1; margin-bottom: 8px;
}
.pillar-label { color: var(--text-muted); font-size: .9375rem; }

/* ---------------------------------------------------------------
   14. FOOTER
   --------------------------------------------------------------- */
.footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  padding: 64px 0 32px;
}
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 48px; margin-bottom: 48px;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } }

.footer h4 { font-size: .875rem; font-weight: 700; margin-bottom: 16px; text-transform: uppercase; letter-spacing: .04em; color: var(--text); }
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-links a { color: var(--text-soft); font-size: .875rem; }
.footer-links a:hover { color: var(--htn-blue-600); }
[data-theme="dark"] .footer-links a:hover { color: var(--htn-cyan-400); }

.socials { display: flex; gap: 10px; margin-top: 16px; }
.socials a {
  width: 36px; height: 36px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-elevated); border: 1px solid var(--border);
  color: var(--text-soft); transition: all var(--dur) var(--ease);
}
.socials a:hover { background: var(--gradient-brand); color: #fff; border-color: transparent; transform: translateY(-2px); }
.socials svg { width: 16px; height: 16px; }

.legal-row {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
  font-size: .8125rem; color: var(--text-muted);
}
.trust-badges {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.trust-badge {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 6px 12px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(12,23,38,.04);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.trust-badge:hover {
  transform: translateY(-2px);
  border-color: var(--htn-cyan-500);
  box-shadow: 0 4px 12px rgba(12,23,38,.08);
}
.trust-badge img {
  height: 32px; width: auto; max-width: 140px;
  display: block; object-fit: contain;
}
/* Text-heavy badges (BoCongThuong, SiteLock, Sectigo) — zoom to fill container */
.trust-bct, .trust-dmca, .trust-sitelock, .trust-sectigo {
  padding: 3px 8px;
}
.trust-bct img, .trust-sitelock img, .trust-sectigo img {
  height: 42px;
}
/* DMCA is already clear — keep compact */
.trust-dmca img { height: 34px !important; }
/* SiteLock shield is squarer than the other (wordmark) seals — widen the badge to match the row and enlarge the shield so it doesn't read as cramped. */
.trust-sitelock { min-width: 124px; }
.trust-sitelock img { height: 46px; }

.htn-legal-row { display: flex; flex-direction: column; gap: 16px; padding-top: 24px; }
.htn-legal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: nowrap;
}
.htn-legal-terms {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--text-muted);
}
.htn-legal-top .trust-badges { flex-shrink: 0; flex-wrap: nowrap; }
.htn-legal-bottom {
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  font-size: .75rem;
  line-height: 1.6;
  color: var(--text-muted);
  display: flex; flex-direction: column; gap: 4px;
}
.htn-legal-bottom .mono { color: var(--text-soft); }
@media (max-width: 1100px) {
  .htn-legal-top { flex-wrap: wrap; }
  .htn-legal-top .trust-badges { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .htn-legal-top { gap: 16px; }
  .htn-legal-top .trust-badges { gap: 8px; }
}

/* ---------------------------------------------------------------
   FLOATING CONTACT WIDGET (fixed bottom-right, site-wide via footer)
   --------------------------------------------------------------- */
.htn-float {
  position: fixed; right: 54px; bottom: 62px; z-index: 60;
  display: flex; flex-direction: column; gap: 14px; align-items: center;
}
.htn-float-btn {
  position: relative;
  width: 50px; height: 50px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; border: none; cursor: pointer; padding: 0;
  box-shadow: 0 6px 18px rgba(12,23,38,.22);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
  text-decoration: none;
}
.htn-float-btn svg { width: 24px; height: 24px; }
/* Contact links (a) inherit white icon/text; theme link-color rules would otherwise tint them. Back-to-top is a <button> so keeps its brand color. */
a.htn-float-btn { color: #fff !important; }
.htn-float-btn:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 10px 26px rgba(12,23,38,.3); filter: saturate(1.12); }
.htn-fb-phone { background: #16A34A; }
.htn-fb-zalo { background: #0068FF; }
.htn-fb-zalo span { font-family: var(--font-heading); font-weight: 800; font-size: .8125rem; letter-spacing: -.01em; }
.htn-fb-telegram { background: linear-gradient(135deg, #2AABEE, #229ED9); }
/* Hover label pill (slides in from the right) */
.htn-float-btn::before {
  content: attr(data-label);
  position: absolute; right: calc(100% + 12px); top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: var(--bg-elevated); color: var(--text);
  border: 1px solid var(--border); padding: 5px 11px; border-radius: 8px;
  font-size: .8125rem; font-weight: 600; white-space: nowrap; line-height: 1;
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.htn-float-btn:hover::before { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }
/* Entrance: footer injected async → contact buttons fade/slide in (backwards fill so :hover transform works after) */
@keyframes htnFloatIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.htn-fb-phone { animation: htnFloatIn .45s var(--ease) .05s backwards; }
.htn-fb-zalo { animation: htnFloatIn .45s var(--ease) .12s backwards; }
.htn-fb-telegram { animation: htnFloatIn .45s var(--ease) .19s backwards; }
/* Back-to-top: hidden until scrolled (JS toggles .is-visible) + circular scroll-progress ring */
.htn-fb-top {
  background: var(--bg-elevated); color: var(--htn-blue-600);
  box-shadow: 0 4px 14px rgba(12,23,38,.16);
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.85);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
[data-theme="dark"] .htn-fb-top { color: var(--htn-cyan-400); }
.htn-fb-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.htn-fb-top.is-visible:hover { transform: translateY(-3px) scale(1.04); }
/* full-size override: generic `.htn-float-btn svg{width:24px}` (0,1,1) would shrink the ring → use a more specific selector so it fills the 50px button */
.htn-fb-top .htn-fb-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.htn-fb-ring circle { fill: none; }
.htn-fb-ring-track { stroke: var(--border); stroke-width: 2.5; }
.htn-fb-ring-prog { stroke: var(--htn-blue-600); stroke-width: 2.5; stroke-linecap: round; transition: stroke-dashoffset .12s linear; }
[data-theme="dark"] .htn-fb-ring-prog { stroke: var(--htn-cyan-400); }
.htn-fb-up { position: relative; z-index: 1; }
/* Pulse halo (attention ripple) behind contact buttons — staggered, subtle */
.htn-fb-phone::after, .htn-fb-zalo::after, .htn-fb-telegram::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  z-index: -1; pointer-events: none;
  animation: htnPulse 2.4s var(--ease) infinite;
}
.htn-fb-phone::after { background: #16A34A; }
.htn-fb-zalo::after { background: #0068FF; animation-delay: .5s; }
.htn-fb-telegram::after { background: #229ED9; animation-delay: 1s; }
@keyframes htnPulse {
  0% { transform: scale(1); opacity: .42; }
  70% { opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .htn-fb-phone::after, .htn-fb-zalo::after, .htn-fb-telegram::after { animation: none; display: none; }
}
@media (max-width: 600px) {
  .htn-float { right: 24px; bottom: 38px; gap: 11px; }
  .htn-float-btn { width: 46px; height: 46px; }
  .htn-float-btn svg { width: 22px; height: 22px; }
  .htn-float-btn::before { display: none; }
}

/* ---------------------------------------------------------------
   15. CTA BANNER
   --------------------------------------------------------------- */
.cta-banner {
  position: relative; overflow: hidden;
  background: var(--gradient-brand);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: clamp(40px, 5vw, 72px);
  text-align: center;
}
.cta-banner::before {
  content:''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 20% 0, rgba(255,255,255,.25), transparent 50%),
              radial-gradient(ellipse at 80% 100%, rgba(255,255,255,.15), transparent 50%);
  pointer-events: none;
}
.cta-banner h2 { color: #fff; font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: 12px; position: relative; }
.cta-banner p { color: rgba(255,255,255,.85); font-size: 1.125rem; max-width: 560px; margin: 0 auto 24px; position: relative; }
.cta-banner .btn-primary { background: #fff; color: var(--htn-blue-700); box-shadow: 0 4px 14px rgba(0,0,0,.15); position: relative; }
.cta-banner .btn-primary:hover { background: #fff; color: var(--htn-blue-900); }
.cta-banner .btn-ghost { color: #fff; border: 1px solid rgba(255,255,255,.5); position: relative; }
.cta-banner .btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; }

/* ---------------------------------------------------------------
   16. SIDEBAR (cart filter)
   --------------------------------------------------------------- */
.layout-sidebar { display: grid; grid-template-columns: 260px 1fr; gap: 32px; }
@media (max-width: 900px) { .layout-sidebar { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .layout-sidebar { gap: 24px; }
  .sidebar-group { margin-bottom: 16px; }
}

.sidebar-group { margin-bottom: 24px; }
.sidebar-group h4 { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 10px; }
.sidebar-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.sidebar-list a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: var(--radius-sm); font-size: .9375rem;
  color: var(--text-soft);
}
.sidebar-list a:hover { background: var(--bg-subtle); color: var(--text); }
.sidebar-list a.active {
  background: var(--gradient-brand-soft); color: var(--htn-blue-700); font-weight: 600;
}
[data-theme="dark"] .sidebar-list a.active { color: var(--htn-cyan-300); }
.sidebar-list .count { margin-left: auto; font-size: .75rem; color: var(--text-muted); }

/* ---------------------------------------------------------------
   17. LOGIN / AUTH
   --------------------------------------------------------------- */
.auth-screen {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 40px 20px;
  background: var(--bg);
  position: relative; overflow: hidden;
}
.auth-screen::before {
  content:''; position: absolute; inset: 0;
  background: var(--gradient-hero);
  pointer-events: none;
}
.auth-card {
  position: relative; width: 100%; max-width: 440px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 40px;
  box-shadow: var(--shadow-lg);
}
.auth-card .logo { justify-content: center; margin-bottom: 28px; }
.auth-card h1 { text-align: center; margin-bottom: 8px; font-size: 1.5rem; }
.auth-card .sub { text-align: center; color: var(--text-muted); margin-bottom: 28px; font-size: .9375rem; }
.auth-card .form-group { margin-bottom: 16px; }
.auth-card .form-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.auth-card .divider {
  display: flex; align-items: center; gap: 12px;
  margin: 24px 0; color: var(--text-muted); font-size: .8125rem;
}
.auth-card .divider::before, .auth-card .divider::after {
  content:''; flex: 1; height: 1px; background: var(--border);
}
.auth-footer { text-align: center; font-size: .875rem; color: var(--text-muted); margin-top: 20px; }

/* ---------------------------------------------------------------
   18. BREADCRUMB
   --------------------------------------------------------------- */
.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: .875rem; color: var(--text-muted);
  margin-bottom: 16px;
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb-sep { color: var(--border-strong); }

/* ---------------------------------------------------------------
   19. SPLASH / LOGO LOADER (homepage first-visit)
   --------------------------------------------------------------- */
.splash {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bg);
  display: grid; place-items: center;
  gap: 0;
  opacity: 1;
  animation: splashFadeOut .5s ease-in 1.2s forwards;
  will-change: opacity;
}
.splash::before {
  content: ''; position: absolute; inset: 0;
  background: var(--gradient-hero);
  opacity: .6;
}
.splash-inner {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.splash-logo-wrap {
  position: relative; width: 112px; height: 112px;
  animation: splashLogoIn .9s cubic-bezier(.22,.8,.3,1.2) both;
}
.splash-logo-wrap img {
  width: 100%; height: 100%; border-radius: 50%;
  filter: drop-shadow(0 0 32px rgba(46,184,222,.45));
}
.splash-ring {
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: conic-gradient(from 0deg, transparent 0 40%, #4DD0E8 45%, #1E8BDE 60%, transparent 70% 100%);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 59%);
  mask: radial-gradient(circle, transparent 58%, #000 59%);
  animation: splashRingSpin 1.3s linear infinite;
}
.splash-brand {
  font-family: var(--font-heading); font-weight: 800; font-size: 1.25rem;
  color: var(--text); letter-spacing: -.01em;
  animation: splashTextIn .7s ease-out .2s both;
}
.splash-tagline {
  font-size: .8125rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase;
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: splashTextIn .7s ease-out .35s both;
}
@keyframes splashLogoIn {
  0% { transform: scale(.55) rotate(-12deg); opacity: 0; }
  60% { transform: scale(1.06) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
@keyframes splashTextIn {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes splashRingSpin { to { transform: rotate(360deg); } }
@keyframes splashFadeOut {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .splash { animation-delay: .3s; animation-duration: .25s; }
  .splash-logo-wrap, .splash-brand, .splash-tagline { animation: none; }
  .splash-ring { animation: none; display: none; }
}

/* ---------------------------------------------------------------
   20. SUBPAGE (service-detail template)
   --------------------------------------------------------------- */
.subpage-hero {
  position: relative; overflow: hidden;
  padding: clamp(64px, 7vw, 112px) 0 clamp(48px, 5vw, 80px);
  background: var(--gradient-hero), var(--bg);
  text-align: center;
}
.subpage-hero .container { position: relative; }
.subpage-hero .kicker { color: var(--htn-cyan-500); }
.subpage-hero h1 { max-width: 18ch; margin: 12px auto 0; overflow-wrap: break-word; hyphens: auto; }
.subpage-hero .lead { max-width: 60ch; margin: 16px auto 28px; overflow-wrap: break-word; }
@media (max-width: 600px) {
  .subpage-hero h1 { max-width: 100%; text-wrap: pretty; word-break: keep-all; }
  .subpage-hero .lead { max-width: 100%; font-size: .9375rem; }
  .subpage-hero { padding: 32px 0 28px !important; }
  .subpage-hero .breadcrumb { font-size: .75rem; flex-wrap: wrap; }
}

.feature-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) { .feature-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .feature-grid-4 { grid-template-columns: 1fr; } }
.feature-stat {
  text-align: center;
  padding: 24px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.feature-stat-num {
  font-family: var(--font-heading); font-size: clamp(1.75rem, 2.5vw, 2.25rem);
  font-weight: 800;
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1;
}
.feature-stat-label { font-size: .875rem; color: var(--text-muted); margin-top: 6px; }

.step-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: step; }
@media (max-width: 900px) { .step-list { grid-template-columns: 1fr; } }
.step-item {
  position: relative;
  padding: 28px 24px 24px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.step-item::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute; top: -16px; left: 24px;
  width: 40px; height: 40px;
  background: var(--gradient-brand);
  color: #fff;
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 700; font-size: .9375rem;
  box-shadow: 0 4px 12px rgba(14,109,196,.3);
}

.usecase-card {
  padding: 24px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: all var(--dur) var(--ease);
}
.usecase-card:hover { transform: translateY(-3px); border-color: var(--htn-cyan-500); box-shadow: var(--shadow-md); }

/* progressive pricing table (CDN, GA, etc.) */
.pricing-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-family: var(--font-body);
}
.pricing-table thead th {
  background: var(--bg-alt);
  padding: 14px 20px;
  text-align: left;
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.pricing-table thead th.num { text-align: right; }
.pricing-table tbody td {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  font-size: .9375rem;
  color: var(--text-soft);
}
.pricing-table tbody tr:first-child td { border-top: none; }
.pricing-table tbody tr:hover { background: var(--bg-alt); }
.pricing-table td.num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
}
.pricing-table .tier-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: .8125rem;
}
@media (max-width: 600px) {
  .pricing-table thead th:last-child, .pricing-table tbody td:last-child { display: none; }
}

.usecase-card .usecase-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: var(--gradient-brand-soft);
  color: var(--htn-blue-600);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
[data-theme="dark"] .usecase-card .usecase-icon { color: var(--htn-cyan-400); }

/* ---------------------------------------------------------------
   21. STYLE GUIDE helpers
   --------------------------------------------------------------- */
.sg-section { padding: 48px 0; border-bottom: 1px solid var(--border); }
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.sg-swatch {
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}
.sg-swatch-color { height: 72px; }
.sg-swatch-info { padding: 10px 12px; font-family: var(--font-mono); font-size: .75rem; }
.sg-swatch-info b { display: block; font-family: var(--font-body); font-weight: 600; font-size: .8125rem; color: var(--text); margin-bottom: 2px; }
.sg-swatch-info span { color: var(--text-muted); }

.sg-label {
  display: inline-block; padding: 2px 8px;
  background: var(--bg-subtle); color: var(--text-muted);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono); font-size: .6875rem;
  margin-left: 8px;
}

.preview-nav {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 24px 0;
}

/* ---------------------------------------------------------------
   22. LAGOM AUTH PAGES (login, register, password reset)
   Lagom DOM: .login > .login-wrapper > .login-body > .login-title + .login-form,
              .login > .login-wrapper > .login-footer
   We restyle into an HTN auth card with hero background.
   --------------------------------------------------------------- */
body.htn-skinned.page-login,
body.htn-skinned.page-register,
body.htn-skinned.page-password-reset,
body.htn-skinned.page-password-reset-validation {
  background:
    radial-gradient(ellipse at 18% 22%, rgba(77,208,232,.20), transparent 55%),
    radial-gradient(ellipse at 82% 78%, rgba(14,109,196,.18), transparent 55%),
    linear-gradient(180deg, #F6F9FC 0%, #ECF2F8 100%) !important;
  position: relative;
  min-height: 100vh;
}
/* subtle grid pattern overlay on auth pages */
body.htn-skinned.page-login::before,
body.htn-skinned.page-register::before,
body.htn-skinned.page-password-reset::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(46,184,222,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,184,222,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

body.htn-skinned .app-main { position: relative; z-index: 1; }
body.htn-skinned.page-login .main-body,
body.htn-skinned.page-register .main-body,
body.htn-skinned.page-password-reset .main-body {
  display: flex; align-items: center; justify-content: center;
  padding: 48px 16px 64px;
  min-height: calc(100vh - var(--header-h) - 320px);
}

/* Auth card */
body.htn-skinned .login,
body.htn-skinned .registration {
  width: 100%; max-width: 460px; margin: 0 auto;
}
body.htn-skinned .login-wrapper,
body.htn-skinned .registration-wrapper {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: hidden;
  position: relative;
}
/* Top gradient bar on the card */
body.htn-skinned .login-wrapper::before,
body.htn-skinned .registration-wrapper::before {
  content: ""; display: block; height: 4px;
  background: var(--gradient-brand);
}
body.htn-skinned .login-body,
body.htn-skinned .registration-body {
  padding: 36px 36px 24px !important;
  background: transparent !important;
}
/* Logo above title */
body.htn-skinned .login-body::before {
  content: "";
  display: block;
  width: 56px; height: 56px;
  margin: 0 auto 18px;
  background-image: url('/templates/lagom2/assets/img/logo/htn-logo.png');
  background-size: contain; background-repeat: no-repeat; background-position: center;
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(46,184,222,.28);
}
body.htn-skinned .login-title {
  font-family: var(--font-heading) !important;
  font-size: 1.625rem !important;
  font-weight: 700 !important;
  text-align: center;
  margin: 0 0 6px !important;
  color: var(--text) !important;
  letter-spacing: -.01em;
}
/* Subtitle injected via ::after on the title */
body.htn-skinned .login-title::after {
  content: "Đăng nhập để quản lý dịch vụ và hoá đơn của bạn.";
  display: block;
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.5;
}
body.htn-skinned.page-register .login-title::after,
body.htn-skinned.page-clientregister .login-title::after,
body.htn-skinned.register-page .login-title::after,
body.htn-skinned .registration-title::after {
  content: none !important;
  display: none !important;
}
body.htn-skinned.page-password-reset .login-title::after {
  content: "Nhập email để nhận liên kết đặt lại mật khẩu.";
}

/* Form spacing */
body.htn-skinned .login-form { margin-top: 22px; }
body.htn-skinned .login-form .form-group { margin-bottom: 16px; }
body.htn-skinned .login-form .form-group label,
body.htn-skinned .registration-body .form-group > label {
  font-size: .875rem !important;
  font-weight: 500 !important;
  color: var(--text-soft) !important;
  margin-bottom: 6px;
  display: block;
}
body.htn-skinned .login-form .form-group .d-flex.space-between {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;
}
body.htn-skinned .login-form .form-group .d-flex.space-between label { margin-bottom: 0 !important; }
body.htn-skinned .login-form .form-group .d-flex.space-between a {
  font-size: .8125rem; font-weight: 500; color: var(--htn-blue-600); text-decoration: none;
}
body.htn-skinned .login-form .form-group .d-flex.space-between a:hover { color: var(--htn-blue-700); text-decoration: underline; }

/* Inputs in auth */
body.htn-skinned .login-form .form-control.input-lg,
body.htn-skinned .registration .form-control,
body.htn-skinned .registration .form-control.input-lg {
  height: 46px !important;
  padding: 12px 14px !important;
  font-size: .9375rem !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border-strong) !important;
  background: #FFFFFF !important;
  color: var(--text) !important;
  box-shadow: none !important;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease) !important;
}
body.htn-skinned .login-form .form-control.input-lg:focus,
body.htn-skinned .registration .form-control:focus {
  outline: none !important;
  border-color: var(--htn-cyan-500) !important;
  box-shadow: 0 0 0 3px rgba(46,184,222,.22) !important;
}

/* Remember-me checkbox */
body.htn-skinned .login-form .checkbox.m-b-2x {
  display: inline-flex !important; align-items: center; gap: 8px;
  font-size: .875rem; color: var(--text-soft); cursor: pointer;
  padding-left: 0 !important;
  margin-bottom: 18px !important;
}
body.htn-skinned .login-form .checkbox.m-b-2x input,
body.htn-skinned .login-form input[type="checkbox"].icheck-control {
  accent-color: var(--htn-blue-600) !important;
  width: 16px !important; height: 16px !important;
  margin: 0 !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
  position: static !important;
  opacity: 1 !important;
}

/* Primary CTA button */
body.htn-skinned .login-form .btn.btn-primary,
body.htn-skinned .login-form button[type="submit"].btn-primary {
  background: var(--gradient-brand) !important;
  border: none !important;
  color: #fff !important;
  height: 48px !important;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  letter-spacing: .01em;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 6px 18px rgba(14,109,196,.32) !important;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease) !important;
  position: relative;
  overflow: hidden;
}
body.htn-skinned .login-form .btn.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(14,109,196,.4) !important;
  filter: brightness(1.05);
}
body.htn-skinned .login-form .btn.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(14,109,196,.3) !important;
}
body.htn-skinned .login-form .btn.btn-primary .btn-text { color: #fff !important; }

/* Captcha (hide if empty) */
body.htn-skinned .login-form .login-captcha:empty { display: none !important; }
body.htn-skinned .login-form .login-captcha { margin-bottom: 12px; }

/* Footer of auth card */
body.htn-skinned .login-footer {
  background: var(--bg-alt) !important;
  border-top: 1px solid var(--border) !important;
  padding: 18px 36px !important;
  text-align: center;
  font-size: .875rem;
  color: var(--text-soft) !important;
}
body.htn-skinned .login-footer .text-light {
  color: var(--text-soft) !important;
}
body.htn-skinned .login-footer a {
  color: var(--htn-blue-600) !important;
  font-weight: 600;
  text-decoration: none;
}
body.htn-skinned .login-footer a:hover {
  color: var(--htn-blue-700) !important;
  text-decoration: underline;
}

/* Trust strip below auth card (CSS-injected) */
body.htn-skinned.page-login .login::after,
body.htn-skinned.page-register .registration::after {
  content: "🔒  Kết nối được mã hoá SSL  ·  ⏱ Hỗ trợ 24/7  ·  ☎ 0792 04 04 04";
  display: block;
  margin-top: 22px;
  text-align: center;
  font-size: .8125rem;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: .01em;
}

/* Dark theme tweaks for auth */
[data-theme="dark"] body.htn-skinned.page-login,
[data-theme="dark"] body.htn-skinned.page-register,
[data-theme="dark"] body.htn-skinned.page-password-reset {
  background:
    radial-gradient(ellipse at 18% 22%, rgba(77,208,232,.18), transparent 55%),
    radial-gradient(ellipse at 82% 78%, rgba(9,79,160,.4), transparent 55%),
    linear-gradient(180deg, #0A1628 0%, #062E6A 100%) !important;
}
[data-theme="dark"] body.htn-skinned .login-wrapper,
[data-theme="dark"] body.htn-skinned .registration-wrapper {
  background: #14253F !important;
  border-color: #1E3252 !important;
}
[data-theme="dark"] body.htn-skinned .login-title { color: #F5F9FF !important; }
[data-theme="dark"] body.htn-skinned .login-form .form-control.input-lg {
  background: #0F1E35 !important;
  border-color: #2A4570 !important;
  color: #F5F9FF !important;
}
[data-theme="dark"] body.htn-skinned .login-footer {
  background: #0F1E35 !important;
  border-top-color: #1E3252 !important;
}

/* Responsive */
@media (max-width: 520px) {
  body.htn-skinned.page-login .main-body,
  body.htn-skinned.page-register .main-body,
  body.htn-skinned.page-password-reset .main-body {
    padding: 24px 12px 40px;
  }
  body.htn-skinned .login-body,
  body.htn-skinned .registration-body { padding: 28px 22px 18px !important; }
  body.htn-skinned .login-footer { padding: 16px 22px !important; }
  body.htn-skinned .login-title { font-size: 1.375rem !important; }
}

/* ---------------------------------------------------------------
   23. SHARED LAGOM SKIN (dashboard, store, contact, etc.)
   --------------------------------------------------------------- */

/* Page header titles */
body.htn-skinned .main-header-title,
body.htn-skinned .main-header h1,
body.htn-skinned h1.main-header-title {
  font-family: var(--font-heading) !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  letter-spacing: -.01em;
  margin: 0 0 6px !important;
  line-height: 1.2;
}
body.htn-skinned .main-header,
body.htn-skinned .breadcrumb-wrapper {
  background: transparent !important;
  border: none !important;
  padding: 24px 0 8px !important;
  margin: 0 !important;
  box-shadow: none !important;
}
body.htn-skinned .breadcrumb,
body.htn-skinned .main-header .breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin: 2px 0 0 !important;
  font-size: .875rem;
  color: var(--text-muted) !important;
}
body.htn-skinned .breadcrumb a { color: var(--htn-blue-600) !important; text-decoration: none; }
body.htn-skinned .breadcrumb a:hover { color: var(--htn-blue-700) !important; }
body.htn-skinned .breadcrumb > li + li::before { color: var(--text-muted) !important; opacity: .6; }

/* Container spacing for inner pages */
body.htn-skinned .app-main .container,
body.htn-skinned .main-body > .container { padding-top: 0 !important; padding-bottom: 32px !important; }
body.htn-skinned .main-body { padding-top: 0 !important; }
body.htn-skinned .main-content { padding-top: 0 !important; }
body.htn-skinned .main-grid { margin-top: 8px !important; }

/* ---------------------------------------------------------------
   24. PANELS (used in clientarea + sidebars across the app)
   --------------------------------------------------------------- */
body.htn-skinned .panel,
body.htn-skinned .panel-default,
body.htn-skinned .panel-sidebar,
body.htn-skinned .panel-lagom {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: 12px !important;
  overflow: hidden;
}
body.htn-skinned .row { margin-left: -6px !important; margin-right: -6px !important; }
body.htn-skinned .row > [class*="col-"] { padding-left: 6px !important; padding-right: 6px !important; }
body.htn-skinned .row.row-eq-height-sm,
body.htn-skinned .row.row-eq-height { row-gap: 12px !important; }
body.htn-skinned .panel-heading {
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 14px 20px !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}
body.htn-skinned .panel-heading .panel-title,
body.htn-skinned .panel-title,
body.htn-skinned h3.panel-title,
body.htn-skinned .panel-heading h3 {
  font-family: var(--font-heading) !important;
  font-size: .9375rem !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin: 0 !important;
  display: flex; align-items: center; gap: 8px;
  letter-spacing: 0;
  text-transform: none;
}
body.htn-skinned .panel-title i,
body.htn-skinned .panel-heading i:first-child { color: var(--htn-blue-600); font-size: .9375rem; }
body.htn-skinned .panel-minimise { color: var(--text-muted) !important; font-size: .75rem !important; opacity: .6; }
body.htn-skinned .panel-body { padding: 18px 20px !important; background: transparent !important; color: var(--text-soft) !important; }
body.htn-skinned .panel-footer {
  background: var(--bg-alt) !important;
  border-top: 1px solid var(--border) !important;
  padding: 14px 20px !important;
}

/* ---------------------------------------------------------------
   25. DASHBOARD TILES (.tiles > .tile + .tile-stat + .tile-title)
   --------------------------------------------------------------- */
body.htn-skinned .tiles,
body.htn-skinned .tiles.swiper-container { margin: 8px 0 24px !important; padding: 0 !important; }
body.htn-skinned .tiles .row.swiper-wrapper { display: flex !important; flex-wrap: wrap; margin: 0 -8px; gap: 0; }
body.htn-skinned .tiles .col-md-3.swiper-slide { padding: 0 8px; margin-bottom: 16px; flex: 1 1 25%; max-width: 25%; }
@media (max-width: 991px) { body.htn-skinned .tiles .col-md-3.swiper-slide { flex: 1 1 50%; max-width: 50%; } }
@media (max-width: 575px) { body.htn-skinned .tiles .col-md-3.swiper-slide { flex: 1 1 100%; max-width: 100%; } }

body.htn-skinned .tile {
  display: block !important;
  position: relative;
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 22px 20px 20px !important;
  text-decoration: none !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease) !important;
  overflow: hidden;
  min-height: 130px;
}
body.htn-skinned .tile::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--gradient-brand);
  opacity: .9;
}
body.htn-skinned .tile:hover {
  transform: translateY(-2px);
  border-color: var(--htn-cyan-500) !important;
  box-shadow: 0 12px 28px rgba(14,109,196,.15) !important;
  text-decoration: none !important;
}
body.htn-skinned .tile-icon-absolute {
  position: absolute; top: 18px; right: 18px;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--gradient-brand-soft);
  color: var(--htn-blue-600);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.125rem;
}
body.htn-skinned .tile-stat {
  font-family: var(--font-heading) !important;
  font-variant-numeric: tabular-nums;
  font-size: 2.625rem !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  color: var(--text) !important;
  margin: 4px 0 6px !important;
  letter-spacing: -.02em;
}
body.htn-skinned .tile.tile-danger .tile-stat,
body.htn-skinned .tile-stat.text-danger,
body.htn-skinned .tile-stat.text-warning {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
body.htn-skinned .tile-title {
  font-size: .875rem !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ---------------------------------------------------------------
   26. SIDEBAR — client details / categories / list-group
   --------------------------------------------------------------- */
body.htn-skinned .panel-client-details .panel-body { padding: 18px 20px !important; }
body.htn-skinned .panel-client-details strong,
body.htn-skinned .panel-client-details .client-name {
  display: block; font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 600;
  color: var(--text) !important; margin-bottom: 4px;
}
body.htn-skinned .panel-client-details address,
body.htn-skinned .panel-client-details .client-address {
  font-style: normal; font-size: .875rem; color: var(--text-soft) !important; line-height: 1.55;
  margin: 0;
}
body.htn-skinned .panel-footer .btn-success.btn-block {
  background: var(--gradient-brand) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: var(--radius-sm) !important;
  height: 38px; padding: 8px 14px !important;
  box-shadow: 0 4px 12px rgba(14,109,196,.2) !important;
}
body.htn-skinned .panel-footer .btn-success.btn-block:hover { filter: brightness(1.05); }
body.htn-skinned .panel-footer .btn-outline.btn-block,
body.htn-skinned .panel-footer .btn.btn-default.btn-block {
  background: #FFFFFF !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-soft) !important;
  font-weight: 500 !important;
  border-radius: var(--radius-sm) !important;
  height: 38px; padding: 8px 14px !important;
}
body.htn-skinned .panel-footer .btn-outline.btn-block:hover { border-color: var(--htn-cyan-500) !important; color: var(--htn-blue-700) !important; background: var(--bg-alt) !important; }

/* List group for category sidebar */
body.htn-skinned .list-group {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
}
body.htn-skinned .list-group-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 11px 20px !important;
  color: var(--text-soft) !important;
  font-size: .9375rem;
  font-weight: 500;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
body.htn-skinned .list-group-item:last-child { border-bottom: none !important; }
body.htn-skinned .list-group-item i { color: var(--text-muted); margin-right: 8px; }
body.htn-skinned .list-group-item:hover {
  background: var(--bg-alt) !important;
  color: var(--htn-blue-700) !important;
  text-decoration: none;
}
body.htn-skinned .list-group-item:hover i { color: var(--htn-blue-600); }
body.htn-skinned .list-group-item.active,
body.htn-skinned .list-group-item.active:hover {
  background: var(--gradient-brand-soft) !important;
  color: var(--htn-blue-700) !important;
  font-weight: 600;
  position: relative;
}
body.htn-skinned .list-group-item.active::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--gradient-brand);
}
body.htn-skinned .list-group-item.active i { color: var(--htn-blue-600) !important; }

/* Quick links panel (sidebar-secondary text-style links) */
body.htn-skinned .sidebar-secondary .panel-body a,
body.htn-skinned .panel.panel-sidebar .panel-body ul li a {
  color: var(--text-soft) !important;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 0;
  font-size: .9375rem;
}
body.htn-skinned .sidebar-secondary .panel-body a:hover,
body.htn-skinned .panel.panel-sidebar .panel-body ul li a:hover { color: var(--htn-blue-700) !important; }

/* ---------------------------------------------------------------
   27. ALERTS / NOTIFICATIONS
   --------------------------------------------------------------- */
body.htn-skinned .alert {
  border-radius: var(--radius) !important;
  border: 1px solid var(--border) !important;
  padding: 14px 18px !important;
  font-size: .9375rem;
  background: #FFFFFF !important;
  color: var(--text-soft) !important;
  box-shadow: var(--shadow-sm) !important;
}
body.htn-skinned .alert-warning,
body.htn-skinned .alert.alert-warning {
  background: #FEF7E6 !important;
  border-color: #F5C97A !important;
  color: #8A5A00 !important;
}
body.htn-skinned .alert-warning a { color: #6B4500 !important; font-weight: 600; }
body.htn-skinned .alert-success { background: #E8FBF1 !important; border-color: #6CCF96 !important; color: #0E6B3D !important; }
body.htn-skinned .alert-danger  { background: #FCEAEA !important; border-color: #F08080 !important; color: #9F1A1A !important; }
body.htn-skinned .alert-info    { background: #EAF4FE !important; border-color: #7DBDF7 !important; color: #0E4D8E !important; }
body.htn-skinned .alert .close,
body.htn-skinned .alert .alert-action a { color: inherit !important; opacity: .7; }
body.htn-skinned .alert .close:hover { opacity: 1; }

/* ---------------------------------------------------------------
   28. STORE / PRODUCT CARDS (.package on /store/...)
   --------------------------------------------------------------- */
body.htn-skinned .row.row-eq-height-sm,
body.htn-skinned .order-products .row { display: flex !important; flex-wrap: wrap; }
body.htn-skinned .row.row-eq-height-sm > .col,
body.htn-skinned .row.row-eq-height-sm > [class*="col-"] { display: flex; padding: 12px; }

body.htn-skinned .package {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  display: flex !important;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  position: relative;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
body.htn-skinned .package::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--gradient-brand);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
body.htn-skinned .package:hover {
  transform: translateY(-3px);
  border-color: var(--htn-cyan-500) !important;
  box-shadow: var(--shadow-md) !important;
}
body.htn-skinned .package:hover::before { opacity: 1; }

/* Package header (product name) */
body.htn-skinned .package-header {
  padding: 20px 22px 0 !important;
  background: transparent !important;
}
body.htn-skinned .package-header h2,
body.htn-skinned .package-header h3,
body.htn-skinned .package-header .package-name,
body.htn-skinned .package-name {
  font-family: var(--font-heading) !important;
  font-size: 1.1875rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin: 0 0 12px !important;
  letter-spacing: -.01em;
  line-height: 1.3;
}

/* Package body / specs */
body.htn-skinned .package-body { padding: 0 22px 16px !important; flex: 1; }
body.htn-skinned .package-content {
  font-size: .9375rem !important;
  line-height: 1.7 !important;
  color: var(--text-soft) !important;
}
body.htn-skinned .package-content p { margin: 0 0 6px !important; color: var(--text-soft) !important; }
body.htn-skinned .package-content strong,
body.htn-skinned .package-content b {
  display: inline-block;
  min-width: 130px;
  color: var(--text) !important;
  font-weight: 600 !important;
}
body.htn-skinned .package-content br + strong,
body.htn-skinned .package-content p > strong:first-child { margin-top: 2px; }

/* Package side layout */
body.htn-skinned .package-side { padding: 0 !important; background: transparent !important; }
body.htn-skinned .package-side-left { flex: 1; }
body.htn-skinned .package-side-right,
body.htn-skinned .package-footer {
  border-top: 1px solid var(--border) !important;
  background: var(--bg-alt) !important;
  padding: 18px 22px !important;
  display: flex !important;
  flex-direction: column;
  gap: 12px;
}

/* Package price */
body.htn-skinned .package-price { display: flex; flex-direction: column; gap: 2px; }
body.htn-skinned .package-price .price { display: flex; flex-direction: column; gap: 2px; }
body.htn-skinned .price-starting-from {
  font-size: .75rem !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase;
  letter-spacing: .05em;
}
body.htn-skinned .price-amount,
body.htn-skinned .price .price-amount {
  font-family: var(--font-heading) !important;
  font-variant-numeric: tabular-nums;
  font-size: 1.625rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  letter-spacing: -.01em;
  line-height: 1.1 !important;
  margin: 0 !important;
}
body.htn-skinned .price-cycle {
  font-size: .8125rem !important;
  color: var(--text-muted) !important;
  font-weight: 500;
}

/* Order Now button */
body.htn-skinned .btn-order-now,
body.htn-skinned a.btn.btn-primary.btn-order-now,
body.htn-skinned .package-footer .btn.btn-primary,
body.htn-skinned .package-footer a.btn.btn-primary {
  background: var(--gradient-brand) !important;
  border: none !important;
  color: #fff !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  font-size: .9375rem !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 4px 14px rgba(14,109,196,.25) !important;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease) !important;
  width: 100%;
  text-decoration: none !important;
}
body.htn-skinned .btn-order-now:hover {
  transform: translateY(-1px); filter: brightness(1.05);
  box-shadow: 0 8px 22px rgba(14,109,196,.32) !important;
  color: #fff !important;
}
body.htn-skinned .package-qty {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8125rem !important;
  color: var(--text-muted) !important;
  font-weight: 500;
}
body.htn-skinned .package-qty::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
}

/* Mobile: stack price/footer below */
@media (max-width: 991px) {
  body.htn-skinned .package-footer.package-side-right { width: 100% !important; }
}

/* ---------------------------------------------------------------
   29. CART SIDEBAR / ORDER SUMMARY
   --------------------------------------------------------------- */
body.htn-skinned .panel-summary,
body.htn-skinned .order-summary {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}
body.htn-skinned .summary-title,
body.htn-skinned .summary-total .summary-total-amount {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}
body.htn-skinned .summary-total-amount { font-size: 1.5rem !important; color: var(--htn-blue-700) !important; }

/* ---------------------------------------------------------------
   30. CONTACT / REGISTRATION FORMS
   --------------------------------------------------------------- */
body.htn-skinned .registration-body,
body.htn-skinned .form-body,
body.htn-skinned .contact-body {
  background: transparent !important;
}
body.htn-skinned .form-control {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border-strong) !important;
  background: #FFFFFF !important;
  color: var(--text) !important;
  height: 42px;
  padding: 9px 14px;
  font-size: .9375rem;
  box-shadow: none !important;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease) !important;
}
body.htn-skinned textarea.form-control { height: auto; min-height: 110px; }
body.htn-skinned .form-control:focus {
  outline: none !important;
  border-color: var(--htn-cyan-500) !important;
  box-shadow: 0 0 0 3px rgba(46,184,222,.2) !important;
}

/* ---------------------------------------------------------------
   31. BUTTONS — global skin
   --------------------------------------------------------------- */
body.htn-skinned .btn {
  font-family: var(--font-heading) !important;
  font-weight: 500;
  border-radius: var(--radius-sm) !important;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease) !important;
}
body.htn-skinned .btn-primary,
body.htn-skinned a.btn-primary {
  background: var(--gradient-brand) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(14,109,196,.22) !important;
}
body.htn-skinned .btn-primary:hover,
body.htn-skinned a.btn-primary:hover {
  filter: brightness(1.05); transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(14,109,196,.3) !important;
  color: #fff !important;
}
body.htn-skinned .btn-default,
body.htn-skinned .btn-secondary {
  background: #FFFFFF !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-soft) !important;
}
body.htn-skinned .btn-default:hover,
body.htn-skinned .btn-secondary:hover {
  border-color: var(--htn-cyan-500) !important; color: var(--htn-blue-700) !important; background: var(--bg-alt) !important;
}
body.htn-skinned .btn-success {
  background: var(--success) !important; border: none !important; color: #fff !important;
}
body.htn-skinned .btn-danger {
  background: var(--danger) !important; border: none !important; color: #fff !important;
}

/* ---------------------------------------------------------------
   32. TABLES (invoices, services list, etc.)
   --------------------------------------------------------------- */
body.htn-skinned .table,
body.htn-skinned table.table {
  background: #FFFFFF !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  border: 1px solid var(--border) !important;
}
body.htn-skinned .table thead th,
body.htn-skinned table.table thead th {
  background: var(--bg-alt) !important;
  color: var(--text) !important;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  font-size: .8125rem !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--border) !important;
  padding: 12px 14px !important;
}
body.htn-skinned .table tbody td,
body.htn-skinned table.table tbody td {
  background: #FFFFFF !important;
  color: var(--text-soft) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 12px 14px !important;
  font-size: .9375rem;
}
body.htn-skinned .table tbody tr:hover td { background: var(--bg-alt) !important; }
body.htn-skinned .table tbody tr:last-child td { border-bottom: none !important; }

/* Status badges */
body.htn-skinned .label,
body.htn-skinned .badge {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  border-radius: var(--radius-pill) !important;
  padding: 4px 10px !important;
  font-size: .75rem !important;
  letter-spacing: .02em;
}
body.htn-skinned .label-success, body.htn-skinned .badge-success { background: var(--success-bg) !important; color: var(--success) !important; }
body.htn-skinned .label-warning, body.htn-skinned .badge-warning { background: var(--warning-bg) !important; color: var(--warning) !important; }
body.htn-skinned .label-danger,  body.htn-skinned .badge-danger  { background: var(--danger-bg)  !important; color: var(--danger)  !important; }
body.htn-skinned .label-info,    body.htn-skinned .badge-info    { background: var(--info-bg)    !important; color: var(--info)    !important; }

/* Numeric / currency cells */
body.htn-skinned .text-currency,
body.htn-skinned td.text-currency,
body.htn-skinned td.amount,
body.htn-skinned td.text-right {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono) !important;
}

/* ---------------------------------------------------------------
   33. CART STEPPER / VIEW CART LAYOUT
   --------------------------------------------------------------- */
body.htn-skinned .order-step .step-number,
body.htn-skinned .progress-tracker .progtrckr-done .progtrckr-em,
body.htn-skinned .order-progress-bar {
  background: var(--gradient-brand) !important;
  color: #fff !important;
}
body.htn-skinned .panel-body .form-horizontal .control-label { color: var(--text-soft) !important; }

/* ---------------------------------------------------------------
   34. MODAL / DROPDOWN LIGHT THEME
   --------------------------------------------------------------- */
body.htn-skinned .modal-content,
body.htn-skinned .dropdown-menu {
  background: #FFFFFF !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
}
body.htn-skinned .modal-header,
body.htn-skinned .modal-footer { border-color: var(--border) !important; }
body.htn-skinned .modal-title { font-family: var(--font-heading); font-weight: 700; color: var(--text); }

/* Hide Lagom built-in dark mode toggle floating button (we have our own) */
body.htn-skinned .lagom-mode-toggle,
body.htn-skinned [data-lagom-color-mode-switch],
body.htn-skinned .floating-mode-toggle { display: none !important; }

/* ---------------------------------------------------------------
   35. FLOATING NOTIFICATION BAR (cookie/policy banner) — restyle
   --------------------------------------------------------------- */
body.htn-skinned.floating-notification .floating-notification-content,
body.htn-skinned .floating-notification-bar {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--text-soft) !important;
}

/* ---------------------------------------------------------------
   36. MAIN GRID LAYOUT (sidebar + content)
   --------------------------------------------------------------- */
body.htn-skinned .main-grid { display: grid !important; grid-template-columns: 260px 1fr !important; gap: 16px; align-items: start; }
@media (max-width: 991px) { body.htn-skinned .main-grid { grid-template-columns: 1fr !important; gap: 12px; } }
body.htn-skinned .main-sidebar { padding: 0 !important; background: transparent !important; }
body.htn-skinned .main-sidebar .sidebar-sticky { position: sticky; top: 96px; }

/* ---------------------------------------------------------------
   37. FOOTER OF LAGOM (usually hidden but force-clean if visible)
   --------------------------------------------------------------- */
body.htn-skinned .main-footer:not(.htn-footer-wrap .main-footer),
body.htn-skinned .main-footer-extended { display: none !important; }

/* ===============================================================
   38. LAYOUT FIXES (v41+) — Container, main-grid, main-content
   =============================================================== */
/* Wider container for HTN dashboard pages */
body.htn-skinned .container,
body.htn-skinned .app-main .container,
body.htn-skinned .main-body > .container {
  max-width: 1480px !important;
  width: 100% !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}

/* Override Lagom .main-content max-width hack */
body.htn-skinned .main-content,
body.htn-skinned .main-content.status-icons-enabled {
  max-width: 100% !important;
  min-width: 0 !important;
  width: auto !important;
  flex: 1 1 0% !important;
}

/* Refine main-grid for invoice/services/dashboard pages — Lagom uses .sidebar-primary not just .main-sidebar */
body.htn-skinned .main-grid {
  display: grid !important;
  grid-template-columns: 280px minmax(0, 1fr) !important;
  gap: 20px !important;
  align-items: start;
}
@media (max-width: 991px) { body.htn-skinned .main-grid { grid-template-columns: 1fr !important; } }
body.htn-skinned .sidebar-primary,
body.htn-skinned .main-sidebar {
  padding: 0 !important;
  background: transparent !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden;
}
body.htn-skinned .sidebar-secondary { padding: 0 !important; background: transparent !important; max-width: 100%; box-sizing: border-box; }
body.htn-skinned .main-content {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden;
}

/* Body must NOT be display:flex (Lagom default) — break our layout */
body.htn-skinned { display: block !important; }
body.htn-skinned .app-main {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;       /* Lagom layout-left injects margin-left:140px */
  position: relative !important;
  left: 0 !important;
}
body.htn-skinned .main-body { width: 100% !important; max-width: 100% !important; margin: 0 !important; }

/* ===============================================================
   39. PANEL-SUMMARY — Due amount card on invoices page
   =============================================================== */
body.htn-skinned .panel-summary,
body.htn-skinned .panel-summary-primary {
  background: linear-gradient(135deg, #FFFFFF 0%, #F6FBFF 100%) !important;
  border: 1px solid var(--htn-cyan-400) !important;
  border-radius: var(--radius-lg) !important;
  padding: 22px !important;
  box-shadow: 0 6px 20px rgba(46,184,222,.12) !important;
  position: relative;
  overflow: hidden;
}
body.htn-skinned .panel-summary::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--gradient-brand);
}
body.htn-skinned .panel-summary .price-title,
body.htn-skinned .panel-summary .summary-title,
body.htn-skinned .panel-summary > p:first-of-type {
  display: block;
  font-family: var(--font-body) !important;
  font-size: .8125rem !important;
  font-weight: 500 !important;
  color: var(--text-soft) !important;
  margin: 0 0 10px !important;
  line-height: 1.5;
  letter-spacing: 0;
}
body.htn-skinned .panel-summary .price,
body.htn-skinned .panel-summary > .h2,
body.htn-skinned .panel-summary > h2 {
  font-family: var(--font-heading) !important;
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--htn-blue-700) !important;
  letter-spacing: -.02em;
  line-height: 1.15 !important;
  margin: 0 0 14px !important;
  display: block;
  white-space: nowrap;
}
body.htn-skinned .panel-summary .price-amount,
body.htn-skinned .panel-summary .summary-amount {
  display: inline-block;
  font-family: var(--font-heading) !important;
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: -.02em;
  white-space: nowrap;
  background: linear-gradient(135deg, #1E8BDE 0%, #094FA0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  margin-top: 4px;
}
body.htn-skinned .panel-summary .price-title { white-space: normal; }
body.htn-skinned .panel-summary .btn,
body.htn-skinned .panel-summary a.btn {
  width: 100%;
  background: var(--gradient-brand) !important;
  color: #fff !important;
  border: none !important;
  height: 44px;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 4px 14px rgba(14,109,196,.28) !important;
}

/* Generic low-contrast text overrides on dashboard */
body.htn-skinned .text-light:not(.btn),
body.htn-skinned span.text-light,
body.htn-skinned .text-muted-strong { color: var(--text-soft) !important; }

/* ===============================================================
   40. DATATABLES — search, length select, pagination, sort headers
   =============================================================== */
body.htn-skinned .dataTables_wrapper { padding: 4px 0 0; color: var(--text-soft); }
body.htn-skinned .dataTables_length,
body.htn-skinned .dataTables_filter {
  margin-bottom: 14px;
}
body.htn-skinned .dataTables_length label,
body.htn-skinned .dataTables_filter label {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-size: .875rem;
  color: var(--text-soft) !important;
  margin: 0;
  font-weight: 500;
}
/* Force search input visible width */
body.htn-skinned .dataTables_filter input[type="search"],
body.htn-skinned .dataTables_filter input.form-control,
body.htn-skinned .dataTables_filter input.form-control-sm {
  height: 38px !important;
  width: 240px !important;
  min-width: 200px !important;
  padding: 8px 12px !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-sm) !important;
  background: #FFFFFF !important;
  color: var(--text) !important;
  font-size: .9375rem !important;
  display: inline-block !important;
}
body.htn-skinned .dataTables_filter input[type="search"]:focus {
  outline: none !important;
  border-color: var(--htn-cyan-500) !important;
  box-shadow: 0 0 0 3px rgba(46,184,222,.2) !important;
}
body.htn-skinned .dataTables_filter input[type="search"]::placeholder { color: var(--text-muted); }
body.htn-skinned .dataTables_filter input[type="search"]:placeholder-shown::before {
  content: "Tìm kiếm…";
}

/* custom-select / select width */
body.htn-skinned .dataTables_length select,
body.htn-skinned select.custom-select,
body.htn-skinned select.custom-select-sm,
body.htn-skinned select.form-control-sm {
  height: 38px !important;
  width: auto !important;
  min-width: 80px !important;
  padding: 6px 30px 6px 12px !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-sm) !important;
  background: #FFFFFF url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7B90' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 10px center !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  font-size: .875rem !important;
  color: var(--text) !important;
  display: inline-block !important;
}

/* DataTables top controls layout (length + search) on same row */
body.htn-skinned .dataTables_wrapper > .row:first-of-type,
body.htn-skinned .dataTables_wrapper .row:has(> .dataTables_length),
body.htn-skinned .dt-controls {
  display: flex !important; align-items: center; justify-content: space-between;
  margin-bottom: 14px !important;
  flex-wrap: wrap; gap: 12px;
}

/* Sort headers */
body.htn-skinned .table thead th.sorting,
body.htn-skinned .table thead th.sorting_asc,
body.htn-skinned .table thead th.sorting_desc {
  cursor: pointer;
  position: relative;
  padding-right: 28px !important;
  user-select: none;
}
body.htn-skinned .table thead th.sorting > button,
body.htn-skinned .table thead th button.dt-column-title,
body.htn-skinned .table thead th button {
  background: transparent !important;
  border: none !important;
  color: inherit !important;
  font-weight: 600 !important;
  font-family: var(--font-heading) !important;
  font-size: inherit !important;
  text-transform: inherit !important;
  letter-spacing: inherit !important;
  padding: 0 !important;
  text-align: left;
  width: 100%;
  cursor: pointer;
  height: auto !important;
  box-shadow: none !important;
  display: block;
}
body.htn-skinned .table thead th.sorting::after,
body.htn-skinned .table thead th.sorting_asc::after,
body.htn-skinned .table thead th.sorting_desc::after {
  content: "";
  position: absolute;
  right: 10px; top: 50%;
  width: 10px; height: 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7B90' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='8 9 12 5 16 9'/><polyline points='8 15 12 19 16 15'/></svg>") no-repeat center / contain;
  transform: translateY(-50%);
  opacity: .5;
}
body.htn-skinned .table thead th.sorting_asc::after {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E6DC4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 15 12 9 18 15'/></svg>") no-repeat center / contain;
  opacity: 1;
}
body.htn-skinned .table thead th.sorting_desc::after {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E6DC4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat center / contain;
  opacity: 1;
}

/* Pagination */
body.htn-skinned .dataTables_paginate .paginate_button,
body.htn-skinned .pagination .page-item .page-link {
  background: #FFFFFF !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-soft) !important;
  border-radius: var(--radius-sm) !important;
  padding: 6px 12px !important;
  margin: 0 2px;
  font-size: .875rem;
  cursor: pointer;
  text-decoration: none;
}
body.htn-skinned .dataTables_paginate .paginate_button:hover,
body.htn-skinned .pagination .page-item .page-link:hover {
  border-color: var(--htn-cyan-500) !important;
  color: var(--htn-blue-700) !important;
  background: var(--bg-alt) !important;
}
body.htn-skinned .dataTables_paginate .paginate_button.current,
body.htn-skinned .dataTables_paginate .paginate_button.active,
body.htn-skinned .pagination .page-item.active .page-link {
  background: var(--gradient-brand) !important;
  border-color: transparent !important;
  color: #fff !important;
}
body.htn-skinned .dataTables_info { color: var(--text-muted) !important; font-size: .8125rem; }

/* ===============================================================
   41. STATUS BADGES (.status, .status-icon, status-{type})
   =============================================================== */
body.htn-skinned .status {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 4px 12px !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: .8125rem !important;
  line-height: 1.2;
  white-space: nowrap;
  background: var(--bg-subtle) !important;
  color: var(--text-soft) !important;
}
body.htn-skinned .status .status-icon,
body.htn-skinned .status > svg,
body.htn-skinned .status .status-icon svg {
  width: 14px !important; height: 14px !important;
  display: inline-flex; align-items: center;
  flex-shrink: 0;
}
body.htn-skinned .status .status-icon svg path,
body.htn-skinned .status > svg path { stroke: currentColor !important; fill: currentColor !important; }
body.htn-skinned .status-paid,
body.htn-skinned .status-active,
body.htn-skinned .status-completed,
body.htn-skinned .status-success {
  background: var(--success-bg) !important; color: var(--success) !important;
}
body.htn-skinned .status-unpaid,
body.htn-skinned .status-overdue,
body.htn-skinned .status-failed,
body.htn-skinned .status-suspended,
body.htn-skinned .status-danger {
  background: var(--danger-bg) !important; color: var(--danger) !important;
}
body.htn-skinned .status-pending,
body.htn-skinned .status-warning {
  background: var(--warning-bg) !important; color: #92400E !important;
}
body.htn-skinned .status-cancelled,
body.htn-skinned .status-refunded,
body.htn-skinned .status-collections {
  background: #EEF2F6 !important;
  color: #6B7B90 !important;
}
body.htn-skinned tr.invoice-status-cancelled,
body.htn-skinned tr.invoice-cancelled td { color: var(--text-muted) !important; }
body.htn-skinned tr.invoice-status-cancelled td:not(.text-nowrap) { opacity: .85; }

/* ===============================================================
   42. CART / VIEW CART — order summary widget
   =============================================================== */
body.htn-skinned .cart-summary,
body.htn-skinned .cart-content {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 22px;
}

/* ===============================================================
   43. SERVICES / DOMAINS list cards (clientarea services)
   =============================================================== */
body.htn-skinned .product-info,
body.htn-skinned .order-info,
body.htn-skinned .service-card {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 18px;
  margin-bottom: 14px;
}

/* ===============================================================
   44. INVOICE DETAIL — items table + total
   =============================================================== */
body.htn-skinned .invoice-table th { background: var(--bg-alt) !important; }
body.htn-skinned .invoice-totals,
body.htn-skinned .invoice-balance {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums;
}

/* ===============================================================
   45. LAGOM "table-controls" row spacing fix
   =============================================================== */
body.htn-skinned .table-container { padding: 0; }
body.htn-skinned .table-controls,
body.htn-skinned .listtable {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 18px 20px !important;
  overflow-x: auto;
}
body.htn-skinned .listtable .table { border: none !important; }
body.htn-skinned .listtable .table thead th { background: transparent !important; border-top: none !important; }
body.htn-skinned .listtable .table tbody tr:last-child td { border-bottom: none !important; }

/* ===============================================================
   46. PAGE-LEVEL TOP SEARCH (search-field in main-header)
   =============================================================== */
body.htn-skinned .main-header .search-field {
  position: relative;
  max-width: 280px;
}
body.htn-skinned .main-header .search-field input.form-control,
body.htn-skinned .main-header #table-search {
  height: 42px !important;
  padding: 8px 14px 8px 38px !important;
  border-radius: var(--radius-pill) !important;
  border: 1px solid var(--border-strong) !important;
  background: #FFFFFF !important;
  color: var(--text) !important;
  font-size: .9375rem !important;
  box-shadow: var(--shadow-sm) !important;
}
body.htn-skinned .main-header .search-field input.form-control:focus {
  outline: none !important;
  border-color: var(--htn-cyan-500) !important;
  box-shadow: 0 0 0 3px rgba(46,184,222,.18) !important;
}
body.htn-skinned .main-header .search-field input.form-control::placeholder {
  color: var(--text-muted); font-weight: 500;
}
body.htn-skinned .main-header .search-field .search-field-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  pointer-events: none;
  font-size: 1rem;
}

/* Move main-header layout into proper grid */
body.htn-skinned .main-header {
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
body.htn-skinned .main-header > .main-header-title-wrap,
body.htn-skinned .main-header > div:first-child { min-width: 0; flex: 1; }
body.htn-skinned .main-header > .search-field,
body.htn-skinned .main-header > .header-search {
  flex: 0 0 auto;
  margin-top: 8px;
}

/* ===============================================================
   47. NESTED ROW.row-eq-height-sm gap fix on dashboard panels
   =============================================================== */
body.htn-skinned .row-eq-height-sm > [class*="col-"] { display: flex; }
body.htn-skinned .row-eq-height-sm > [class*="col-"] > .panel { width: 100%; }

/* ===============================================================
   48. HTN CLIENT-AREA LEFT RAIL (.htn-clientnav) — v2 narrow + flyout
   Source of truth = Lagom $primaryNavbar DOM (parsed by htn-custom.js).
   Narrow icon-only rail. Hover → flyout panel shows submenu.
   =============================================================== */
:root {
  --htn-rail-w: 84px;
  --htn-rail-w-open: 84px;
  --htn-flyout-w: 320px;
}

.htn-clientnav {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--htn-rail-w);
  z-index: 120;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(77,208,232,.08), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #EEF4FB 100%);
  border-right: 1px solid var(--border);
  box-shadow: 2px 0 16px rgba(12,23,38,.06);
  display: flex; flex-direction: column;
  padding-top: 0;
  overflow: visible;
}
.htn-clientnav-brand {
  display: flex; align-items: center; justify-content: center;
  padding: 14px 0;
  text-decoration: none !important;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
  min-height: var(--header-h, 68px);
  box-sizing: border-box;
  position: relative;
}
.htn-clientnav-brand::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px;
  background: var(--gradient-brand); border-radius: 2px; opacity: .9;
}
.htn-clientnav-brand img { width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto; }
.htn-clientnav-brand span { display: none; } /* Narrow rail: only logo icon, no wordmark */
.htn-clientnav-inner {
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 12px 10px 14px;
  /* overflow MUST be visible so flyout panels (absolute-positioned to right)
     are not clipped. Browsers coerce any non-visible overflow on ONE axis to
     non-visible on BOTH — we'd lose the horizontal flyout. The rail has at most
     5-6 items (fits any reasonable viewport height), so no scroll is needed. */
  overflow: visible;
  flex: 1;
  min-height: 0;
}
.htn-clientnav-item-wrap { position: relative; }
.htn-clientnav-spacer { flex: 1; }
.htn-clientnav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 10px 6px;
  border-radius: 12px;
  text-decoration: none !important;
  color: var(--text-soft);
  font-family: var(--font-heading);
  font-size: .6875rem;
  font-weight: 500;
  position: relative;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  line-height: 1.25;
  text-align: center;
}
.htn-clientnav-item:hover,
.htn-clientnav-item-wrap.flyout-open > .htn-clientnav-item {
  background: var(--gradient-brand-soft);
  color: var(--htn-blue-700);
}
.htn-clientnav-item:hover .htn-clientnav-icon,
.htn-clientnav-item-wrap.flyout-open > .htn-clientnav-item .htn-clientnav-icon { color: var(--htn-blue-600); }
.htn-clientnav-item.is-active {
  background: var(--gradient-brand-soft);
  color: var(--htn-blue-700);
  font-weight: 600;
}
.htn-clientnav-item.is-active::before {
  content: ""; position: absolute; left: -10px; top: 10px; bottom: 10px;
  width: 3px; border-radius: 2px;
  background: var(--gradient-brand);
}
.htn-clientnav-item.is-active .htn-clientnav-icon { color: var(--htn-blue-600); }
.htn-clientnav-icon {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}
.htn-clientnav-icon svg { width: 22px; height: 22px; }
.htn-clientnav-icon i { font-size: 20px; line-height: 1; }
.htn-clientnav-label {
  font-size: .6875rem;
  letter-spacing: 0;
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
  hyphens: auto;
}
.htn-clientnav-badge {
  position: absolute; top: 6px; right: 6px;
  background: var(--gradient-brand);
  color: #fff;
  font-size: .625rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  line-height: 1.4;
}
.htn-clientnav-logout { margin-top: 12px; color: var(--danger); }

/* Flyout panel — appears to the right of the rail on hover */
.htn-flyout {
  position: absolute;
  left: calc(100% + 8px);
  top: 0;
  width: var(--htn-flyout-w);
  max-height: 80vh;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 48px rgba(12,23,38,.14), 0 4px 12px rgba(12,23,38,.08);
  opacity: 0; visibility: hidden;
  transform: translateX(-6px);
  transition: opacity 160ms var(--ease), transform 160ms var(--ease), visibility 0s linear 160ms;
  z-index: 130;
  overflow: hidden;
}
.htn-clientnav-item-wrap.flyout-open > .htn-flyout,
.htn-clientnav-item-wrap.has-flyout:hover > .htn-flyout {
  opacity: 1; visibility: visible;
  transform: translateX(0);
  transition: opacity 160ms var(--ease), transform 160ms var(--ease), visibility 0s;
}
/* Invisible bridge so hover doesn't drop when cursor crosses gap */
.htn-flyout::before {
  content: ""; position: absolute; left: -12px; top: 0; bottom: 0; width: 12px;
}
.htn-flyout-inner { padding: 14px 14px 16px; max-height: 80vh; overflow-y: auto; }
.htn-flyout-header {
  font-family: var(--font-heading);
  font-size: .8125rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--htn-blue-700);
  padding: 4px 6px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.htn-flyout-group-title {
  font-family: var(--font-heading);
  font-size: .6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted);
  padding: 12px 6px 6px;
}
.htn-flyout-items { display: flex; flex-direction: column; gap: 1px; }
.htn-flyout-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 10px;
  border-radius: 10px;
  text-decoration: none !important;
  color: var(--text);
  font-family: var(--font-heading);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.htn-flyout-item:hover { background: var(--gradient-brand-soft); color: var(--htn-blue-700); }
.htn-flyout-item.is-active { background: var(--gradient-brand-soft); color: var(--htn-blue-700); }
.htn-flyout-item > i,
.htn-flyout-item > svg {
  flex: 0 0 20px; width: 20px; height: 20px; color: var(--htn-blue-600);
  font-size: 18px; line-height: 1; margin-top: 2px;
}
.htn-flyout-bullet {
  flex: 0 0 6px; width: 6px; height: 6px; margin-top: 8px;
  border-radius: 50%; background: var(--htn-blue-400, #6EA8E8);
}
.htn-flyout-item-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.htn-flyout-item-title { font-size: .875rem; font-weight: 600; line-height: 1.3; }
.htn-flyout-item-desc { font-size: .75rem; color: var(--text-muted); line-height: 1.35; }

.htn-clientnav-logout:hover { background: rgba(239,68,68,.08); color: var(--danger); }
.htn-clientnav-logout:hover .htn-clientnav-icon { color: var(--danger); }
.htn-clientnav-logout .htn-clientnav-icon { color: var(--danger); }

/* Touch devices: rail becomes bottom bar, groups + titles + badges hidden */
@media (max-width: 991px) {
  .htn-clientnav {
    width: 100%;
    height: 60px;
    top: auto; bottom: 0;
    padding-top: 0;
    border-right: none;
    border-top: 1px solid var(--border);
    flex-direction: row;
  }
  .htn-clientnav-brand { display: none; }
  .htn-clientnav-inner {
    flex-direction: row;
    padding: 6px 8px;
    gap: 2px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .htn-clientnav-item-wrap { flex: 1; min-width: 64px; }
  .htn-clientnav-badge { display: none; }
  .htn-clientnav-spacer { display: none; }
  .htn-flyout { display: none; } /* Mobile: no flyout, tap = navigate */
  .htn-clientnav-item {
    flex-direction: column;
    gap: 4px;
    padding: 6px 8px;
    flex: 1; min-width: 64px;
    align-items: center;
    justify-content: center;
    font-size: .6875rem;
  }
  .htn-clientnav-icon { width: 22px; height: 22px; flex: 0 0 auto; }
  .htn-clientnav-icon svg { width: 20px; height: 20px; }
  .htn-clientnav-label { opacity: 1; transform: none; font-size: .6875rem; line-height: 1; }
  .htn-clientnav-item.is-active::before { left: 50%; top: 0; bottom: auto; width: 24px; height: 3px; transform: translateX(-50%); }
  .htn-clientnav-logout { display: none; }
}

/* When clientarea is active, push content right */
@media (min-width: 992px) {
  body.htn-clientarea .htn-header-wrap,
  body.htn-clientarea .app-main,
  body.htn-clientarea .htn-footer-wrap { padding-left: var(--htn-rail-w); }
  /* Adapt container so rail-pushed content still fits viewport */
  body.htn-clientarea .container,
  body.htn-clientarea .app-main .container,
  body.htn-clientarea .main-body > .container,
  body.htn-clientarea .htn-header-wrap .container,
  body.htn-clientarea .htn-footer-wrap .container {
    max-width: calc(1480px - var(--htn-rail-w)) !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  /* When viewport is wide enough that 1480 fits without rail offset, keep margin auto */
  @media (min-width: 1772px) {
    body.htn-clientarea .container,
    body.htn-clientarea .app-main .container,
    body.htn-clientarea .main-body > .container,
    body.htn-clientarea .htn-header-wrap .container,
    body.htn-clientarea .htn-footer-wrap .container { margin-left: auto !important; }
  }
}
@media (max-width: 991px) {
  body.htn-clientarea .app-main { padding-bottom: 60px; }
}

/* ===============================================================
   49. DARK MODE — html[data-theme="dark"] body.htn-skinned overrides
   =============================================================== */
html[data-theme="dark"] body.htn-skinned {
  --body-bg: #0A1628 !important;
  --content-bg: #14253F !important;
  --card-bg: #14253F !important;
  --text-color: #F5F9FF !important;
  --text-color-base: #F5F9FF !important;
  --text-color-secondary: #C6D4E8 !important;
  --heading-color: #F5F9FF !important;
  --border-color: #1E3252 !important;
  --input-bg: #0F1E35 !important;
  --input-color: #F5F9FF !important;
  --input-border: #2A4570 !important;
  background: linear-gradient(180deg, #0A1628 0%, #0F1E35 100%) !important;
  color: #F5F9FF !important;
}
html[data-theme="dark"] body.htn-skinned h1,
html[data-theme="dark"] body.htn-skinned h2,
html[data-theme="dark"] body.htn-skinned h3,
html[data-theme="dark"] body.htn-skinned h4,
html[data-theme="dark"] body.htn-skinned h5,
html[data-theme="dark"] body.htn-skinned h6,
html[data-theme="dark"] body.htn-skinned p,
html[data-theme="dark"] body.htn-skinned label,
html[data-theme="dark"] body.htn-skinned .form-group label,
html[data-theme="dark"] body.htn-skinned .control-label,
html[data-theme="dark"] body.htn-skinned .main-header-title { color: #F5F9FF !important; }
html[data-theme="dark"] body.htn-skinned ::placeholder { color: #8CA0BD !important; }

/* Dark mode panels */
html[data-theme="dark"] body.htn-skinned .panel,
html[data-theme="dark"] body.htn-skinned .panel-default,
html[data-theme="dark"] body.htn-skinned .panel-sidebar,
html[data-theme="dark"] body.htn-skinned .panel-lagom,
html[data-theme="dark"] body.htn-skinned .listtable,
html[data-theme="dark"] body.htn-skinned .table-controls,
html[data-theme="dark"] body.htn-skinned .login-wrapper,
html[data-theme="dark"] body.htn-skinned .registration-wrapper,
html[data-theme="dark"] body.htn-skinned .modal-content,
html[data-theme="dark"] body.htn-skinned .dropdown-menu,
html[data-theme="dark"] body.htn-skinned .package,
html[data-theme="dark"] body.htn-skinned .tile {
  background: #14253F !important;
  border-color: #1E3252 !important;
  color: #F5F9FF !important;
}
html[data-theme="dark"] body.htn-skinned .panel-heading,
html[data-theme="dark"] body.htn-skinned .login-body,
html[data-theme="dark"] body.htn-skinned .package-header { background: #14253F !important; border-bottom-color: #1E3252 !important; }
html[data-theme="dark"] body.htn-skinned .panel-heading .panel-title,
html[data-theme="dark"] body.htn-skinned .panel-title,
html[data-theme="dark"] body.htn-skinned h3.panel-title,
html[data-theme="dark"] body.htn-skinned .panel-client-details strong,
html[data-theme="dark"] body.htn-skinned .login-title,
html[data-theme="dark"] body.htn-skinned .package-name,
html[data-theme="dark"] body.htn-skinned .price-amount,
html[data-theme="dark"] body.htn-skinned .tile-stat { color: #F5F9FF !important; }
html[data-theme="dark"] body.htn-skinned .panel-body,
html[data-theme="dark"] body.htn-skinned .panel-client-details address,
html[data-theme="dark"] body.htn-skinned .package-content { color: #C6D4E8 !important; }
html[data-theme="dark"] body.htn-skinned .panel-footer { background: #0F1E35 !important; border-top-color: #1E3252 !important; }
html[data-theme="dark"] body.htn-skinned .login-footer { background: #0F1E35 !important; border-top-color: #1E3252 !important; }
html[data-theme="dark"] body.htn-skinned .login-footer .text-light { color: #C6D4E8 !important; }
html[data-theme="dark"] body.htn-skinned .panel-summary {
  background: linear-gradient(135deg, #14253F 0%, #0F1E35 100%) !important;
  border-color: var(--htn-cyan-500) !important;
}

/* Dark mode list-group */
html[data-theme="dark"] body.htn-skinned .list-group-item {
  background: transparent !important;
  border-bottom-color: #1E3252 !important;
  color: #C6D4E8 !important;
}
html[data-theme="dark"] body.htn-skinned .list-group-item:hover {
  background: rgba(46,184,222,.08) !important;
  color: #F5F9FF !important;
}
html[data-theme="dark"] body.htn-skinned .list-group-item.active {
  background: linear-gradient(135deg, rgba(77,208,232,.18) 0%, rgba(14,109,196,.12) 100%) !important;
  color: #F5F9FF !important;
}
html[data-theme="dark"] body.htn-skinned .list-group-item.active i { color: var(--htn-cyan-400) !important; }

/* Dark mode forms */
html[data-theme="dark"] body.htn-skinned .form-control,
html[data-theme="dark"] body.htn-skinned input[type="text"],
html[data-theme="dark"] body.htn-skinned input[type="email"],
html[data-theme="dark"] body.htn-skinned input[type="password"],
html[data-theme="dark"] body.htn-skinned input[type="search"],
html[data-theme="dark"] body.htn-skinned select,
html[data-theme="dark"] body.htn-skinned textarea,
html[data-theme="dark"] body.htn-skinned .login-form .form-control.input-lg {
  background: #0F1E35 !important;
  border-color: #2A4570 !important;
  color: #F5F9FF !important;
}
html[data-theme="dark"] body.htn-skinned .form-control:focus {
  border-color: var(--htn-cyan-500) !important;
  box-shadow: 0 0 0 3px rgba(77,208,232,.22) !important;
}
html[data-theme="dark"] body.htn-skinned .main-header .search-field input.form-control {
  background: rgba(20,37,63,.85) !important;
  border-color: #2A4570 !important;
  color: #F5F9FF !important;
}

/* Dark mode tables */
html[data-theme="dark"] body.htn-skinned .table thead th {
  background: #0F1E35 !important; color: #F5F9FF !important; border-bottom-color: #1E3252 !important;
}
html[data-theme="dark"] body.htn-skinned .table tbody td {
  background: #14253F !important; color: #C6D4E8 !important; border-bottom-color: #1E3252 !important;
}
html[data-theme="dark"] body.htn-skinned .table tbody tr:hover td { background: #1A2D4A !important; }

/* Dark mode alerts */
html[data-theme="dark"] body.htn-skinned .alert-warning {
  background: rgba(245,158,11,.14) !important; border-color: rgba(245,158,11,.4) !important; color: #FCD34D !important;
}
html[data-theme="dark"] body.htn-skinned .alert-success {
  background: rgba(16,185,129,.14) !important; border-color: rgba(16,185,129,.4) !important; color: #6EE7B7 !important;
}
html[data-theme="dark"] body.htn-skinned .alert-danger {
  background: rgba(239,68,68,.14) !important; border-color: rgba(239,68,68,.4) !important; color: #FCA5A5 !important;
}
html[data-theme="dark"] body.htn-skinned .alert-info {
  background: rgba(59,130,246,.14) !important; border-color: rgba(59,130,246,.4) !important; color: #93C5FD !important;
}

/* Dark mode auth pages background */
html[data-theme="dark"] body.htn-skinned.page-login,
html[data-theme="dark"] body.htn-skinned.page-register,
html[data-theme="dark"] body.htn-skinned.page-password-reset {
  background:
    radial-gradient(ellipse at 18% 22%, rgba(77,208,232,.18), transparent 55%),
    radial-gradient(ellipse at 82% 78%, rgba(9,79,160,.4), transparent 55%),
    linear-gradient(180deg, #0A1628 0%, #062E6A 100%) !important;
}

/* Dark mode left rail */
html[data-theme="dark"] .htn-clientnav {
  background: linear-gradient(180deg, #0F1E35 0%, #0A1628 100%);
  border-right-color: #1E3252;
  box-shadow: 2px 0 12px rgba(0,0,0,.3);
}
html[data-theme="dark"] .htn-clientnav-item { color: #C6D4E8; }
html[data-theme="dark"] .htn-clientnav-item:hover,
html[data-theme="dark"] .htn-clientnav-item.is-active {
  background: linear-gradient(135deg, rgba(77,208,232,.18), rgba(14,109,196,.12));
  color: #F5F9FF;
}
html[data-theme="dark"] .htn-clientnav-icon { color: #8CA0BD; }
html[data-theme="dark"] .htn-clientnav-item:hover .htn-clientnav-icon,
html[data-theme="dark"] .htn-clientnav-item.is-active .htn-clientnav-icon { color: var(--htn-cyan-400); }
html[data-theme="dark"] .htn-clientnav-brand { border-bottom-color: #1E3252; }

/* Dark mode flyout */
html[data-theme="dark"] .htn-flyout {
  background: #14253F;
  border-color: #1E3252;
  box-shadow: 0 24px 48px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.3);
}
html[data-theme="dark"] .htn-flyout-header { color: var(--htn-cyan-300, #7FDFF0); border-bottom-color: #1E3252; }
html[data-theme="dark"] .htn-flyout-group-title { color: #8CA0BD; }
html[data-theme="dark"] .htn-flyout-item { color: #F5F9FF; }
html[data-theme="dark"] .htn-flyout-item:hover,
html[data-theme="dark"] .htn-flyout-item.is-active {
  background: linear-gradient(135deg, rgba(77,208,232,.18), rgba(14,109,196,.12));
  color: #F5F9FF;
}
html[data-theme="dark"] .htn-flyout-item-desc { color: #8CA0BD; }
html[data-theme="dark"] .htn-flyout-item > i,
html[data-theme="dark"] .htn-flyout-item > svg { color: var(--htn-cyan-400); }

/* Dark mode breadcrumb */
html[data-theme="dark"] body.htn-skinned .breadcrumb,
html[data-theme="dark"] body.htn-skinned .breadcrumb a { color: #8CA0BD !important; }
html[data-theme="dark"] body.htn-skinned .breadcrumb a { color: var(--htn-cyan-400) !important; }
html[data-theme="dark"] body.htn-skinned .breadcrumb > li + li::before { color: #8CA0BD !important; }

/* Dark mode generic text */
html[data-theme="dark"] body.htn-skinned .text-muted,
html[data-theme="dark"] body.htn-skinned .text-light,
html[data-theme="dark"] body.htn-skinned .tile-title,
html[data-theme="dark"] body.htn-skinned .price-cycle,
html[data-theme="dark"] body.htn-skinned .package-qty,
html[data-theme="dark"] body.htn-skinned .price-starting-from { color: #8CA0BD !important; }

/* Dark mode pagination */
html[data-theme="dark"] body.htn-skinned .dataTables_paginate .paginate_button,
html[data-theme="dark"] body.htn-skinned .pagination .page-item .page-link {
  background: #0F1E35 !important; border-color: #2A4570 !important; color: #C6D4E8 !important;
}
html[data-theme="dark"] body.htn-skinned .dataTables_info { color: #8CA0BD !important; }

/* ===============================================================
   49-b. Keep Lagom per-page sidebar visible (primarySidebar contains
   context panels like invoice alerts, service shortcuts, etc).
   The HTN rail replaces ONLY Lagom's main navbar (.app-nav), which
   is already removed by JS. Main-sidebar is left untouched.
   =============================================================== */

/* ===============================================================
   50. CLIENTAREA SLIM HEADER (no marketing nav)
   =============================================================== */
/* [HTN 2026-04-23 session 5] disabled — keep Datacenter/Cloud/GPU dropdowns on clientarea */
/* .htn-header-clientarea .nav { display: none !important; } */
.htn-header-clientarea .header-inner { justify-content: space-between; }
/* Logo moved into rail — hide duplicate in header */
body.htn-clientnav-active .htn-header-clientarea .logo { display: none !important; }
body.htn-clientnav-active .htn-header-clientarea .header-inner { justify-content: flex-end; }

.htn-header-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  color: var(--text-soft);
  text-decoration: none !important;
  background: transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  position: relative;
}
.htn-header-icon-btn:hover {
  background: var(--gradient-brand-soft);
  color: var(--htn-blue-700);
}

.htn-user-dropdown {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 6px;
  border-radius: var(--radius-pill);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  text-decoration: none !important;
  color: var(--text);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: .875rem;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.htn-user-dropdown:hover {
  border-color: var(--htn-cyan-500);
  background: var(--bg);
}
.htn-user-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #fff;
  font-weight: 700; font-size: .8125rem;
  flex-shrink: 0;
}
.htn-user-name {
  max-width: 160px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 640px) {
  .htn-user-name { display: none; }
  .htn-user-dropdown { padding: 4px; border-radius: 50%; }
  .htn-user-dropdown svg:last-child { display: none; }
}

/* Dark mode slim header */
html[data-theme="dark"] .htn-header-icon-btn { color: #C6D4E8; }
html[data-theme="dark"] .htn-header-icon-btn:hover { background: rgba(46,184,222,.12); color: #F5F9FF; }
html[data-theme="dark"] .htn-user-dropdown {
  background: rgba(20,37,63,.6); border-color: #1E3252; color: #F5F9FF;
}
html[data-theme="dark"] .htn-user-dropdown:hover {
  border-color: var(--htn-cyan-400); background: rgba(20,37,63,.8);
}

/* Custom-select dark */
html[data-theme="dark"] body.htn-skinned select.custom-select,
html[data-theme="dark"] body.htn-skinned .dataTables_length select {
  background-color: #0F1E35 !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238CA0BD' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  border-color: #2A4570 !important;
  color: #F5F9FF !important;
}



/* ---------------------------------------------------------------
   61. HTN FIXES 2026-04-23 (session 5)
   - Phone input flag overlap (intl-tel-input / iti)
   - Lagom account sidebar active state contrast
   --------------------------------------------------------------- */
/* Classic intl-tel-input (Lagom) — restore input padding-left.
   Lagom theme.css sets `padding-left: 106px` on .intl-tel-input input but our
   own `.form-control { padding: 9px 14px }` (section 30, line ~1961) wipes it,
   causing the flag/dial-code overlay to sit on top of the number digits. */
body.htn-skinned .intl-tel-input input,
body.htn-skinned .intl-tel-input input[type="tel"],
body.htn-skinned .intl-tel-input input[type="text"],
body.htn-skinned .intl-tel-input input.form-control {
  padding-left: 106px !important;
}
body.htn-skinned .intl-tel-input .iti-arrow {
  border-top-color: var(--text-muted) !important;
  opacity: .7;
}
body.htn-skinned .intl-tel-input .selected-flag { transition: background-color var(--dur) var(--ease); }
body.htn-skinned .intl-tel-input.allow-dropdown .flag-container:hover .selected-flag {
  background-color: var(--bg-subtle) !important;
}
/* Keep phone input on same baseline/height as neighbour email input */
body.htn-skinned .intl-tel-input input.form-control { height: 42px !important; }
body.htn-skinned .intl-tel-input.separate-dial-code .selected-dial-code {
  padding-top: 0 !important;
  vertical-align: middle !important;
}

/* ---------------------------------------------------------------
   62. CLIENTAREA SECTION SPACING (compact cards)
   Root cause (confirmed via DevTools Apr 23): Lagom's .section has
   `padding: 96px 0` (huge vertical padding PER section → ~192px wasted).
   Zap the padding and use small margin-top for gap.
   --------------------------------------------------------------- */
body.htn-skinned:not(.page-htn-landing) .section {
  padding: 0 !important;
  margin-top: 20px !important;
}
body.htn-skinned:not(.page-htn-landing) .section:first-child { margin-top: 0 !important; }
/* Landing pages keep preview-design's generous section padding */
body.htn-skinned.page-htn-landing .section {
  padding: clamp(48px, 5vw, 84px) 0 !important;
}
body.htn-skinned.page-htn-landing .section + .section {
  border-top: 1px solid var(--border);
}
/* UI audit fixes 2026-05-27 */
/* CMS pages (gioi-thieu / phap-ly): some strong + inactive sidebar nav links
   inherit white (meant for dark sections) so they vanish in light mode.
   Use :not([data-theme="dark"]) NOT [data-theme="light"] — CMS pages have NO
   data-theme attribute by default (only landing static pages hardcode light),
   so a light-only selector misses the default state and the text stays white.
   :not(dark) covers default + explicit light; dark keeps white. */
html:not([data-theme="dark"]) body.htn-skinned .section-content strong,
html:not([data-theme="dark"]) body.htn-skinned .section-desc strong {
  color: var(--htn-blue-700) !important;
}
html:not([data-theme="dark"]) body.htn-skinned .nav-legal .nav-link {
  color: #2D3E52 !important; /* literal — section redefines --text-soft to white */
}
html:not([data-theme="dark"]) body.htn-skinned .nav-legal .nav-link.active,
html:not([data-theme="dark"]) body.htn-skinned .nav-legal .nav-link:hover {
  color: var(--htn-blue-700) !important;
}
/* Lagom CMS "feature-stat" counters (e.g. gioi-thieu 15+/500+/99%/200Gbps):
   Lagom's count-up sets these to inline opacity:0 then reveals on scroll, but
   that reveal never fires on htn-skinned CMS pages so the big stat numbers stay
   invisible in BOTH themes. Force visible (CSS !important beats inline opacity). */
body.htn-skinned .feature-stat { opacity: 1 !important; }
/* Single pricing card stranded in a 3-col grid (e.g. storage): center it */
body.page-htn-landing .grid-3 > .service-card:only-child {
  grid-column: 1 / -1 !important; justify-self: center !important; max-width: 460px; width: 100%;
}
body.htn-skinned .section-header { margin-bottom: 10px !important; }
body.htn-skinned .section-header .section-title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--text) !important;
  margin: 0 !important;
}
body.htn-skinned .section-body { margin-top: 0 !important; }
body.htn-skinned .section-body > .panel { margin-bottom: 0 !important; }
body.htn-skinned .panel-form .panel-body .row { margin-bottom: 4px !important; }
body.htn-skinned .panel-form .panel-body .form-group { margin-bottom: 14px !important; }

/* Breadcrumb .active item had rgba(204,221,255,0.92) — nearly invisible on white.
   Force dark text color + medium weight. */
body.htn-skinned .breadcrumb > li.active,
body.htn-skinned .breadcrumb > li.active > span,
body.htn-skinned .breadcrumb .active {
  color: var(--text) !important;
  font-weight: 500;
  opacity: 1 !important;
}
/* Breadcrumb inactive items + separator */
body.htn-skinned .breadcrumb > li > a { color: var(--htn-blue-600) !important; }
body.htn-skinned .breadcrumb > li > a:hover { color: var(--htn-blue-700) !important; }

/* Panel-client-details (dashboard sidebar card "Danh Nguyễn Thành / …").
   The OUTER .panel has its own padding: 24px — that's the source of the
   large blank border, not the body. Zap panel padding, keep tight body/footer. */
body.htn-skinned .panel-client-details {
  padding: 0 !important;
}
body.htn-skinned .panel-client-details .panel-heading {
  padding: 12px 16px !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}
body.htn-skinned .panel-client-details .panel-body {
  padding: 14px 16px !important;
}
body.htn-skinned .panel-client-details .panel-footer {
  padding: 12px 16px !important;
  margin: 0 !important;
  background: var(--bg-alt) !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
}
body.htn-skinned .panel-client-details .panel-body > *:first-child { margin-top: 0 !important; }
body.htn-skinned .panel-client-details .panel-body > *:last-child { margin-bottom: 0 !important; }
body.htn-skinned .panel-client-details address,
body.htn-skinned .panel-client-details p { margin-bottom: 10px !important; line-height: 1.5; }
body.htn-skinned .intl-tel-input .country-list {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  color: var(--text) !important;
  max-height: 260px;
}
body.htn-skinned .intl-tel-input .country-list .country:hover { background: var(--bg-alt) !important; }
body.htn-skinned .intl-tel-input .country-list .country.highlight { background: var(--gradient-brand-soft) !important; color: var(--htn-blue-700) !important; }
body.htn-skinned .intl-tel-input .country-list .divider { border-bottom-color: var(--border) !important; }
/* Also cover newer iti__ classes in case Lagom upgrades intl-tel-input */
body.htn-skinned .iti { width: 100%; display: block; }
body.htn-skinned .iti input[type="tel"],
body.htn-skinned .iti input.form-control { padding-left: 60px !important; }

/* Lagom account sidebar — active state (e.g. "Thông tin tài khoản") */
body.htn-skinned .panel.panel-sidebar .panel-body ul li.active a,
body.htn-skinned .panel.panel-sidebar .panel-body ul li a.current,
body.htn-skinned .panel.panel-sidebar .panel-body ul li a.active,
body.htn-skinned .sidebar-secondary .panel-body .active > a,
body.htn-skinned .sidebar-secondary .panel-body a.current,
body.htn-skinned .sidebar-secondary .panel-body a.active {
  color: var(--htn-blue-700) !important;
  font-weight: 700 !important;
  background: var(--gradient-brand-soft) !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 10px !important;
  position: relative;
}
body.htn-skinned .panel.panel-sidebar .panel-body ul li.active a::before,
body.htn-skinned .panel.panel-sidebar .panel-body ul li a.current::before,
body.htn-skinned .sidebar-secondary .panel-body .active > a::before,
body.htn-skinned .sidebar-secondary .panel-body a.current::before {
  content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 3px;
  background: var(--gradient-brand); border-radius: 2px;
}
/* Make non-active items darker too (user said too faded) */
body.htn-skinned .panel.panel-sidebar .panel-body ul li a,
body.htn-skinned .sidebar-secondary .panel-body a {
  color: var(--text) !important;
  font-weight: 500;
}

/* User dropdown in client area header — make it a real menu */
body.htn-skinned .htn-user-dropdown-wrap { position: relative; }
body.htn-skinned .htn-user-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  min-width: 220px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 6px;
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 160ms var(--ease), transform 160ms var(--ease), visibility 0s linear 160ms;
  z-index: 140;
}
body.htn-skinned .htn-user-dropdown-wrap.open .htn-user-dropdown-menu,
body.htn-skinned .htn-user-dropdown-wrap:hover .htn-user-dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition-delay: 0s;
}
body.htn-skinned .htn-user-dropdown-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-xs);
  color: var(--text-soft) !important;
  font-size: .9375rem;
  text-decoration: none !important;
}
body.htn-skinned .htn-user-dropdown-menu a:hover { background: var(--bg-subtle); color: var(--htn-blue-700) !important; }
body.htn-skinned .htn-user-dropdown-menu a.danger { color: var(--danger) !important; }
body.htn-skinned .htn-user-dropdown-menu a.danger:hover { background: rgba(239,68,68,.08); }
body.htn-skinned .htn-user-dropdown-menu hr { margin: 4px 0; border: none; border-top: 1px solid var(--border); }
body.htn-skinned .htn-user-dropdown-menu svg { width: 16px; height: 16px; opacity: .75; }
body.htn-skinned .htn-user-dropdown-menu i { width: 16px; height: 16px; font-size: 14px; opacity: .75; color: var(--text-muted); text-align: center; }

/* ---------------------------------------------------------------
   63. PAGE FIXES 2026-04-24 (session 5)
   - .main-grid has fixed "280px 1040px" cols; when page has no sidebar
     (.main-content is only child), the content is stuck in the 280px column.
   - Banner subtitle uses rgba(204,221,255,0.92) = dark-mode text on light bg.
   - Cart confproduct order-info rows use same faded color → unreadable.
   - xac-minh tab 'active' has white text (works on color bg, not white).
   --------------------------------------------------------------- */
body.htn-skinned .main-grid:has(> .main-content:only-child) {
  grid-template-columns: 1fr !important;
}
/* Fallback for browsers without :has() support: force single column when
   explicitly tagged, and restore width on the single child. */
body.htn-skinned .main-grid > .main-content:only-child {
  grid-column: 1 / -1;
  width: 100%;
}
/* When .main-grid has BOTH .main-content + .main-sidebar (cart/order pages),
   Lagom's default "280px 1040px" puts content in the narrow column — inverted.
   Give content the flexible column, sidebar a sane fixed width. */
body.htn-skinned .main-grid:has(> .main-content):has(> .main-sidebar) {
  grid-template-columns: minmax(0, 1fr) 340px !important;
  gap: 24px !important;
}
/* Cart/order pages and dashboard render children in mixed DOM order
   ([sidebar,content] on dashboard, [content,sidebar] on cart). Pin BOTH to row 1
   and assign explicit columns so they always sit side-by-side, not stacked. */
body.htn-skinned .main-grid > .main-content { grid-column: 1; grid-row: 1; min-width: 0; }
body.htn-skinned .main-grid > .main-sidebar { grid-column: 2; grid-row: 1; min-width: 0; }
@media (max-width: 991px) {
  body.htn-skinned .main-grid:has(> .main-content):has(> .main-sidebar) {
    grid-template-columns: 1fr !important;
  }
  body.htn-skinned .main-grid > .main-sidebar { grid-column: 1; }
}

/* Banner hero subtitle — forced readable color (not rgba white-on-white) */
body.htn-skinned .banner-subtitle,
body.htn-skinned [class*="banner"] .subtitle,
body.htn-skinned .page-hero .subtitle {
  color: var(--text-soft) !important;
  opacity: 1 !important;
}
html[data-theme="dark"] body.htn-skinned .banner-subtitle,
html[data-theme="dark"] body.htn-skinned [class*="banner"] .subtitle,
html[data-theme="dark"] body.htn-skinned .page-hero .subtitle {
  color: #C6D4E8 !important;
}

/* Cart (configure product) — order summary rows readable */
body.htn-skinned .order-summary,
body.htn-skinned .order-summary-table,
body.htn-skinned #productConfigurationForm .order-summary,
body.htn-skinned [class*="orderSummary"],
body.htn-skinned .cart-order-summary {
  color: var(--text) !important;
}
body.htn-skinned .order-summary .addon,
body.htn-skinned .order-summary .addon-label,
body.htn-skinned .order-summary .price-label,
body.htn-skinned .order-summary dt,
body.htn-skinned .order-summary dd,
body.htn-skinned .summary-container .row,
body.htn-skinned .summary-container .row > *,
body.htn-skinned .panel-summary .panel-body *,
body.htn-skinned .cart-order-summary * {
  color: inherit !important;
  opacity: 1 !important;
}
/* Generic: any text that uses the rgba(204,221,255,0.92) "dark-mode text"
   color ends up invisible on white — override with real theme text color. */
body.htn-skinned [style*="rgba(204"],
body.htn-skinned [style*="rgba(204,221,255"] {
  color: var(--text) !important;
}
/* submitticket.php + other support pages: department "Operating Hours" + day
   labels rendered in white/near-white — force readable. */
body.htn-skinned .support-time,
body.htn-skinned .support-time span,
body.htn-skinned .support-time .operating-desc,
body.htn-skinned .operating-desc,
body.htn-skinned .department-name,
body.htn-skinned .department-title {
  color: var(--text-soft) !important;
  opacity: 1 !important;
}
body.htn-skinned .support-time .operating-desc { color: var(--text-muted) !important; }
/* When the list-group-item contains a department, tint the icon brand blue */
body.htn-skinned .list-group-item.has-icon i { color: var(--htn-blue-600); }

/* Department heading + support-time box are rendered with white text (meant for
   a dark-gradient background). Force readable on light card. */
body.htn-skinned .list-group-item .list-group-item-heading,
body.htn-skinned .support-time-box,
body.htn-skinned .support-time-box * {
  color: var(--text) !important;
}
body.htn-skinned .list-group-item .list-group-item-heading {
  font-weight: 600 !important;
  font-size: .9375rem !important;
}
body.htn-skinned .support-time-box .operating-desc { color: var(--text-muted) !important; }

/* ---------------------------------------------------------------
   64. REGISTER / LOGIN page — widen + readable help text
   --------------------------------------------------------------- */
/* Register has many more fields than login — widen the container.
   Keep login (login.php) narrower via specific override below. */
/* .page-clientregister and .register-page are classes ON the body itself, so no
   space between `body.htn-skinned` and them. Earlier `body.htn-skinned .page-clientregister`
   looked for .page-clientregister as a descendant (never matches). */
body.htn-skinned.register-page .login-lg,
body.htn-skinned.page-clientregister .login-lg,
body.htn-skinned .registration .login-lg {
  max-width: 960px !important;
}
/* login.php keeps the narrow centered form */
body.htn-skinned.page-login:not(.register-page):not(.page-clientregister) .login-lg {
  max-width: 480px !important;
}
/* .help-block used across registration for small hint text — readable */
body.htn-skinned .help-block,
body.htn-skinned .form-text,
body.htn-skinned small.text-muted {
  color: var(--text-muted) !important;
  opacity: 1 !important;
  font-size: .8125rem !important;
  margin-top: 4px;
}
/* Register form: compact field padding so the form doesn't stretch too tall */
body.htn-skinned.register-page .form-group,
body.htn-skinned.page-clientregister .form-group { margin-bottom: 14px; }
body.htn-skinned.register-page .control-label,
body.htn-skinned.page-clientregister .control-label {
  font-size: .875rem !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  margin-bottom: 4px !important;
}
body.htn-skinned.register-page .login-title,
body.htn-skinned.page-clientregister .login-title {
  text-align: center;
}
body.htn-skinned.register-page h3.login-section-title,
body.htn-skinned.page-clientregister h3 {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin: 18px 0 10px !important;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}

/* Cart billing cycle cards — avoid cramped narrow radio tiles */
body.htn-skinned .billing-cycles,
body.htn-skinned .billing-cycles-container,
body.htn-skinned .billingcycle-tabs,
body.htn-skinned .cycle-selector,
body.htn-skinned .cart-billingcycles {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 12px !important;
}
body.htn-skinned .billing-cycles .cycle,
body.htn-skinned .billingcycle-tabs > *,
body.htn-skinned .cycle-selector > * {
  min-width: 0 !important;
  padding: 12px !important;
}

/* xac-minh tabs — active state should not be white text on white */
body.htn-skinned .nav-tabs .nav-link.active,
body.htn-skinned .nav-tabs li.active > a,
body.htn-skinned [role="tablist"] [role="tab"][aria-selected="true"] {
  color: var(--htn-blue-700) !important;
  background: var(--bg-elevated) !important;
  border-color: var(--border) var(--border) var(--bg-elevated) !important;
}
body.htn-skinned .nav-tabs .nav-link,
body.htn-skinned [role="tab"] {
  color: var(--text-soft) !important;
}
body.htn-skinned .nav-tabs .nav-link:hover { color: var(--htn-blue-700) !important; }
body.htn-skinned .htn-user-dropdown-header {
  padding: 10px 12px 8px;
  font-family: var(--font-heading);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

/* =====================================================================
 * Readability pass — auth/register/form helper & hint text
 * Context: Lagom uses .text-lighter / .text-light / .help-block / small
 * with very low-contrast greys. Legibility boost across all form pages.
 * Applies to: register, login, password-reset, cart, contact, clientarea.
 * ===================================================================*/

/* Help block under form inputs (customfield descriptions, hints) */
body.htn-skinned .help-block,
body.htn-skinned .form-text,
body.htn-skinned small.text-muted {
  color: var(--text-soft) !important;     /* #2D3E52 — stronger than #6B7B90 */
  opacity: 1 !important;
  font-size: .8125rem !important;
  font-weight: 500 !important;
  font-style: normal !important;
  margin-top: 5px;
  line-height: 1.45;
}

/* Section subtitle italic (e.g. "(Các trường bắt buộc được đánh dấu *)") */
body.htn-skinned .section-title i,
body.htn-skinned .section-title small,
body.htn-skinned .section-title small.text-lighter,
body.htn-skinned h2 small.text-lighter,
body.htn-skinned h3 small.text-lighter {
  color: var(--text-soft) !important;
  opacity: 1 !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: .8125rem !important;
  display: inline-block;
  margin-top: 4px;
}

/* Password strength hint ("ít nhất 5 ký tự", tips tooltip trigger) */
body.htn-skinned .password-content-text,
body.htn-skinned .password-content-text .text-small,
body.htn-skinned .text-small.text-lighter {
  color: var(--text-soft) !important;
  opacity: 1 !important;
  font-weight: 500 !important;
  font-size: .8125rem !important;
}
body.htn-skinned .password-content-text i.ls-info-circle {
  color: var(--htn-blue-600) !important;
  opacity: 1 !important;
}

/* Auth footer ("Đã có tài khoản? Đăng nhập …") — bigger, darker */
body.htn-skinned .login-footer,
body.htn-skinned .login-footer .text-center,
body.htn-skinned .login-footer .text-light {
  font-size: .9375rem !important;
  color: var(--text) !important;
  font-weight: 500 !important;
}

/* Empty-state text on dashboard cards ("No recent tickets", etc.) */
body.htn-skinned .panel-body .text-light,
body.htn-skinned .widget-content .text-light {
  color: var(--text-soft) !important;
  opacity: 1 !important;
  font-weight: 500 !important;
}

/* Cart/checkout section descriptions */
body.htn-skinned .section-desc,
body.htn-skinned p.section-desc {
  color: var(--text-soft) !important;
  opacity: 1 !important;
  font-size: .9375rem !important;
}

/* Generic .text-lighter fallback (Lagom's lightest grey, everywhere) */
body.htn-skinned .text-lighter {
  color: var(--text-soft) !important;
  opacity: 1 !important;
}

/* Required-field "*" marker — keep red but bolder */
body.htn-skinned .label-required::after {
  color: #E53935 !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

/* Dark theme parity */
html[data-theme="dark"] body.htn-skinned .help-block,
html[data-theme="dark"] body.htn-skinned .text-lighter,
html[data-theme="dark"] body.htn-skinned .section-title small,
html[data-theme="dark"] body.htn-skinned .password-content-text,
html[data-theme="dark"] body.htn-skinned .login-footer .text-light,
html[data-theme="dark"] body.htn-skinned .section-desc {
  color: #C6D4E8 !important;
}

/* =====================================================================
 * Auth page decorative floating cards (behind form, left & right)
 * Matches preview-design/login.html — injected by htn-custom.js
 * ===================================================================*/
body.htn-skinned.page-login .htn-auth-decor,
body.htn-skinned.page-register .htn-auth-decor,
body.htn-skinned.page-clientregister .htn-auth-decor,
body.htn-skinned.page-password-reset .htn-auth-decor {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
body.htn-skinned .htn-auth-float {
  position: absolute;
  width: 300px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(12, 23, 38, .10);
  overflow: hidden;
  opacity: .55;
}
body.htn-skinned .htn-auth-float.htn-af-left {
  top: 14%; left: -60px;
  transform: rotate(-6deg) scale(.94);
}
body.htn-skinned .htn-auth-float.htn-af-right {
  bottom: 10%; right: -80px;
  transform: rotate(5deg) scale(.94);
}
body.htn-skinned .htn-auth-float .htn-af-head {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: #F6F9FC;
  border-bottom: 1px solid var(--border);
  font-size: .75rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
body.htn-skinned .htn-auth-float .htn-af-dot {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}
body.htn-skinned .htn-auth-float .htn-af-dot:nth-of-type(1) { background: #FF5F56; }
body.htn-skinned .htn-auth-float .htn-af-dot:nth-of-type(2) { background: #FFBD2E; }
body.htn-skinned .htn-auth-float .htn-af-dot:nth-of-type(3) { background: #27C93F; }
body.htn-skinned .htn-auth-float .htn-af-url {
  margin-left: 6px;
}
body.htn-skinned .htn-auth-float .htn-af-body {
  padding: 14px 16px 16px;
}
body.htn-skinned .htn-auth-float .htn-af-label {
  font-size: .75rem; color: var(--text-muted); margin-bottom: 4px;
}
body.htn-skinned .htn-auth-float .htn-af-headline {
  font-size: 1rem; font-weight: 700; color: var(--text);
  font-family: var(--font-heading);
  margin-bottom: 10px;
}
body.htn-skinned .htn-auth-float .htn-af-spark {
  height: 42px; margin-bottom: 10px;
  background: linear-gradient(180deg, rgba(77,208,232,.22), transparent);
  border-radius: 6px;
  background-image:
    linear-gradient(180deg, rgba(77,208,232,.22), transparent),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'><polyline fill='none' stroke='%232EB8DE' stroke-width='2' points='0,30 12,24 24,27 38,14 52,20 66,9 80,16 100,11'/></svg>");
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}
body.htn-skinned .htn-auth-float .htn-af-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(39,201,63,.12); color: #1C8F2A;
  font-size: .75rem; font-weight: 600;
}
body.htn-skinned .htn-auth-float .htn-af-badge::before {
  content:""; width: 7px; height: 7px; border-radius: 50%;
  background: #27C93F;
  box-shadow: 0 0 0 3px rgba(39,201,63,.22);
}
body.htn-skinned .htn-auth-float .htn-af-kpis {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
body.htn-skinned .htn-auth-float .htn-af-kpi-label {
  font-size: .625rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em;
}
body.htn-skinned .htn-auth-float .htn-af-kpi-value {
  font-size: 1rem; font-weight: 700; color: var(--text); font-family: var(--font-heading);
}

/* Hide on narrow viewports to avoid overlapping form */
@media (max-width: 1180px) {
  body.htn-skinned .htn-auth-decor { display: none; }
}

/* Dark mode */
html[data-theme="dark"] body.htn-skinned .htn-auth-float {
  background: var(--bg-elevated);
  opacity: .40;
}
html[data-theme="dark"] body.htn-skinned .htn-auth-float .htn-af-head {
  background: var(--bg-subtle);
}

/* ============================================================
   HTN auth sidebar showcase ("Có gì mới") — gradient brand
   Added 2026-05-25 (CEO: panel login chưa hợp giao diện mới)
   ============================================================ */
body.htn-skinned .main-body-sidebar,
body.htn-skinned .main-body-sidebar-primary {
  background: var(--gradient-brand, linear-gradient(135deg,#4DD0E8 0%,#1E8BDE 45%,#094FA0 100%)) !important;
  border-radius: var(--radius-xl, 16px);
  overflow: hidden;
  position: relative;
}
body.htn-skinned .main-body-sidebar-primary::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse at 78% 0%, rgba(255,255,255,.16), transparent 58%);
}
body.htn-skinned .main-body-sidebar .sidebar-title,
body.htn-skinned .main-body-sidebar .sidebar-news-title,
body.htn-skinned .main-body-sidebar .sidebar-news-title:hover,
body.htn-skinned .main-body-sidebar .sidebar-news-date,
body.htn-skinned .main-body-sidebar .sidebar-news-desc { color:#fff !important; position:relative; z-index:1; }
body.htn-skinned .main-body-sidebar .sidebar-news-date { opacity:.82; }
body.htn-skinned .main-body-sidebar .sidebar-news-desc { opacity:.92; }
body.htn-skinned .main-body-sidebar .swiper-pagination-bullet { background:rgba(255,255,255,.45) !important; }
body.htn-skinned .main-body-sidebar .swiper-pagination-bullet-active { background:#fff !important; }

/* ============================================================
   HTN cookie/terms consent bar — clean card bottom-right
   ============================================================ */
body.htn-skinned .cookie-bar.cookie-bar--bottom-right {
  background: var(--bg-elevated, #fff) !important;
  border: 1px solid var(--border, #E4ECF4) !important;
  border-radius: var(--radius-lg, 12px) !important;
  box-shadow: var(--shadow-lg, 0 10px 32px rgba(12,23,38,.12)) !important;
  max-width: 340px; padding: 0; color: var(--text, #0C1726) !important; overflow: hidden;
}
body.htn-skinned .cookie-bar .cookie-bar__content { padding: 18px 18px 16px; }
body.htn-skinned .cookie-bar .cookie-bar__desc,
body.htn-skinned .cookie-bar .cookie-bar__desc * { color: var(--text-soft, #2D3E52) !important; }
body.htn-skinned .cookie-bar .cookie-bar__desc a { color: #1E8BDE !important; }
body.htn-skinned .cookie-bar .cookie-bar__icon svg { width:40px; height:40px; }
body.htn-skinned .cookie-bar .cookie-bar__action .btn,
body.htn-skinned .cookie-bar .cookie-bar__action button,
body.htn-skinned .cookie-bar .cookie-bar__action a {
  background: var(--gradient-brand, linear-gradient(135deg,#4DD0E8,#1E8BDE,#094FA0)) !important;
  border:none !important; color:#fff !important; border-radius: var(--radius-pill, 999px) !important;
}

body.htn-skinned .cookie-bar .cookie-bar__content { background: none !important; background-image: none !important; }

/* Clamp login news excerpt to 3 lines — hides Lagom byte-truncated U+FFFD char */
body.htn-skinned .main-body-sidebar .sidebar-news-desc {
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =====================================================================
 * HTN UI fixes 2026-05-26 (CEO review)
 *   #3 dark-mode completion for static landing pages
 *   #4 out-of-stock card readability
 *   #1 login ultra-wide centering
 * ===================================================================*/

/* #3 — The ".htn-skinned force-light" block near the top of this file pins
   --card-bg / --input-bg / surfaces to #fff !important with NO dark variant,
   to keep WHMCS clientarea/login light. That same block also hits the static
   landing pages (they are .htn-skinned too) and breaks dark mode there:
   white tables/inputs/cards + light text = unreadable. Restore dark values,
   scoped to .page-htn-landing ONLY (clientarea & homepage stay untouched). */
html[data-theme="dark"] body.htn-skinned.page-htn-landing {
  --body-bg: #0A1628 !important;
  --content-bg: #14253F !important;
  --card-bg: #14253F !important;
  --input-bg: #14253F !important;
  --body-color: #F5F9FF !important;
  --text-color: #F5F9FF !important;
  --text-color-base: #F5F9FF !important;
  --text-color-secondary: #C6D4E8 !important;
  --heading-color: #F5F9FF !important;
  --border-color: #1E3252 !important;
  --input-border: #1E3252 !important;
  background: #0A1628 !important;
  color: #F5F9FF !important;
}
html[data-theme="dark"] body.htn-skinned.page-htn-landing .form-control,
html[data-theme="dark"] body.htn-skinned.page-htn-landing input[type="text"],
html[data-theme="dark"] body.htn-skinned.page-htn-landing input[type="email"],
html[data-theme="dark"] body.htn-skinned.page-htn-landing input[type="tel"],
html[data-theme="dark"] body.htn-skinned.page-htn-landing input[type="number"],
html[data-theme="dark"] body.htn-skinned.page-htn-landing input[type="search"],
html[data-theme="dark"] body.htn-skinned.page-htn-landing textarea,
html[data-theme="dark"] body.htn-skinned.page-htn-landing select {
  background: #14253F !important;
  color: #F5F9FF !important;
  border-color: #1E3252 !important;
}
/* Surfaces that hardcode #fff in htn-landing.js-injected styles, plus the
   design-system .service-card / .btn-secondary on landing. */
html[data-theme="dark"] body.page-htn-landing .service-card,
html[data-theme="dark"] body.page-htn-landing .cdn-tier-table,
html[data-theme="dark"] body.page-htn-landing .cdn-calc-input-group,
html[data-theme="dark"] body.page-htn-landing .cdn-calc-breakdown,
html[data-theme="dark"] body.page-htn-landing .cdn-calc-summary {
  background: #14253F !important;
}
html[data-theme="dark"] body.page-htn-landing .cdn-calc-input-group input {
  background: transparent !important;
}
html[data-theme="dark"] body.page-htn-landing .btn-secondary {
  background: #14253F !important;
  color: #F5F9FF !important;
}

/* #4 — Out-of-stock landing cards get inline style="opacity:.65" from
   htn-landing.js, which makes title/price/specs hard to read (esp. on white).
   Lift to .92: keeps a subtle de-emphasis but restores readability, both themes. */
body.page-htn-landing .service-card[style*="opacity"] {
  opacity: .92 !important;
}

/* #1 — Lagom auth pages: the sidebar layout (.main-body-has-sidebar) had no
   max-width, so on ultra-wide screens the "Có gì mới" panel and the form drift
   apart. Center the pair with a 7vw gap between them, equal 460px cards, and
   >=7vh breathing room top/bottom. max-height = viewport minus header stops the
   row being stretched past the viewport (which previously skewed content down).
   Scoped >=992px so Lagom's mobile stacking is untouched. */
@media (min-width: 992px) {
  body.htn-skinned.page-login .main-body.main-body-has-sidebar,
  body.htn-skinned.page-register .main-body.main-body-has-sidebar,
  body.htn-skinned.page-password-reset .main-body.main-body-has-sidebar {
    max-width: none !important;
    gap: 7vw !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: calc(100vh - var(--header-h, 72px)) !important;
    max-height: calc(100vh - var(--header-h, 72px)) !important;
    padding: 7vh 16px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  body.htn-skinned.page-login .main-body-sidebar,
  body.htn-skinned.page-register .main-body-sidebar,
  body.htn-skinned.page-password-reset .main-body-sidebar {
    flex: 0 0 460px !important;
    align-self: center !important;
  }
  body.htn-skinned.page-login .main-body-content,
  body.htn-skinned.page-register .main-body-content,
  body.htn-skinned.page-password-reset .main-body-content {
    flex: 0 0 460px !important;
    max-width: 460px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    align-self: center !important;
  }
  body.htn-skinned.page-login .main-body-content .login,
  body.htn-skinned.page-register .main-body-content .registration {
    max-width: 460px !important;
    width: 100% !important;
    margin: 0 !important;
    position: relative !important;
  }
  /* SSL footer line (.login::after) taken OUT of flow so its height no longer
     shifts the login card upward — keeps the "Có gì mới" panel and the form
     card vertically aligned (same center / top / bottom). It floats just below
     the card without affecting layout. */
  body.htn-skinned.page-login .main-body-content .login::after,
  body.htn-skinned.page-register .main-body-content .registration::after {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-top: 16px !important;
  }
}

/* ---------------------------------------------------------------
   HTN UI polish 2026-05-27 (R10): pro service-card hover + sticky nav
   --------------------------------------------------------------- */
/* On htn-skinned pages (landing + clientarea) the base rule
   body.htn-skinned .service-card sets box-shadow + border with !important,
   which swallows the :hover elevation (hover only translated, no depth).
   Re-assert the hover state with !important so pricing cards lift, glow and
   get a brand border on these pages too. Works in both light and dark. */
body.htn-skinned .service-card:hover {
  transform: translateY(-6px) !important;
  border-color: var(--htn-cyan-500) !important;
  box-shadow: var(--shadow-lg), 0 12px 28px -8px rgba(46,184,222,.30) !important;
}

/* Sticky top nav fix: overflow-x:hidden on body makes it a scroll container
   that never scrolls, which disables position:sticky on the .header that
   lives directly inside it. overflow-x:clip clips horizontal overflow the
   same way but does NOT create a scroll container, so the sticky top menu
   stays pinned on scroll. design-system.css sets body{overflow-x:hidden} on
   the static landing pages, so re-assert clip for them here. */
body.page-htn-landing { overflow-x: clip; }

/* HTN UI 2026-05-27 (R12): legal / CMS sidebar fixes
   Q1 - left-align the vertical legal nav. Lagom .nav-v sets flex
   align-items:center which centers the sidebar links; a vertical sidebar nav
   reads better left-aligned. */
body.htn-skinned .nav-legal { align-items: flex-start !important; }
/* Q2 - CMS / clientarea pages (body.htn-skinned) also had body overflow-x:hidden,
   which is a non-scrolling scroll container that disables position:sticky on the
   .nav-legal sidebar (and the clientarea .sidebar-sticky). clip clips horizontal
   overflow without creating a scroll container, so sticky works. Same fix as the
   landing/homepage rules above, extended to all skinned pages. */
body.htn-skinned { overflow-x: clip; }

/* HTN UI 2026-05-27 (R13): dark clientarea form controls readability.
   The header search (#table-search) and DataTables length / Bootstrap
   custom-select boxes keep a white background in dark mode (a light
   header-search rule wins for the input; macOS renders <select> white despite
   the dark bg-color), so their light text becomes invisible. Force white bg +
   DARK text on these specific controls so the value is always readable. */
html[data-theme="dark"] body.htn-skinned input#table-search,
html[data-theme="dark"] body.htn-skinned .main-header .search-field input.form-control,
html[data-theme="dark"] body.htn-skinned select.custom-select,
html[data-theme="dark"] body.htn-skinned .dataTables_length select {
  background-color: #FFFFFF !important;
  color: #0C1726 !important;
  border-color: #C6D0DC !important;
}
html[data-theme="dark"] body.htn-skinned input#table-search::placeholder {
  color: #6B7B8F !important;
}
/* .btn-default (e.g. "Quản lý" in service/dashboard lists) keeps a hardcoded
   white background in dark mode while its text is light (low contrast). It was
   meant to be a dark secondary button (dark border already). Give it a dark bg
   so the light text reads. */
html[data-theme="dark"] body.htn-skinned .btn-default {
  background-color: #14253F !important;
  color: #F5F9FF !important;
  border-color: #2A4570 !important;
}
html[data-theme="dark"] body.htn-skinned .btn-default:hover {
  background-color: #1C3050 !important;
  border-color: var(--htn-cyan-500) !important;
}

/* HTN UI 2026-05-27 (R13b): COMPLETE dark theme for clientarea.
   The clientarea was designed light-first (~24 hardcoded `background:#fff
   !important` surfaces). In dark mode those stayed white while their text is
   light -> invisible. Darken every card / panel / table / modal / notification
   surface to the dark card colour + light text. Auth pages (.login /
   .registration wrappers, login swiper bullet) intentionally stay light and are
   NOT included here. */
html[data-theme="dark"] body.htn-skinned .panel,
html[data-theme="dark"] body.htn-skinned .panel-default,
html[data-theme="dark"] body.htn-skinned .panel-sidebar,
html[data-theme="dark"] body.htn-skinned .panel-lagom,
html[data-theme="dark"] body.htn-skinned .panel-heading,
html[data-theme="dark"] body.htn-skinned .panel-summary,
html[data-theme="dark"] body.htn-skinned .order-summary,
html[data-theme="dark"] body.htn-skinned .tile,
html[data-theme="dark"] body.htn-skinned .package,
html[data-theme="dark"] body.htn-skinned .product-info,
html[data-theme="dark"] body.htn-skinned .order-info,
html[data-theme="dark"] body.htn-skinned .info-card,
html[data-theme="dark"] body.htn-skinned .buckets-card,
html[data-theme="dark"] body.htn-skinned .cart-summary,
html[data-theme="dark"] body.htn-skinned .cart-content,
html[data-theme="dark"] body.htn-skinned .table-controls,
html[data-theme="dark"] body.htn-skinned .listtable,
html[data-theme="dark"] body.htn-skinned .modal-content,
html[data-theme="dark"] body.htn-skinned .dropdown-menu,
html[data-theme="dark"] body.htn-skinned.floating-notification .floating-notification-content,
html[data-theme="dark"] body.htn-skinned .floating-notification-bar,
html[data-theme="dark"] body.htn-skinned .table,
html[data-theme="dark"] body.htn-skinned table.table,
html[data-theme="dark"] body.htn-skinned .table tbody td,
html[data-theme="dark"] body.htn-skinned table.table tbody td,
html[data-theme="dark"] body.htn-skinned .btn-secondary {
  background-color: #14253F !important;
  border-color: #2A4570 !important;
  color: #F5F9FF !important;
}
/* Pagination buttons (keep the active/current page on its brand highlight). */
html[data-theme="dark"] body.htn-skinned .dataTables_paginate .paginate_button:not(.current),
html[data-theme="dark"] body.htn-skinned .pagination .page-item:not(.active) .page-link {
  background-color: #14253F !important;
  border-color: #2A4570 !important;
  color: #F5F9FF !important;
}

/* R13c: LIGHT mode — the info-card label/value classes use dark-card colours
   (.list-info-title = sentinel light-blue, .list-info-text = white) so they
   vanish on the WHITE card in light/default theme. Force readable colours.
   (Dark mode keeps the light colours, readable on the now-dark card from R13b.) */
html:not([data-theme="dark"]) body.htn-skinned .list-info-title {
  color: #5A6B80 !important;
}
html:not([data-theme="dark"]) body.htn-skinned .list-info-text {
  color: #0C1726 !important;
}

/* R13d: productdetails hero card (.product-icon, used by Storage/CDN/etc.
   service detail pages) used a flat off-brand electric-blue gradient
   (#1062FE -> #003CB2). Align to the HTN brand gradient (cyan -> blue) so the
   service pages match the rest of the site. Works in both themes. */
body.htn-skinned .product-icon {
  background: var(--gradient-brand) !important;
}

/* HTN UI 2026-05-28: dark fix for sidebar widget buttons in panel footers.
   .panel-footer .btn-outline.btn-block / .btn.btn-default.btn-block were forced
   white (light-first, higher specificity than the generic .btn-default dark rule)
   so "Dang xuat" / "Them thong tin moi" stayed white in dark mode. */
html[data-theme="dark"] body.htn-skinned .panel-footer .btn-outline.btn-block,
html[data-theme="dark"] body.htn-skinned .panel-footer .btn.btn-default.btn-block {
  background: #14253F !important;
  border-color: #2A4570 !important;
  color: #F5F9FF !important;
}
html[data-theme="dark"] body.htn-skinned .panel-footer .btn-outline.btn-block:hover,
html[data-theme="dark"] body.htn-skinned .panel-footer .btn.btn-default.btn-block:hover {
  background: #1C3050 !important;
  border-color: var(--htn-cyan-500) !important;
  color: #FFFFFF !important;
}

/* HTN UI 2026-05-28: dark theme for the BytePlus CDN module detail UI (.bp-cdn,
   shown on CDN productdetails pages that have usage data, e.g. id=339). The
   module renders its cards / tables / alerts / buttons light-first (white #fff,
   #333 text) which were invisible in dark. Darken to the clientarea dark palette
   (R13b). The usage chart is a <canvas> whose axis labels are drawn dark by
   Chart.js (CSS cannot recolor them) -> keep the canvas on a light panel so the
   chart stays fully readable inside the dark card. */
html[data-theme="dark"] body.htn-skinned .bp-cdn .bp-card,
html[data-theme="dark"] body.htn-skinned .bp-cdn .bp-card-body {
  background-color: #14253F !important;
  border-color: #2A4570 !important;
  color: #F5F9FF !important;
}
html[data-theme="dark"] body.htn-skinned .bp-cdn .bp-card-header,
html[data-theme="dark"] body.htn-skinned .bp-cdn .bp-overview,
html[data-theme="dark"] body.htn-skinned .bp-cdn .bp-collapsible-header {
  background-color: #0F1E35 !important;
  border-color: #2A4570 !important;
  color: #F5F9FF !important;
}
html[data-theme="dark"] body.htn-skinned .bp-cdn .bp-overview-item {
  border-right-color: #2A4570 !important;
  color: #F5F9FF !important;
}
html[data-theme="dark"] body.htn-skinned .bp-cdn .bp-overview-label { color: #9FB3C8 !important; }
html[data-theme="dark"] body.htn-skinned .bp-cdn .bp-overview-value { color: #FFFFFF !important; }
/* Tables (cost breakdown, per-domain traffic) */
html[data-theme="dark"] body.htn-skinned .bp-cdn table,
html[data-theme="dark"] body.htn-skinned .bp-cdn td,
html[data-theme="dark"] body.htn-skinned .bp-cdn tr {
  background-color: transparent !important;
  border-color: #2A4570 !important;
  color: #F5F9FF !important;
}
html[data-theme="dark"] body.htn-skinned .bp-cdn th {
  background-color: #0F1E35 !important;
  border-color: #2A4570 !important;
  color: #9FB3C8 !important;
}
html[data-theme="dark"] body.htn-skinned .bp-cdn .bp-table-total,
html[data-theme="dark"] body.htn-skinned .bp-cdn tr.total,
html[data-theme="dark"] body.htn-skinned .bp-cdn tfoot tr {
  background-color: #0F1E35 !important;
}
/* Alerts (e.g. "Tra sau - Postpaid" info box) */
html[data-theme="dark"] body.htn-skinned .bp-cdn .bp-alert { color: #F5F9FF !important; }
html[data-theme="dark"] body.htn-skinned .bp-cdn .bp-alert-info {
  background-color: rgba(46,140,222,.14) !important;
  border-color: rgba(46,140,222,.40) !important;
  color: #9CCBF5 !important;
}
html[data-theme="dark"] body.htn-skinned .bp-cdn .bp-alert-danger {
  background-color: rgba(239,68,68,.14) !important;
  border-color: rgba(239,68,68,.40) !important;
  color: #FCA5A5 !important;
}
/* Buttons: copy / chart expand / fullscreen */
html[data-theme="dark"] body.htn-skinned .bp-cdn .bp-copy-btn,
html[data-theme="dark"] body.htn-skinned .bp-cdn .copy-btn,
html[data-theme="dark"] body.htn-skinned .bp-cdn .bp-chart-expand-btn,
html[data-theme="dark"] body.htn-skinned .bp-cdn .bp-chart-fullscreen {
  background-color: #14253F !important;
  border-color: #2A4570 !important;
  color: #C9D6E5 !important;
}
html[data-theme="dark"] body.htn-skinned .bp-cdn .bp-copy-btn:hover,
html[data-theme="dark"] body.htn-skinned .bp-cdn .copy-btn:hover,
html[data-theme="dark"] body.htn-skinned .bp-cdn .bp-chart-expand-btn:hover,
html[data-theme="dark"] body.htn-skinned .bp-cdn .bp-chart-fullscreen:hover {
  background-color: #1C3050 !important;
  border-color: var(--htn-cyan-500) !important;
  color: #FFFFFF !important;
}
/* Keep the Chart.js canvas on a light panel so its dark-drawn axis labels stay
   readable inside the now-dark card. */
html[data-theme="dark"] body.htn-skinned .bp-cdn .bp-card-body canvas {
  background: #FFFFFF !important;
  border-radius: 8px !important;
}
/* The module also uses many INLINE light backgrounds + dark text colours (a fixed
   palette baked into the template) that class rules can't reach. Override the
   inline palette to dark; !important beats the module's non-important inline
   styles. These light hexes only appear as backgrounds and the dark hexes only as
   text colours in this module, so substring matching is safe. */
html[data-theme="dark"] body.htn-skinned .bp-cdn [style*="#f0f4ff"],
html[data-theme="dark"] body.htn-skinned .bp-cdn [style*="#e8eaf6"],
html[data-theme="dark"] body.htn-skinned .bp-cdn [style*="#f5f6f8"],
html[data-theme="dark"] body.htn-skinned .bp-cdn [style*="#f0f2f5"],
html[data-theme="dark"] body.htn-skinned .bp-cdn [style*="#f5f5f5"],
html[data-theme="dark"] body.htn-skinned .bp-cdn [style*="background:#fff"],
html[data-theme="dark"] body.htn-skinned .bp-cdn [style*="background: #fff"] {
  background: #0F1E35 !important;
  background-color: #0F1E35 !important;
}
html[data-theme="dark"] body.htn-skinned .bp-cdn [style*="#ffebee"] {
  background: rgba(239,68,68,.14) !important;
  background-color: rgba(239,68,68,.14) !important;
}
html[data-theme="dark"] body.htn-skinned .bp-cdn [style*="color:#333"],
html[data-theme="dark"] body.htn-skinned .bp-cdn [style*="color: #333"] { color: #F5F9FF !important; }
html[data-theme="dark"] body.htn-skinned .bp-cdn [style*="color:#888"],
html[data-theme="dark"] body.htn-skinned .bp-cdn [style*="color: #888"] { color: #9FB3C8 !important; }
html[data-theme="dark"] body.htn-skinned .bp-cdn [style*="#1565c0"] { color: #7CC4FF !important; }
html[data-theme="dark"] body.htn-skinned .bp-cdn [style*="#283593"] { color: #A9C0FF !important; }
html[data-theme="dark"] body.htn-skinned .bp-cdn [style*="#c62828"] { color: #FCA5A5 !important; }
/* Code/CNAME snippets (e.g. the per-domain CNAME value) shown as white code blocks. */
html[data-theme="dark"] body.htn-skinned .bp-cdn code,
html[data-theme="dark"] body.htn-skinned .bp-cdn pre {
  background: #0F1E35 !important;
  border-color: #2A4570 !important;
  color: #9CCBF5 !important;
}

/* HTN UI 2026-05-28: dark theme for the puqMinIOS3 (S3 storage) module detail UI
   (.module-puqMinIOS3, e.g. id=298 Storage). Class-based light-first surfaces:
   white copy / show-password buttons, light buckets table header, and #333 value
   text (username + disk stats) that were faint on the dark card. Scoped to dark;
   the green SVG usage pie is left untouched (readable). */
html[data-theme="dark"] body.htn-skinned .module-puqMinIOS3 .copy-btn,
html[data-theme="dark"] body.htn-skinned .module-puqMinIOS3 .show-password-btn {
  background: #14253F !important;
  border-color: #2A4570 !important;
  color: #9CCBF5 !important;
}
html[data-theme="dark"] body.htn-skinned .module-puqMinIOS3 .copy-btn:hover,
html[data-theme="dark"] body.htn-skinned .module-puqMinIOS3 .show-password-btn:hover {
  background: #1C3050 !important;
  border-color: var(--htn-cyan-500) !important;
  color: #FFFFFF !important;
}
html[data-theme="dark"] body.htn-skinned .module-puqMinIOS3 tr {
  background-color: transparent !important;
}
html[data-theme="dark"] body.htn-skinned .module-puqMinIOS3 th {
  background-color: #0F1E35 !important;
  border-color: #2A4570 !important;
  color: #9FB3C8 !important;
}
html[data-theme="dark"] body.htn-skinned .module-puqMinIOS3 td {
  border-color: #2A4570 !important;
  color: #F5F9FF !important;
}
html[data-theme="dark"] body.htn-skinned .module-puqMinIOS3 .credential-value,
html[data-theme="dark"] body.htn-skinned .module-puqMinIOS3 .info-value {
  color: #F5F9FF !important;
}
/* HTN UI 2026-05-28: brand-blue (#0E6DC4) accent icons look dull/low-contrast on
   the dark navy bg. Brighten section/heading icons + the puqMinIOS3 server icons
   (fa-server/user/lock/database/recycle/percent...) to cyan in dark — matches the
   existing link + active-nav cyan-on-dark pattern. Light mode keeps brand blue. */
html[data-theme="dark"] body.htn-skinned .panel-title i,
html[data-theme="dark"] body.htn-skinned .panel-heading i:first-child,
html[data-theme="dark"] body.htn-skinned .module-puqMinIOS3 i,
html[data-theme="dark"] body.htn-skinned .module-puqMinIOS3 .fa {
  color: var(--htn-cyan-400) !important;
}




/* === HTN legal/policy typography - r4 (2026-05-31): clean document density.
   Smaller headings, tight spacing, and COMPACT structured tables. Scoped to
   .section-legal so other CMS pages are unaffected. */
body.htn-skinned .section-legal .section-content h2 {
  font-size: 24px !important; line-height: 1.3 !important; font-weight: 700 !important;
  margin: 4px 0 12px !important;
}
body.htn-skinned .section-legal .section-content h3 {
  font-size: 18px !important; line-height: 1.35 !important; font-weight: 700 !important;
  margin: 22px 0 8px !important;
}
body.htn-skinned .section-legal .section-content p {
  font-size: 16px !important; line-height: 1.6 !important; font-weight: 400 !important;
  margin: 0 0 10px !important;
}
body.htn-skinned .section-legal .section-content ul,
body.htn-skinned .section-legal .section-content ol {
  margin: 0 0 12px !important; padding-left: 24px !important;
}
body.htn-skinned .section-legal .section-content li { margin-bottom: 5px !important; }
body.htn-skinned .section-legal .section-content li > p { margin-bottom: 0 !important; }
body.htn-skinned .section-legal .section-content li:last-child { margin-bottom: 0 !important; }

/* Tables: the theme pins each row to a tall fixed height via the
   --table-td-height / --table-th-height CSS vars, which makes rows look sparse.
   Override those vars so rows hug their content, tighten padding, and add a
   light header tint + zebra so it reads as a proper, compact table. */
body.htn-skinned .section-legal .section-content {
  --table-td-height: auto !important;
  --table-th-height: auto !important;
}
body.htn-skinned .section-legal .section-content table { margin: 6px 0 18px !important; }
body.htn-skinned .section-legal .section-content td,
body.htn-skinned .section-legal .section-content th {
  padding: 7px 14px !important; line-height: 1.5 !important;
  vertical-align: top !important; height: auto !important;
}
body.htn-skinned .section-legal .section-content thead th {
  background: rgba(178,204,255,0.06) !important;
  border-bottom: 1px solid rgba(178,204,255,0.20) !important;
  font-weight: 700 !important; vertical-align: middle !important;
}
body.htn-skinned .section-legal .section-content tbody tr:nth-child(even) > td {
  background: rgba(178,204,255,0.035) !important;
}

@media (max-width: 575px) {
  body.htn-skinned .section-legal .section-content h2 { font-size: 21px !important; }
  body.htn-skinned .section-legal .section-content h3 { font-size: 16.5px !important; }
  body.htn-skinned .section-legal .section-content p,
  body.htn-skinned .section-legal .section-content li > p { font-size: 15px !important; }
  body.htn-skinned .section-legal .section-content td,
  body.htn-skinned .section-legal .section-content th { padding: 6px 9px !important; font-size: 13px !important; }
}

/* HTN 2026-05-31 — fix bong bóng giá trị ionRangeSlider bị cắt trên trang cấu hình sản phẩm (cart.php confproduct/VPS) */
.panel-range-slider { overflow: visible !important; }
body.htn-skinned .panel-range-slider .panel-body { padding-top: 50px !important; } /* HTN: chừa chỗ bong bóng .irs-single (top:-40px) khỏi đè h2.section-title */

/* ============================================================
 * HTN ZGA — multi-column layout for Yes/No region config options
 * Applies on cart configureproduct page when there are ≥4 sections
 * (Global Accelerator: 9 zones). Falls back to default for browsers
 * without :has() support. Added 2026-05-31.
 * ============================================================ */
body.page-configureproduct #productConfigurableOptions:has(.section:nth-child(4)){
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px 18px;
}
body.page-configureproduct #productConfigurableOptions:has(.section:nth-child(4)) > .section{margin:0}
body.page-configureproduct #productConfigurableOptions:has(.section:nth-child(4)) .section-header{margin-bottom:8px}
body.page-configureproduct #productConfigurableOptions:has(.section:nth-child(4)) .section-title{font-size:1rem;font-weight:600}
body.page-configureproduct #productConfigurableOptions:has(.section:nth-child(4)) .panel-check-group .col-sm-4{flex:0 0 100%;max-width:100%}
body.page-configureproduct #productConfigurableOptions:has(.section:nth-child(4)) .panel.panel-check{margin-bottom:0}
@media (max-width:991px){
  body.page-configureproduct #productConfigurableOptions:has(.section:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:575px){
  body.page-configureproduct #productConfigurableOptions:has(.section:nth-child(4)){grid-template-columns:1fr}
}

/* HTN dtr-collapse gutter — DataTables Responsive collapse button (.btn-table-collapse,
   44px absolute) was covering first-column content (invoice/service IDs) because section-32
   td padding killed the responsive gutter. Restore left padding on the first cell. */
body.htn-skinned table.dtr-inline.collapsed > tbody > tr > td:first-child,
body.htn-skinned table.dtr-inline.collapsed > thead > tr > th:first-child { padding-left: 52px !important; }

/* ============================================================
   HTN-LEGAL-TOC 2026-06-01 — Mục lục + neo cuộn trang pháp lý.
   ============================================================ */
.htn-legal-toc {
  background: var(--bg-alt, rgba(255,255,255,.03));
  border: 1px solid var(--border);
  border-left: 3px solid var(--htn-cyan-500, #2eb8de);
  border-radius: var(--radius, 12px);
  padding: 18px 24px;
  margin: 4px 0 32px;
}
.htn-legal-toc-title {
  font-weight: 700;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.htn-legal-toc-list {
  margin: 0;
  padding: 0 0 0 1.3em;
  columns: 2;
  column-gap: 40px;
}
.htn-legal-toc-list li { margin: 6px 0; break-inside: avoid; }
.htn-legal-toc-list a {
  color: var(--htn-cyan-500, #2eb8de);
  text-decoration: none;
  line-height: 1.5;
}
.htn-legal-toc-list a:hover { text-decoration: underline; color: var(--text); }
.section-content h3 { scroll-margin-top: 92px; }
@media (max-width: 680px) { .htn-legal-toc-list { columns: 1; } }

/* ============================================================
   HTN-LEGAL-CALLOUT 2026-06-01 — bảng 1 ô → khối lưu ý/callout.
   ============================================================ */
.section-content table.htn-callout {
  width: 100% !important;
  border: 0 !important;
  border-collapse: collapse;
  margin: 22px 0;
  background: transparent !important;
  box-shadow: none !important;
}
.section-content table.htn-callout colgroup,
.section-content table.htn-callout col { width: auto !important; }
.section-content table.htn-callout tbody,
.section-content table.htn-callout tr { display: block; }
body.htn-skinned .section-content table.htn-callout td {
  display: block;
  background: var(--bg-alt, rgba(46,184,222,.07)) !important;
  border: 1px solid var(--border) !important;
  border-left: 4px solid var(--htn-cyan-500, #2eb8de) !important;
  border-radius: var(--radius, 12px) !important;
  padding: 15px 20px 15px 52px !important;
  position: relative;
  color: var(--text-soft, inherit) !important;
  line-height: 1.7;
  height: auto !important;
}
body.htn-skinned .section-content table.htn-callout td::before {
  content: "\2139";
  position: absolute;
  left: 18px;
  top: 16px;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 50%;
  background: var(--htn-cyan-500, #2eb8de);
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
  font-style: normal;
}

/* ============================================================
   HTN-CHECKOUT-FIX 2026-06-01 — ô khuyến mãi + tổng tiền trang cart/checkout.
   ============================================================ */
/* (3) Ô khuyến mãi: bỏ gradient xanh chói (.search-box-primary) → panel tối nhẹ, đồng bộ dark theme */
body.htn-skinned .search-box-primary {
  background-image: none !important;
  background: var(--bg-alt, rgba(255,255,255,.04)) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius, 12px) !important;
}
body.htn-skinned .search-box-primary .form-control {
  background: rgba(0,0,0,.22) !important;
  border: 1px solid var(--border) !important;
  color: var(--text, #f5f9ff) !important;
}
body.htn-skinned .search-box-primary .form-control::placeholder {
  color: var(--text-muted, #93a4bd) !important;
  opacity: 1;
}
/* (1) Ẩn icon search (sai ngữ nghĩa trên ô MÃ KHUYẾN MÃI) + reset padding (hết đè placeholder) */
body.htn-skinned .search-box-primary .search-field-icon { display: none !important; }
body.htn-skinned .search-box-primary .search-field .form-control { padding-left: 14px !important; }

/* (2) Tổng tiền khi áp khuyến mãi: xếp DỌC (giá cũ nhỏ gạch ngang trên, giá mới to dưới) — tránh tràn/cắt */
body.htn-skinned .price-left-h:has(.price-amount-total-promo) { white-space: normal !important; }
body.htn-skinned .price-left-h:has(.price-amount-total-promo) .price-amount-total {
  display: block !important;
  font-size: 1rem !important;
  opacity: .55;
  text-decoration: line-through;
}
body.htn-skinned .price-left-h:has(.price-amount-total-promo) .price-amount-total-promo {
  display: block !important;
}

/* ============================================================
   HTN-PROMO-CHIP 2026-06-01 — chip mã KM đã áp (.label-savings)
   nền hồng nhạt + chữ trắng → khó đọc. Đổi thành badge hồng đậm
   + chữ/icon trắng (badge giảm giá rõ ràng, đồng bộ tông pink).
   ============================================================ */
body.htn-skinned .promo-code-content .label.label-savings {
  background: rgb(240, 26, 103) !important;
  color: #ffffff !important;
}
body.htn-skinned .promo-code-content .label.label-savings svg path,
body.htn-skinned .promo-code-content .label.label-savings svg path.fill-change {
  fill: #ffffff !important;
}

/* ============================================================
   HTN-MODAL-FIX 2026-06-01 — hộp thoại xác nhận (xóa item giỏ hàng,
   làm rỗng giỏ...) nền tối lẫn vào trang blur → user tưởng đông cứng.
   Dim trang tối + bớt blur + viền/shadow để dialog nổi rõ.
   ============================================================ */
body.htn-skinned .modal-backdrop.show {
  background-color: rgba(0, 0, 0, 0.8) !important;
  opacity: 1 !important; /* HTN-backdrop: ghi đè Bootstrap .show opacity:.5 (nếu ko, alpha bị nhân 0.5) */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.htn-skinned .modal-content {
  background-color: rgb(34, 52, 84) !important;
  border: 1px solid rgba(150, 185, 240, 0.34) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65) !important;
}

/* HTN-MODAL-FIX-2 2026-06-01 — dialog xác nhận nổi rõ trên dim đen.
   Thắng html[data-theme="dark"] body.htn-skinned .modal-content (specificity). */
html[data-theme="dark"] body.htn-skinned .modal-content,
html body.htn-skinned .modal-content {
  background-color: rgb(34, 52, 84) !important;
  border: 1px solid rgba(150, 185, 240, 0.36) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7) !important;
}


/* ============================================================
   HTN-COOKIE-CONSENT 2026-06-01 — Opt-in cookie consent banner.
   Replaces the Lagom implied-consent cookie bar with an opt-in
   banner that has equal-prominence Reject / Accept buttons.
   ============================================================ */
/* Hide the Lagom "by using this site you agree" cookie bar — the
   opt-in banner below supersedes it (browsewrap -> explicit opt-in). */
body.htn-skinned .cookie-bar.cookie-bar--bottom-right { display: none !important; }

#htn-consent {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 2147483000;
  display: flex; justify-content: center;
  opacity: 0; transform: translateY(18px);
  transition: opacity .34s cubic-bezier(.4,0,.2,1), transform .34s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
#htn-consent.htn-consent--in { opacity: 1; transform: none; }
#htn-consent.htn-consent--out { opacity: 0; transform: translateY(18px); }

#htn-consent .htn-consent__card {
  pointer-events: auto;
  max-width: 920px; width: 100%;
  display: flex; align-items: center; gap: 20px;
  padding: 16px 22px;
  background: var(--bg-elevated, #14253F);
  color: var(--text-color, #F5F9FF);
  border: 1px solid rgba(150,185,240,.20);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
html[data-theme="light"] #htn-consent .htn-consent__card {
  background: #FFFFFF;
  color: #0C1726;
  border-color: rgba(12,23,38,.12);
  box-shadow: 0 18px 50px rgba(12,23,38,.18);
}

#htn-consent .htn-consent__title { font-weight: 800; font-size: 1rem; margin-bottom: 4px; }
#htn-consent .htn-consent__desc {
  margin: 0; font-size: .85rem; line-height: 1.55;
  color: var(--text-soft, #C6D4E8);
}
html[data-theme="light"] #htn-consent .htn-consent__desc { color: #2D3E52; }
#htn-consent .htn-consent__desc a { color: #4DD0E8; text-decoration: underline; }
html[data-theme="light"] #htn-consent .htn-consent__desc a { color: #1E8BDE; }

#htn-consent .htn-consent__actions { display: flex; gap: 10px; flex-shrink: 0; }
#htn-consent .htn-consent__btn {
  -webkit-appearance: none; appearance: none; cursor: pointer; border: 0;
  font-family: inherit; font-weight: 700; font-size: .875rem; line-height: 1;
  padding: 12px 24px; border-radius: 10px; white-space: nowrap;
  transition: filter .15s ease, background .15s ease;
}
#htn-consent .htn-consent__btn--reject {
  background: transparent;
  color: var(--text-color, #F5F9FF);
  border: 1px solid rgba(150,185,240,.38);
}
html[data-theme="light"] #htn-consent .htn-consent__btn--reject {
  color: #0C1726; border-color: rgba(12,23,38,.28);
}
#htn-consent .htn-consent__btn--reject:hover { background: rgba(150,185,240,.14); }
#htn-consent .htn-consent__btn--accept {
  background: linear-gradient(135deg, #4DD0E8 0%, #1E8BDE 55%, #094FA0 100%);
  color: #FFFFFF;
}
#htn-consent .htn-consent__btn--accept:hover { filter: brightness(1.08); }

@media (max-width: 640px) {
  #htn-consent { left: 10px; right: 10px; bottom: 10px; }
  #htn-consent .htn-consent__card { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; }
  #htn-consent .htn-consent__actions { justify-content: stretch; }
  #htn-consent .htn-consent__btn { flex: 1; }
}


/* ============================================================
   HTN-LEGAL-NOBANNER 2026-06-01 — Remove the hero banner on the
   legal pages (/phap-ly/*) for a compact, content-first layout
   (Mat Bao style). Scoped to the per-page CMS wrapper class
   .site-cms-phap-ly* so other CMS pages keep their banners.
   ============================================================ */
[class*="site-cms-phap-ly"] > .site-banner { display: none !important; }
[class*="site-cms-phap-ly"] > .site-section.section-legal { padding-top: 44px !important; }
@media (max-width: 640px) {
  [class*="site-cms-phap-ly"] > .site-section.section-legal { padding-top: 28px !important; }
}


/* ============================================================
   65. MOBILE / RESPONSIVE POLISH — 2026-06-03
   Client-area phone/small-screen fixes. Landing + store pages
   already render well on mobile; these target the .htn-skinned
   client area (dashboard, invoices, services, tickets, etc.).
   ============================================================ */

/* (1) CRITICAL — main-grid cell collision.
   On desktop, .main-sidebar and .main-content are BOTH pinned to the same
   grid cell (grid-row:1 / grid-column:1) to sit side-by-side. The previous
   mobile override only switched to a single column but left grid-row:1 on
   both children, so they stacked ON TOP of each other (dashboard widget
   cards overlapped; the invoice "HD561" title was clipped by the Total-Due
   panel). Resetting grid placement lets the grid auto-flow them into two
   separate rows and stack cleanly (content first, secondary sidebar below). */
@media (max-width: 991px) {
  body.htn-skinned .main-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    grid-auto-flow: row !important;
  }
  body.htn-skinned .main-grid > .main-sidebar,
  body.htn-skinned .main-grid > .main-content {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
  body.htn-skinned .main-grid > .main-content { order: 1 !important; }
  body.htn-skinned .main-grid > .main-sidebar { order: 2 !important; }
}

/* (2)+(3) Floating contact widget vs fixed bottom tab bar.
   The mobile bottom tab bar (.htn-clientnav) is 60px tall at z-index 120.
   The floating widget (.htn-float = phone/Zalo/Telegram + back-to-top) sat
   at bottom:38px, so its lowest button overlapped — and was covered by —
   the bar. Raise it clear of the bar, and give page content extra bottom
   padding so the final rows are never hidden behind the bar. */
@media (max-width: 991px) {
  body.htn-skinned .htn-float { bottom: 80px !important; }
  body.htn-skinned .app-main { padding-bottom: 78px !important; }
}

/* (4) Tables on phones — tighter cells so 3-4 column tables fit, and keep the
   sub-total / total / balance label + amount on a single line (kills the ugly
   "Balan/ce" mid-word break). Wide tables still scroll within .table-responsive. */
@media (max-width: 600px) {
  body.htn-skinned .table thead th,
  body.htn-skinned .table tbody td,
  body.htn-skinned table.table thead th,
  body.htn-skinned table.table tbody td { padding: 10px 9px !important; font-size: .8125rem !important; }
  body.htn-skinned .sub-total-row td,
  body.htn-skinned .total-row td { white-space: nowrap; }
  body.htn-skinned .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* (5) Bottom tab bar labels — center + tight wrap so long labels such as
   "Bảng điều khiển" never look broken on narrow phones. */
@media (max-width: 991px) {
  .htn-clientnav-label { text-align: center; line-height: 1.15; max-width: 100%; }
}
@media (max-width: 380px) {
  .htn-clientnav-item { font-size: .625rem; }
  .htn-clientnav-label { font-size: .625rem !important; }
}

/* (6) Mobile nav drawer blur bug.
   .header has backdrop-filter: blur(16px) + position:sticky + z-index:40, so it
   forms its own stacking context. The slide-in .nav drawer (z-index:100) lives
   INSIDE that context, so its z-index is scoped to the header. The open-menu
   backdrop `body.nav-open::after` (z-index:99, blur(4px)) sits at the root level
   — and 99 > 40 means it paints OVER the entire header subtree, blurring the
   drawer's own text (menu was unreadable on narrow screens). Lift the header
   above the backdrop only while the menu is open: the drawer stays crisp and
   only the page behind it is dimmed/blurred, as intended. */
@media (max-width: 900px) {
  body.nav-open .header { z-index: 101 !important; }
}

/* === HTN: hide redundant floating Lagom logo on auth pages (2026-06-03) ===
   Site header already shows the brand and the auth card shows a logo above
   the title (.login-body::before); the default .login-header logo is a 3rd
   duplicate. Hide it on login / register / password-reset. */
body.htn-skinned.page-login .login-header,
body.htn-skinned.page-register .login-header,
body.htn-skinned.register-page .login-header,
body.htn-skinned.page-clientregister .login-header,
body.htn-skinned.page-password-reset .login-header,
body.htn-skinned.page-password-reset-validation .login-header {
  display: none !important;
}

/* ===============================================================
   64. LIGHT-MODE COLOR POLISH (2026-06-04)
   Lagom skin variables are configured to a dark-mode light-blue
   hsla(220,100%,90%,.8) — fine on dark, near-invisible on white.
   Remap to readable colors in LIGHT mode ONLY (dark keeps originals).
   Fixes: .text-last-updated timestamps, breadcrumb links on banner pages.
   =============================================================== */
html:not([data-theme="dark"]) body.htn-skinned {
  --text-lighter-color: var(--text-muted);
  --main-header-breadcrumb-color: var(--htn-blue-600);
  --main-header-banner-breadcrumb-color: var(--htn-blue-600);
  --main-header-breadcrumb-color-active: var(--text);
  --main-header-banner-breadcrumb-color-active: var(--text);
}
/* Status pills / widgets hardcoding a light slate text color inline
   (#cbd5e1 / rgb(203,213,225)) — unreadable on light pill bg in light mode. */
html:not([data-theme="dark"]) body.htn-skinned [style*="cbd5e1"],
html:not([data-theme="dark"]) body.htn-skinned [style*="CBD5E1"],
html:not([data-theme="dark"]) body.htn-skinned [style*="203,213,225"],
html:not([data-theme="dark"]) body.htn-skinned [style*="203, 213, 225"] {
  color: var(--text-soft) !important;
}