/* Tax3S × Tabler (MIT) — bridge public site to Tabler design tokens & components */

/* Fluid rem root — Tabler CDN set html 16px; override để rem scale theo màn */
html {
    font-size: var(--tx-fs-base);
}

body.sl-site.theme-tabler {
    --tblr-body-font-size: var(--tx-control-fs, var(--tx-fs-md));
    --tblr-primary: var(--tx-primary, #206bc4);
    --tblr-primary-rgb: 32, 107, 196;
    --tblr-body-bg: var(--tx-bg, #f6f8fb);
    --tblr-border-color: var(--tx-border, #e6e7e9);
    --tblr-navbar-vertical-width: 24rem;
    --tblr-border-radius: 6px;
    --tblr-border-radius-lg: 8px;
    --tblr-font-sans-serif: var(--tx-font);
    font-family: var(--tblr-font-sans-serif);
}

body.sl-site.theme-tabler h1,
body.sl-site.theme-tabler h2,
body.sl-site.theme-tabler h3,
body.sl-site.theme-tabler h4,
body.sl-site.theme-tabler h5 {
    font-family: var(--tblr-font-sans-serif);
    letter-spacing: -0.01em;
}

/* ---- Header: Tabler navbar ---- */
body.theme-tabler .sl-header.navbar {
    background: var(--tx-surface, #fff);
    border-bottom: 1px solid var(--tblr-border-color);
    box-shadow: none;
    position: fixed;
    padding: 0;
}

body.theme-tabler .sl-header .sl-header-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 100%;
    padding-inline: 1rem;
    min-height: var(--sl-header-h);
}

body.theme-tabler .sl-header .sl-brand {
    color: var(--tx-text, #1e293b);
}

body.theme-tabler .sl-header .sl-brand-text small {
    color: var(--tx-muted, #64748b);
    opacity: 1;
}

body.theme-tabler .sl-header .sl-nav-list a {
    color: var(--tx-text, #1e293b);
    border-radius: var(--tblr-border-radius);
    font-weight: 500;
}

body.theme-tabler .sl-header .sl-nav-list a:hover,
body.theme-tabler .sl-header .sl-nav-list a:focus-visible {
    background: color-mix(in srgb, var(--tx-primary) 10%, transparent);
    color: var(--tx-primary);
}

body.theme-tabler .sl-header .sl-header-search {
    background: var(--tx-bg, #f6f8fb);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
}

body.theme-tabler .sl-header .sl-header-search input {
    color: var(--tx-text);
}

body.theme-tabler .sl-header .sl-header-search input::placeholder {
    color: var(--tx-muted);
}

body.theme-tabler .sl-header .sl-header-search button {
    background: var(--tx-primary);
    color: #fff;
    border-radius: 0 var(--tblr-border-radius) var(--tblr-border-radius) 0;
}

body.theme-tabler .sl-header .sl-theme-picker--desktop .tx-theme-picker-label {
    color: var(--tx-muted);
}

body.theme-tabler .sl-header .sl-theme-picker--desktop select {
    background-color: var(--tx-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    border: 1px solid var(--tblr-border-color);
    color: var(--tx-text);
    border-radius: var(--tblr-border-radius);
}

body.theme-tabler .sl-header .sl-nav-toggle {
    border-color: var(--tblr-border-color);
    background: var(--tx-bg);
}

body.theme-tabler .sl-header .sl-nav-toggle span {
    background: var(--tx-text);
}

body.theme-tabler .sl-header.is-scrolled {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* ---- App shell sidebar: Tabler navbar-vertical ---- */
body.theme-tabler .sl-app-sidebar.navbar-vertical {
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    width: 100%;
    height: 100%;
    max-height: none;
    padding: 0;
    background: var(--tx-surface, #fff);
    border-right: 1px solid var(--tblr-border-color);
    box-shadow: none;
    flex-direction: column;
    align-items: stretch;
}

@media (max-width: 1024px) {
    body.theme-tabler .sl-app-sidebar.navbar-vertical {
        display: none !important;
    }
}

body.theme-tabler .sl-app-sidebar .sl-app-sidebar-head {
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--tblr-border-color);
    background: var(--tx-surface, #fff);
}

/* Tabler navbar-vertical sets flex:1 on .navbar-nav — gây khoảng trống giữa Tổng quan và nhóm app */
body.theme-tabler .sl-app-sidebar-nav {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

body.theme-tabler .sl-app-sidebar .navbar-nav,
body.theme-tabler .sl-app-sidebar-nav.navbar-collapse {
    display: block !important;
    flex: none !important;
    flex-grow: 0 !important;
    height: auto !important;
    min-height: 0 !important;
}

body.theme-tabler .sl-app-sidebar-list--home {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
}

body.theme-tabler .sl-app-sidebar .sl-app-sidebar-eyebrow {
    color: var(--tx-primary);
    font-size: var(--tx-fs-sm);
    letter-spacing: 0.04em;
}

body.theme-tabler .sl-app-sidebar .sl-app-sidebar-title {
    font-size: var(--tx-fs-lg);
    font-weight: 600;
}

body.theme-tabler .sl-app-sidebar .sl-app-sidebar-group-label {
    margin-inline: 0;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: var(--tx-fs-sm);
    font-weight: 700;
    letter-spacing: 0.05em;
    border-radius: var(--tblr-border-radius);
    box-sizing: border-box;
}

body.theme-tabler .sl-app-sidebar-list .nav-item {
    width: 100%;
    margin: 0;
    padding: 0;
}

body.theme-tabler .sl-app-sidebar-item.nav-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    margin: 0 0 0.125rem;
    padding: 0.5rem 0.75rem;
    box-sizing: border-box;
    border: 0;
    border-radius: var(--tblr-border-radius);
    background: transparent;
    color: var(--tx-text);
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

body.theme-tabler .sl-app-sidebar-item .nav-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    flex-shrink: 0;
    color: var(--tx-muted);
}

body.theme-tabler .sl-app-sidebar-group-label .tx-home-icon-wrap--jump,
body.theme-tabler .sl-app-sidebar-group-label .tx-home-icon--jump {
    width: 18px;
    height: 18px;
}

body.theme-tabler .sl-app-sidebar-item-icon .tx-home-icon-wrap--jump,
body.theme-tabler .sl-app-sidebar-item-icon .tx-home-icon--jump {
    width: 22px;
    height: 22px;
}

body.theme-tabler .sl-app-sidebar-item .nav-link-title {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

body.theme-tabler .sl-app-sidebar-item .nav-link-title strong {
    font-size: var(--tx-chrome-fs);
    font-weight: 500;
}

body.theme-tabler .sl-app-sidebar-item .nav-link-title small {
    font-size: var(--tx-fs-sm);
    color: var(--tx-muted);
}

body.theme-tabler .sl-app-sidebar-item:hover {
    background: color-mix(in srgb, var(--tx-primary) 8%, transparent);
    color: var(--tx-primary);
}

body.theme-tabler .sl-app-sidebar-item:hover .nav-link-icon {
    color: var(--tx-primary);
}

body.theme-tabler .sl-app-sidebar-item.is-active {
    background: color-mix(in srgb, var(--tx-primary) 12%, transparent);
    color: var(--tx-primary);
    font-weight: 600;
}

body.theme-tabler .sl-app-sidebar-item.is-active .nav-link-icon {
    color: var(--tx-primary);
}

body.theme-tabler .sl-app-sidebar-item--lookup.is-active {
    background: color-mix(in srgb, #2fb344 12%, transparent);
    color: #2fb344;
}

body.theme-tabler .sl-app-sidebar-foot {
    border-top: 1px solid var(--tblr-border-color);
    padding: 0.75rem;
    gap: 0.5rem;
}

body.theme-tabler .sl-app-sidebar-link {
    border-radius: var(--tblr-border-radius);
    font-size: var(--tx-chrome-fs);
    font-weight: 500;
}

/* ---- Buttons: Tabler btn style ---- */
/* .sl-btn sizing — tax3s-controls.css (token --tx-control-*) */

body.theme-tabler .sl-btn-primary {
    background: var(--tx-primary);
    color: #fff;
    border-color: var(--tx-primary);
    box-shadow: none;
}

body.theme-tabler .sl-btn-primary:hover {
    background: var(--tx-primary-dark, #1a569d);
    color: #fff;
    transform: none;
    box-shadow: none;
}

body.theme-tabler .sl-btn-outline,
body.theme-tabler .btn-outline-primary.sl-btn-outline {
    border-radius: var(--tblr-border-radius);
    color: var(--tx-primary);
    border-color: var(--tx-primary);
}

body.theme-tabler .btn-outline-primary.sl-btn-outline:hover {
    background: color-mix(in srgb, var(--tx-primary) 10%, transparent);
    color: var(--tx-primary-dark, var(--tx-primary));
}

/* ---- Cards: Tabler card ---- */
body.theme-tabler .card.sl-app-pricing-card,
body.theme-tabler [class*="sl-app-pricing-card"].card,
body.theme-tabler .card.sl-welcome-info-card,
body.theme-tabler .card.sl-welcome-group-card,
body.theme-tabler .card.sl-welcome-lookup-card {
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius-lg);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.02);
}

body.theme-tabler .sl-app-cta,
body.theme-tabler .sl-app-pricing,
body.theme-tabler .sl-app-panel-split .sl-app-panel-block {
    border-radius: var(--tblr-border-radius-lg);
    border-color: var(--tblr-border-color);
}

body.theme-tabler .sl-app-panel-head {
    border-radius: var(--tblr-border-radius-lg);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.04);
}

body.theme-tabler .sl-welcome-hero {
    border-radius: var(--tblr-border-radius-lg);
    border: 1px solid var(--tblr-border-color);
}

/* ---- Footer: Tabler footer ---- */
body.theme-tabler .sl-footer.footer {
    background: var(--tx-primary-dark, #1e3a8a);
    border-top: none;
    color: rgba(255, 255, 255, 0.88);
    margin-top: auto;
}

body.theme-tabler .sl-footer .sl-footer-logo,
body.theme-tabler .sl-footer .sl-footer-block h5 {
    color: #fff;
}

body.theme-tabler .sl-footer .sl-footer-brand p,
body.theme-tabler .sl-footer .sl-footer-block p {
    color: rgba(255, 255, 255, 0.88);
}

body.theme-tabler .sl-footer .sl-footer-block a {
    color: rgba(255, 255, 255, 0.95);
}

body.theme-tabler .sl-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: color-mix(in srgb, var(--tx-primary-dark, #1e3a8a) 88%, #000);
    color: rgba(255, 255, 255, 0.8);
}

body.theme-tabler.sl-site--contact .sl-footer.footer {
    background: var(--tx-bg, #f6f8fb);
    border-top: 1px solid var(--tblr-border-color);
}

body.theme-tabler.sl-site--contact .sl-footer-bottom {
    background: var(--tx-surface, #fff);
    border-top: 1px solid var(--tblr-border-color);
    color: var(--tx-muted, #64748b);
}

/* ---- Page body background ---- */
body.theme-tabler.sl-site {
    background: var(--tblr-body-bg);
}

body.theme-tabler.sl-site--launcher .sl-app-shell {
    background: var(--tblr-body-bg);
}

body.theme-tabler .sl-app-main.page-body {
    background: var(--tblr-body-bg);
}

/* Sidebar đã nằm trong grid — tắt margin-left mặc định của Tabler .page-wrapper */
body.theme-tabler .sl-app-shell.page .sl-app-page-wrapper.page-wrapper {
    margin-left: 0 !important;
    margin-inline: 0 !important;
    width: 100%;
    max-width: none;
    min-width: 0;
}

@media (max-width: 1024px) {
    body.theme-tabler .sl-app-shell.page .sl-app-page-wrapper.page-wrapper,
    body.theme-tabler .sl-app-shell.page .page-body.sl-app-main {
        width: 100%;
        max-width: none;
        margin-left: 0 !important;
        margin-inline: 0 !important;
    }
}

@media (max-width: 767px) {
    html {
        font-size: 16px;
    }

    body.theme-tabler .sl-app-mobile-quick-btn {
        border-radius: 999px;
        transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
    }

    body.theme-tabler .sl-app-mobile-quick-btn:active {
        transform: scale(0.97);
    }

    body.theme-tabler .sl-app-mobile-contact-link {
        border-radius: 12px;
        transition: transform 0.12s ease, background 0.15s ease;
    }

    body.theme-tabler .sl-app-mobile-contact-link:active {
        transform: scale(0.96);
    }
}

body.theme-tabler .sl-app-shell.page .navbar-vertical ~ .page-wrapper {
    margin-left: 0 !important;
}

/* ---- Mobile bar ---- */
body.theme-tabler .sl-app-mobile-bar {
    border-bottom: 1px solid var(--tblr-border-color);
    background: var(--tx-surface);
}

body.theme-tabler .sl-app-mobile-select {
    border-radius: var(--tblr-border-radius);
    border-color: var(--tblr-border-color);
}

body.theme-tabler .sl-app-mobile-quick-btn {
    border-radius: var(--tblr-border-radius);
}

body.theme-tabler .sl-app-mobile-quick-btn.is-active {
    background: color-mix(in srgb, var(--tx-primary) 12%, transparent);
    color: var(--tx-primary);
    border-color: color-mix(in srgb, var(--tx-primary) 25%, transparent);
}

/* ---- Dark theme ---- */
html[data-theme="dark"] body.theme-tabler .sl-header.navbar {
    background: var(--tx-surface);
    border-color: var(--tblr-border-color);
}

html[data-theme="dark"] body.theme-tabler .sl-app-sidebar.navbar-vertical {
    background: var(--tx-surface);
}

/* Form controls — đồng bộ token MVC */
body.theme-tabler .form-control,
body.theme-tabler select.form-control,
body.theme-tabler .form-select,
body.theme-tabler textarea.form-control {
    font-size: var(--tx-control-fs);
    min-height: var(--tx-control-h);
    padding: var(--tx-control-py) var(--tx-control-px);
}

body.theme-tabler .btn:not(.btn-sm):not(.btn-lg) {
    font-size: var(--tx-control-fs);
    min-height: var(--tx-control-h);
    padding: var(--tx-control-py) var(--tx-control-px);
}