/* ==========================================================================
   Giao diện tuỳ biến (Admin → Giao diện, App\Services\Theme) — token phong cách áp qua thuộc tính <html data-ui-*>
   (ThemeView::htmlAttributes). Chỉ layouts.app | auth | client có các thuộc tính này → trang quản trị không bị ảnh hưởng.
   Giá trị MẶC ĐỊNH (soft, cozy, outline, plain, solid, normal, subtle, normal) KHÔNG có quy tắc nào → giao diện gốc giữ nguyên.
   Font + màu nhấn in ở <style id="theme-vars">, màu chủ đạo ở <style id="theme-color">, CSS của chủ site ở <style id="theme-custom-css">.
   Thêm tuỳ chọn mới: khai báo ở ThemeSchema::STYLE rồi viết quy tắc ở đây.
   ========================================================================== */

/* ----- Font tiêu đề (chỉ khi chọn font tiêu đề riêng — data-ui-hfont + biến --ui-font-heading) ----- */
html[data-ui-hfont] :is(h1, h2, h3, .lh-hero__title, .ln-hero__title, .page-head__title, .admin-topbar__title) { font-family: var(--ui-font-heading, inherit); }

/* ----- Bo góc ----- */
html[data-ui-radius="sharp"] { --radius-sm: 2px; --radius: 4px; --radius-lg: 6px; --ui-r-xl: 6px; }
html[data-ui-radius="round"] { --radius-sm: 10px; --radius: 16px; --radius-lg: 24px; --ui-r-xl: 30px; }
html[data-ui-radius="pill"] { --radius-sm: 14px; --radius: 22px; --radius-lg: 30px; --ui-r-xl: 40px; }
html[data-ui]:not([data-ui-radius="soft"]) :is(.lh-tile, .lh-plan, .lh-cta, .ax-card, .bl-card, .lh-os__grid li, .ui-block--card .ui-block__body) { border-radius: var(--ui-r-xl, var(--radius-lg)); }
html[data-ui-radius="pill"] :is(.btn, .form-input, .lh-cycles, .lh-cycles button, .segment-tab, .hd-cta, .hd-login) { border-radius: var(--radius-full); }
html[data-ui-radius="sharp"] :is(.lh-cycles, .lh-cycles button, .segment-tab, .badge, .lh-tile__icon, .lh-step__icon) { border-radius: 2px; }

/* ----- Mật độ ----- */
html[data-ui-density="compact"] .lh-section { padding: 56px 0; }
html[data-ui-density="compact"] .lh-hero { padding: 56px 0 60px; }
html[data-ui-density="compact"] .admin-content { padding: 14px 16px; }
html[data-ui-density="compact"] :is(.lh-tile, .lh-plan) { padding: 20px; }
html[data-ui-density="compact"] .card { margin-bottom: 12px; }
html[data-ui-density="airy"] .lh-section { padding: 120px 0; }
html[data-ui-density="airy"] .lh-hero { padding: 108px 0 116px; }
html[data-ui-density="airy"] .admin-content { padding: 30px 32px; }
html[data-ui-density="airy"] :is(.lh-tile, .lh-plan) { padding: 32px; }
html[data-ui-density="airy"] .card { margin-bottom: 24px; }

/* ----- Độ rộng nội dung trang công khai ----- */
html[data-ui-width="narrow"] .shell { max-width: 1080px; }
html[data-ui-width="wide"] .shell { max-width: 1440px; }

