:root { --brown:#7a4010; --dark:#1f2329; --page:#f4f6f8; }
body { margin:0; background:var(--page); color:#23272d; }
.admin-shell { display:flex; min-height:100vh; }
.sidebar { width:245px; background:var(--dark); color:white; padding:22px 16px; position:fixed; inset:0 auto 0 0; }
.brand { font-size:1.35rem; font-weight:800; padding:8px 10px 24px; }
.brand span { color:#d69a56; }
.sidebar nav { display:grid; gap:6px; }
.sidebar a { color:#cdd2d8; text-decoration:none; padding:11px 12px; border-radius:8px; }
.sidebar a:hover { background:#343a42; color:white; }
.content-area { margin-left:245px; width:calc(100% - 245px); }
.topbar { height:68px; background:white; border-bottom:1px solid #e7e9ec; display:flex; justify-content:space-between; align-items:center; padding:0 28px; position:sticky; top:0; z-index:10; }
.page-title { font-weight:750; margin-bottom:20px; }
.panel { background:white; border-radius:12px; padding:22px; box-shadow:0 3px 14px rgba(0,0,0,.05); }
.metric { background:white; border-radius:12px; padding:20px; border-left:4px solid var(--brown); box-shadow:0 3px 14px rgba(0,0,0,.05); }
.metric span { display:block; color:#69717b; }
.metric strong { font-size:1.9rem; }
.metric.warning { border-left-color:#e6a400; }
.metric.danger { border-left-color:#dc3545; }
.btn-kazuko { background:var(--brown); border-color:var(--brown); color:white; }
.btn-kazuko:hover { background:#5d2f08; color:white; }
.login-bg { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#16191e,#7a4010); padding:20px; }
.admin-login { width:100%; max-width:430px; background:white; border-radius:18px; padding:38px; }
.logo-box { width:64px; height:64px; border-radius:14px; background:var(--brown); color:white; font-size:38px; font-weight:800; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.activation-code { font-size:2rem; font-weight:800; letter-spacing:3px; background:#f3ede7; color:var(--brown); border:2px dashed var(--brown); padding:20px; border-radius:12px; margin:24px auto; max-width:600px; }
table thead th { background:#fafbfc !important; white-space:nowrap; }
@media(max-width:900px){ .sidebar{width:210px}.content-area{margin-left:210px;width:calc(100% - 210px)} }

.status-badge { display:inline-block; padding:5px 9px; border-radius:999px; font-size:.78rem; font-weight:700; }
.status-available { background:#dff5e7; color:#126b35; }
.status-used { background:#dcecff; color:#175b9c; }
.status-expired { background:#fff0cc; color:#855b00; }
.status-revoked { background:#fbe1e4; color:#9e2430; }
.code-last4 { font-family:Consolas,monospace; font-weight:800; letter-spacing:1px; }
.filter-panel { background:white; border-radius:12px; padding:18px; margin-bottom:18px; box-shadow:0 3px 14px rgba(0,0,0,.05); }

/* KAZUKO DESIGN SYSTEM B2.1A - START */
:root {
    --kz-bg: #fff0bd;
    --kz-bg-soft: #fff7dc;
    --kz-surface: #ffffff;
    --kz-surface-soft: #fffaf0;
    --kz-primary: #e99828;
    --kz-primary-hover: #d98213;
    --kz-primary-dark: #a95010;
    --kz-primary-soft: #ffedd0;
    --kz-text: #28180c;
    --kz-text-secondary: #66584d;
    --kz-text-muted: #8b7d72;
    --kz-border: #eed39d;
    --kz-border-soft: #f4e5c8;
    --kz-success: #17834b;
    --kz-success-soft: #e8f7ef;
    --kz-warning: #c77800;
    --kz-warning-soft: #fff4d6;
    --kz-danger: #d83445;
    --kz-danger-soft: #fff0f2;
    --kz-info: #2463b8;
    --kz-info-soft: #edf5ff;
    --kz-radius-sm: 8px;
    --kz-radius-md: 12px;
    --kz-radius-lg: 18px;
    --kz-radius-xl: 24px;
    --kz-shadow-sm: 0 3px 10px rgba(91, 53, 18, .06);
    --kz-shadow-md: 0 12px 30px rgba(91, 53, 18, .09);
    --kz-shadow-lg: 0 20px 50px rgba(91, 53, 18, .13);
    --kz-transition: 180ms ease;
}

html, body {
    min-height: 100%;
    background: var(--kz-bg) !important;
    color: var(--kz-text);
}

body {
    margin: 0;
    font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

main, .content, .main-content, .page-content, .container, .container-fluid {
    color: var(--kz-text);
    opacity: 1 !important;
    visibility: visible !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--kz-text);
    font-weight: 800;
    letter-spacing: -.02em;
}

a { color: var(--kz-primary-dark); text-decoration: none; }
a:hover { color: var(--kz-primary-hover); }

.card, .kz-card, .panel, .widget, .stat-card {
    background: var(--kz-surface);
    border: 1px solid var(--kz-border-soft);
    border-radius: var(--kz-radius-lg);
    box-shadow: var(--kz-shadow-sm);
}

.card-header, .kz-card-header {
    background: linear-gradient(180deg, var(--kz-surface), var(--kz-surface-soft));
    border-bottom: 1px solid var(--kz-border-soft);
}

.kz-card { padding: 1.35rem; }
.kz-card:hover, .stat-card:hover { box-shadow: var(--kz-shadow-md); }

.btn {
    min-height: 42px;
    border-radius: var(--kz-radius-md);
    font-weight: 700;
    transition: transform var(--kz-transition), box-shadow var(--kz-transition), background-color var(--kz-transition), border-color var(--kz-transition);
}

.btn:hover { transform: translateY(-1px); }

.btn-primary, .kz-btn-primary {
    color: #fff !important;
    background: linear-gradient(135deg, var(--kz-primary), var(--kz-primary-dark)) !important;
    border-color: transparent !important;
    box-shadow: 0 7px 18px rgba(169, 80, 16, .2);
}

.btn-primary:hover, .kz-btn-primary:hover {
    background: linear-gradient(135deg, var(--kz-primary-hover), var(--kz-primary-dark)) !important;
    box-shadow: 0 10px 24px rgba(169, 80, 16, .28);
}

.btn-secondary, .kz-btn-secondary, .btn-outline-secondary {
    color: var(--kz-text) !important;
    background: var(--kz-surface) !important;
    border-color: var(--kz-border) !important;
}

.btn-secondary:hover, .kz-btn-secondary:hover, .btn-outline-secondary:hover {
    color: var(--kz-primary-dark) !important;
    background: var(--kz-primary-soft) !important;
    border-color: var(--kz-primary) !important;
}

.form-label, .kz-field label {
    margin-bottom: .42rem;
    color: var(--kz-text-secondary);
    font-size: .88rem;
    font-weight: 750;
}

.form-control, .form-select, textarea.form-control {
    min-height: 44px;
    color: var(--kz-text) !important;
    background: var(--kz-surface) !important;
    border: 1px solid #dfd4ca;
    border-radius: var(--kz-radius-md);
    opacity: 1 !important;
    visibility: visible !important;
}

textarea.form-control { min-height: 96px; }
.form-control::placeholder { color: #a89b90; opacity: 1; }

.form-control:focus, .form-select:focus {
    color: var(--kz-text) !important;
    background: var(--kz-surface) !important;
    border-color: var(--kz-primary);
    box-shadow: 0 0 0 .22rem rgba(233, 152, 40, .18);
}

.form-control:disabled, .form-select:disabled {
    color: #766b62 !important;
    background: #f7f2eb !important;
    opacity: 1 !important;
}

.form-check-input:checked {
    background-color: var(--kz-primary);
    border-color: var(--kz-primary);
}

.table-responsive { border-radius: var(--kz-radius-lg); }

.table {
    --bs-table-bg: var(--kz-surface);
    --bs-table-color: var(--kz-text);
    --bs-table-border-color: var(--kz-border-soft);
    --bs-table-hover-bg: var(--kz-surface-soft);
    margin-bottom: 0;
    color: var(--kz-text);
    background: var(--kz-surface);
}

.table > thead > tr > th {
    padding: .9rem .8rem;
    color: #7b3f0d;
    background: #fff6df;
    border-bottom: 1px solid var(--kz-border);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.table > tbody > tr > td {
    padding: .9rem .8rem;
    color: var(--kz-text);
    vertical-align: middle;
}

.badge, .kz-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .42rem .68rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 800;
}

.bg-success, .kz-badge-success { color: var(--kz-success) !important; background: var(--kz-success-soft) !important; }
.bg-warning, .kz-badge-warning { color: var(--kz-warning) !important; background: var(--kz-warning-soft) !important; }
.bg-danger, .kz-badge-danger { color: var(--kz-danger) !important; background: var(--kz-danger-soft) !important; }
.bg-info, .kz-badge-info { color: var(--kz-info) !important; background: var(--kz-info-soft) !important; }

.kz-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.kz-page-header h1 { margin: .2rem 0; font-size: clamp(1.55rem, 2.5vw, 2.15rem); }
.kz-page-header p { margin: 0; color: var(--kz-text-muted); }
.kz-eyebrow { display: block; color: var(--kz-primary-dark); font-size: .74rem; font-weight: 850; letter-spacing: .12em; }

.kz-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr);
    gap: 1.25rem;
}

.kz-card-accent { border-top: 4px solid var(--kz-primary); }
.kz-card-header { display: flex; align-items: flex-start; gap: .85rem; padding-bottom: 1.05rem; margin-bottom: 1.1rem; }
.kz-card-header h2 { margin: 0 0 .2rem; font-size: 1.12rem; }
.kz-card-header p { margin: 0; color: var(--kz-text-muted); font-size: .9rem; }
.kz-card-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px; background: var(--kz-primary-soft); }

.kz-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.kz-field-wide, .kz-field-full { grid-column: 1 / -1; }

.kz-switch-row {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-top: 1.1rem;
    padding: .9rem;
    color: var(--kz-text);
    background: var(--kz-surface-soft);
    border: 1px solid var(--kz-border-soft);
    border-radius: 14px;
    cursor: pointer;
}

.kz-switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.kz-switch-row > span:last-child { display: flex; flex-direction: column; }
.kz-switch-row strong { color: var(--kz-text); }
.kz-switch-row small { color: var(--kz-text-muted); }

.kz-switch { position: relative; width: 46px; height: 26px; flex: 0 0 46px; border-radius: 999px; background: #cfc5bc; }
.kz-switch::after { content: "\0042\1EAD\0074\0020quy\1EC1\006E\0020\0111\0103ng\0020nh\1EADp\0020\0111\1EC3\0020nh\1EADp\0020th\00F4ng\0020tin\0020t\00E0i\0020kho\1EA3n\002E"; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.18); transition: transform var(--kz-transition); }
.kz-switch-row input:checked + .kz-switch { background: var(--kz-primary); }
.kz-switch-row input:checked + .kz-switch::after { transform: translateX(20px); }

.kz-login-fields, .kz-login-fields.is-disabled {
    margin-top: 1rem;
    opacity: 1 !important;
    visibility: visible !important;
}

.kz-login-fields.is-disabled::before {
    content: "\0042\1EAD\0074\0020quy\1EC1\006E\0020\0111\0103ng\0020nh\1EADp\0020\0111\1EC3\0020nh\1EADp\0020th\00F4ng\0020tin\0020t\00E0i\0020kho\1EA3n\002E";
    display: block;
    margin-bottom: .8rem;
    padding: .7rem .8rem;
    color: var(--kz-text-secondary);
    background: #f8f3eb;
    border: 1px dashed var(--kz-border);
    border-radius: 10px;
    font-size: .84rem;
}

.kz-action-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    margin-top: 1.25rem;
    padding: .9rem;
    background: rgba(255,255,255,.94);
    border: 1px solid var(--kz-border);
    border-radius: 16px;
    box-shadow: 0 -8px 25px rgba(91,53,18,.09);
    backdrop-filter: blur(12px);
}

.validation-summary-valid, .kz-alert:empty { display: none; }

/* Sửa dứt điểm nội dung Create/Edit bị mờ hoặc ẩn. */
form, main, .content, .main-content, .page-content {
    opacity: 1 !important;
    visibility: visible !important;
}

form input:not([type="hidden"]),
form select,
form textarea,
form button,
form label,
form .card,
form .row,
form [class*="col-"] {
    opacity: 1 !important;
    visibility: visible !important;
}

.modal-backdrop:not(.show), .offcanvas-backdrop:not(.show) { display: none !important; }

@media (max-width: 992px) {
    .kz-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .kz-page-header { align-items: flex-start; flex-direction: column; }
    .kz-form-grid { grid-template-columns: 1fr; }
    .kz-field-wide, .kz-field-full { grid-column: auto; }
    .kz-action-bar { position: static; }
    .kz-action-bar .btn { flex: 1; }
}
/* KAZUKO DESIGN SYSTEM B2.1A - END */

/* KAZUKO SIDEBAR ORANGE - START */
.sidebar {
    background: linear-gradient(
        180deg,
        #F59E0B 0%,
        #EA580C 100%
    ) !important;

    border-right-color: #F6D98A !important;
}
/* KAZUKO SIDEBAR ORANGE - END */

/* KAZUKO DASHBOARD CARD FONT - START */

.dashboard-card h2,
.dashboard-card h3,
.dashboard-card h4,
.stat-card h2,
.stat-card h3,
.stat-card h4,
.card-title{
    font-size:22px !important;
    font-weight:800 !important;
    color:#2B2B2B !important;
}

.dashboard-card .value,
.dashboard-card .number,
.stat-card .value,
.stat-card .number,
.card-value,
.card-number{
    font-size:52px !important;
    font-weight:900 !important;
    line-height:1 !important;
    color:#1F2937 !important;
}

/* Nếu Dashboard dùng Bootstrap card */

.card h5{
    font-size:22px !important;
    font-weight:800 !important;
}

.card h3,
.card h2{
    font-size:54px !important;
    font-weight:900 !important;
    margin-top:8px;
}

/* KAZUKO DASHBOARD CARD FONT - END */


/* ===== KAZUKO SIDEBAR FONT ===== */

.sidebar,
.sidebar *{
    color:#FFFFFF !important;
    opacity:1 !important;
}

.sidebar .nav-link,
.sidebar a{
    color:#FFFFFF !important;
    font-size:24px !important;
    font-weight:700 !important;
    text-shadow:
        0 1px 2px rgba(0,0,0,.18);
    letter-spacing:.2px;
}

.sidebar .nav-link:hover{
    color:#FFF8E8 !important;
}

.sidebar .nav-link.active{
    color:#FFFFFF !important;
    font-weight:800 !important;
}

.sidebar .brand,
.sidebar .logo,
.sidebar .navbar-brand{
    font-size:42px !important;
    font-weight:900 !important;
    color:#FFFFFF !important;
    text-shadow:
        0 2px 4px rgba(0,0,0,.25);
}

/* ================================ */


/* ===== DASHBOARD CARD TITLE ===== */

.card h5,
.stat-card h5,
.dashboard-card h5,
.card-title{
    font-size:22px !important;      /* tăng khoảng 2 cỡ chữ */
    font-weight:800 !important;     /* đậm */
    color:#2B2B2B !important;
    line-height:1.35;
}

/* Trường hợp tiêu đề dùng span hoặc div */
.card .title,
.stat-card .title,
.dashboard-card .title{
    font-size:22px !important;
    font-weight:800 !important;
    color:#2B2B2B !important;
}

/* ===== END ===== */


/* ===== KAZUKO LOGO CENTER ===== */

.sidebar .brand,
.sidebar .logo,
.sidebar .navbar-brand{

    display:flex !important;

    justify-content:center !important;

    align-items:center !important;

    width:100%;

    text-align:center !important;

    white-space:nowrap !important;

    font-size:28px !important;

    font-weight:900 !important;

    letter-spacing:.5px;

    margin:18px 0 35px;

}

.sidebar .brand *,
.sidebar .logo *{

    display:inline !important;

}

/* ===== END ===== */


/* ===== FIX CUSTOMER CREATE EDIT VISIBILITY ===== */

body form.kz-form,
body form.kz-form *,
body .kz-page-header,
body .kz-grid,
body .kz-card,
body .kz-card *,
body .kz-action-bar {
    opacity: 1 !important;
    visibility: visible !important;
}

body form.kz-form {
    display: block !important;
}

body .kz-page-header {
    display: flex !important;
}

body .kz-grid {
    display: grid !important;
}

body .kz-card {
    display: block !important;
    background: #ffffff !important;
}

body .kz-action-bar {
    display: flex !important;
}

/* ===== END FIX ===== */



/* ===== FIX SWITCH TEXT CORRUPTION - START ===== */

/* Núm công tắc chỉ là hình tròn, tuyệt đối không hiển thị chữ */
.kz-switch::after {
    content: "" !important;
}

/* Thông báo chỉ xuất hiện ở vùng tài khoản khi chưa bật đăng nhập */
.kz-login-fields.is-disabled::before {
    content: "\0042\1EAD\0074\0020quy\1EC1\006E\0020\0111\0103ng\0020nh\1EADp\0020\0111\1EC3\0020nh\1EADp\0020th\00F4ng\0020tin\0020t\00E0i\0020kho\1EA3n\002E" !important;
    white-space: normal !important;
}

/* ===== FIX SWITCH TEXT CORRUPTION - END ===== */