/* ----- Kiểu thẻ / khung ----- */
html[data-ui-surface="flat"] :is(.card, .panel, .lh-tile, .lh-plan, .lp-plan, .bl-card, .vt-box, .ui-block--card .ui-block__body) { border-color: transparent; }
html[data-ui-surface="tinted"] :is(.card, .panel, .lh-tile, .lh-plan, .lp-plan, .bl-card, .vt-box, .ui-block--card .ui-block__body) {
  border-color: transparent; background: color-mix(in srgb, var(--primary) 6%, var(--bg-card));
}
html[data-ui-surface="glass"] :is(.card, .panel, .lh-tile, .lh-plan, .lp-plan, .bl-card, .vt-box, .ui-block--card .ui-block__body) {
  border-color: color-mix(in srgb, var(--text) 10%, transparent);
  background: color-mix(in srgb, var(--bg-card) 64%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
html[data-ui-surface="bold"] :is(.card, .panel, .lh-tile, .lh-plan, .lp-plan, .bl-card, .vt-box, .ui-block--card .ui-block__body) { border: 2px solid var(--text); }
html[data-ui-surface="bold"] :is(.btn--ghost, .btn--light) { border-width: 2px; border-color: var(--text); }

/* ----- Nền trang (khối nền đặc của trang chủ trong suốt bớt để thấy hoạ tiết) ----- */
html[data-ui-bg="dots"] body { background-image: radial-gradient(color-mix(in srgb, var(--text) 13%, transparent) 1px, transparent 1.4px); background-size: 22px 22px; background-attachment: fixed; }
html[data-ui-bg="grid"] body {
  background-image: linear-gradient(color-mix(in srgb, var(--text) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--text) 6%, transparent) 1px, transparent 1px);
  background-size: 40px 40px; background-attachment: fixed;
}
html[data-ui-bg="gradient"] body { background-image: linear-gradient(180deg, color-mix(in srgb, var(--primary) 12%, var(--bg)) 0, var(--bg) 640px); background-repeat: no-repeat; }
html[data-ui-bg="mesh"] body {
  background-image:
    radial-gradient(40vw 40vw at 8% 4%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 70%),
    radial-gradient(36vw 36vw at 96% 18%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%),
    radial-gradient(44vw 44vw at 50% 110%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 70%);
  background-attachment: fixed;
}
html[data-ui-bg="stripes"] body { background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--text) 4%, transparent) 0 1px, transparent 1px 14px); background-attachment: fixed; }
html[data-ui]:not([data-ui-bg="plain"]) :is(.lh-hero, .lh-section--alt) { background: color-mix(in srgb, var(--bg-card) 55%, transparent); }

/* ----- Nút chính ----- */
html[data-ui-buttons="soft"] .btn--primary { background: var(--primary-light); color: var(--primary); }
html[data-ui-buttons="soft"] .btn--primary:hover { background: var(--primary); color: #fff; }
html[data-ui-buttons="outline"] .btn--primary { background: transparent; border-color: var(--primary); color: var(--primary); border-width: 1.5px; }
html[data-ui-buttons="outline"] .btn--primary:hover { background: var(--primary); color: #fff; }
html[data-ui-buttons="gradient"] .btn--primary { background: linear-gradient(120deg, var(--primary), var(--accent)); border: 0; color: #fff; }
html[data-ui-buttons="gradient"] .btn--primary:hover { background: linear-gradient(120deg, var(--primary-hover), var(--accent-hover)); color: #fff; }
html[data-ui-buttons="pill"] .btn { border-radius: var(--radius-full); }

/* ----- Tiêu đề ----- */
html[data-ui-headings="tight"] :is(h1, h2, .lh-hero__title, .page-head__title) { letter-spacing: -.035em; font-weight: 900; }
html[data-ui-headings="uppercase"] :is(h1, h2, .lh-hero__title, .page-head__title, .admin-topbar__title) { text-transform: uppercase; letter-spacing: .03em; }
html[data-ui-headings="accent"] :is(.lh-head h2, .ln-head h2, .lh-faq__side h2, .lh-os__text h2, .page-head__title, .card__title) {
  text-decoration: underline; text-decoration-color: var(--primary); text-decoration-thickness: .16em; text-underline-offset: .24em;
}

/* ----- Sáng / tối cố định: ẩn mọi nút đổi ----- */
html[data-ui-mode^="force"] :is(.theme-toggle, [data-theme-proxy]) { display: none !important; }

/* ----- Chuyển động ----- */
html[data-ui-motion="none"] *, html[data-ui-motion="none"] *::before, html[data-ui-motion="none"] *::after {
  animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: no-preference) {
  html[data-ui-motion="lively"] :is(.card, .panel, .lh-tile, .lh-plan, .lp-plan, .bl-card, .ln-plan, .ln-feature) { transition: transform .25s ease, border-color .25s ease, background-color .25s ease; }
  html[data-ui-motion="lively"] :is(.lh-tile, .lh-plan, .lp-plan, .bl-card, .ln-plan, .ln-feature):hover { transform: translateY(-4px); }
  html[data-ui-motion="lively"] .btn:hover { transform: translateY(-1px); }
  /* Khối hiện dần khi cuộn tới (public/js/theme.js gắn .ui-reveal + .is-in) */
  html[data-ui-motion="lively"] .ui-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.16, 1, .3, 1); }
  html[data-ui-motion="lively"] .ui-reveal.is-in { opacity: 1; transform: none; }
}

/* ==========================================================================
   Khối HTML tuỳ chỉnh (.ui-block) + lớp tiện ích cho người viết khối (admin / AI — liệt kê trong hướng dẫn MCP theme://guide)
   ========================================================================== */
.ui-block { padding: 28px 0; }
.storefront > .ui-block:first-child { padding-top: 18px; }
.client-content > .ui-block { padding: 0; margin-bottom: 16px; }
.cd-page > .ui-block { padding: 0; } /* .cd-page đã có gap */
.ui-block__body { min-width: 0; color: var(--text); font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }
.ui-block__body > :first-child { margin-top: 0; }
.ui-block__body > :last-child { margin-bottom: 0; }
.ui-block__body :is(h2, h3, h4) { margin: 0 0 10px; color: var(--text); line-height: 1.25; }
.ui-block__body h2 { font-size: clamp(22px, 3vw, 32px); font-weight: 900; }
.ui-block__body p { margin: 0 0 12px; color: var(--text-secondary); }
.ui-block__body a:not(.btn) { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.ui-block__body :is(img, video, iframe) { max-width: 100%; height: auto; border-radius: var(--radius); }
.ui-block__body iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }
.ui-block__body :is(ul, ol) { margin: 0 0 12px; padding-left: 20px; color: var(--text-secondary); }
.ui-block__body table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ui-block__body :is(th, td) { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.ui-block--card .ui-block__body { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); }
.ui-block--highlight .ui-block__body { padding: 20px 24px; border-radius: var(--radius); background: var(--primary-light); box-shadow: inset 4px 0 0 var(--primary); }
.ui-block--band { background: var(--primary); }
.ui-block--band .ui-block__body, .ui-block--band .ui-block__body :is(h2, h3, h4, p, li, a:not(.btn)) { color: #fff; }
.client-content > .ui-block--band, .cd-page .ui-block--band { padding: 18px 22px; border-radius: var(--radius); }
.ui-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; }
.ui-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: center; }
.ui-stack { display: grid; gap: 10px; }
.ui-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ui-center { text-align: center; justify-items: center; justify-content: center; }
.ui-muted { color: var(--text-muted) !important; }
.ui-lead { font-size: 18px; line-height: 1.6; }
.ui-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-full); background: var(--primary-light); color: var(--primary); font-size: 12.5px; font-weight: 800; }
.ui-card { padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); }
.ui-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--primary-light); color: var(--primary); font-size: 20px; }
.ui-gradient-text { background: linear-gradient(120deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 760px) {
  .ui-split { grid-template-columns: minmax(0, 1fr); }
}

/* ----- Thanh "Đang xem bản nháp" (chỉ người có quyền theme.manage) ----- */
.ui-preview-bar {
  position: fixed; left: 50%; bottom: 16px; z-index: 2000; transform: translateX(-50%);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; max-width: calc(100vw - 24px);
  padding: 9px 10px 9px 16px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; background: #111827; color: #e5e7eb; font-size: 13px;
}
.ui-preview-bar b { color: #fff; }
.ui-preview-bar a, .ui-preview-bar button {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px;
  background: transparent; color: #fff; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none;
}
.ui-preview-bar a:hover, .ui-preview-bar button:hover { background: rgba(255, 255, 255, .1); }
.ui-preview-bar form { margin: 0; }
@media (max-width: 768px) {
  .ui-preview-bar { bottom: 76px; } /* trên thanh dưới điện thoại */
}

/* ==========================================================================
   Màu menu của khung "Bảng điều khiển" (client_style.nav — chỉ khung sidebar): dark = gốc (không có quy tắc), light = nền thẻ chữ đậm,
   primary = nền màu chủ đạo chữ trắng. Áp khi html[data-client-template="sidebar"][data-ui-nav].
   ========================================================================== */
html[data-client-template="sidebar"][data-ui-nav="light"] .admin-sidebar { background: var(--bg-card); color: var(--text-secondary); border-right: 1px solid var(--border); scrollbar-color: var(--border) transparent; }
html[data-client-template="sidebar"][data-ui-nav="light"] .admin-sidebar__brand { background: var(--bg-card); color: var(--text); border-bottom-color: var(--border); }
html[data-client-template="sidebar"][data-ui-nav="light"] :is(.admin-nav a, .admin-nav__toggle) { color: var(--text-secondary); }
html[data-client-template="sidebar"][data-ui-nav="light"] :is(.admin-nav a:hover, .admin-nav__toggle:hover) { background: var(--primary-light); color: var(--primary); }
html[data-client-template="sidebar"][data-ui-nav="light"] .admin-nav a.is-active { background: var(--primary); color: #fff; }
html[data-client-template="sidebar"][data-ui-nav="light"] .admin-nav__group.has-current > .admin-nav__toggle { color: var(--text); }
html[data-client-template="sidebar"][data-ui-nav="light"] .admin-nav__items { border-left-color: var(--border); }
html[data-client-template="sidebar"][data-ui-nav="light"] .admin-nav__label { color: var(--text-muted); }

html[data-client-template="sidebar"][data-ui-nav="primary"] .admin-sidebar { background: var(--primary); color: rgba(255, 255, 255, .86); border-right: 0; }
html[data-client-template="sidebar"][data-ui-nav="primary"] .admin-sidebar__brand { background: var(--primary); color: #fff; border-bottom-color: rgba(255, 255, 255, .16); }
html[data-client-template="sidebar"][data-ui-nav="primary"] :is(.admin-nav a, .admin-nav__toggle) { color: rgba(255, 255, 255, .84); }
html[data-client-template="sidebar"][data-ui-nav="primary"] :is(.admin-nav a:hover, .admin-nav__toggle:hover) { background: rgba(255, 255, 255, .12); color: #fff; }
html[data-client-template="sidebar"][data-ui-nav="primary"] .admin-nav a.is-active { background: #fff; color: var(--primary); }
html[data-client-template="sidebar"][data-ui-nav="primary"] .admin-nav a.is-active .bi { color: var(--primary); }
html[data-client-template="sidebar"][data-ui-nav="primary"] .admin-nav__group.has-current > .admin-nav__toggle { color: #fff; }
html[data-client-template="sidebar"][data-ui-nav="primary"] .admin-nav__items { border-left-color: rgba(255, 255, 255, .22); }
html[data-client-template="sidebar"][data-ui-nav="primary"] .admin-nav__label { color: rgba(255, 255, 255, .62); }
html[data-client-template="sidebar"][data-ui-nav="primary"] .admin-sidebar__mark { background: #fff; color: var(--primary); }