/* TASU Solutions - Brand Identity CSS 
    Tên biến được ánh xạ trực tiếp từ WPF Resource Dictionary
*/
:root {
    /* ================= TITLE BAR & NAVIGATION ================= */
    --tasu-title-main: #3B332B;
    /* Brush.TitleBar.Main */
    --tasu-title-deep: #2F2923;
    /* Brush.TitleBar.Deep */
    --tasu-title-highlight: #453B30;
    /* Brush.TitleBar.Highlight */
    /* ================= LAYOUT (SIDEBAR/HEADER) ================= */
    --tasu-sidebar: #4A4035;
    /* Brush.Sidebar */
    --tasu-sidebar-light: #5A493D;
    /* Brush.Sidebar.Highlight */
    --tasu-subheader: #524739;
    /* Brush.SubHeader */
    /* ================= BACKGROUND ================= */
    --tasu-bg-main: #F6F4F1;
    /* Brush.Background.Main */
    --tasu-bg-secondary: #EDEAE6;
    /* Brush.Background.Secondary */
    --tasu-divider: #CFC6BA;
    /* Brush.Divider */
    /* ================= TEXT ================= */
    --tasu-text-primary: #2B2B2B;
    /* Brush.Text.Primary */
    --tasu-text-secondary: #6E655B;
    /* Brush.Text.Secondary */
    --tasu-text-on-dark: #F2EDE4;
    /* Brush.Text.OnDark */
    --tasu-text-accent: #8C3A2B;
    /* Brush.Text.OnAccentTitle (Đỏ nâu nhấn) */
    /* ================= ACCENT / ACTION (CHỦ ĐẠO) ================= */
    --tasu-accent: #C9A24D;
    /* Brush.Accent.Primary (Vàng đồng TASU) */
    --tasu-accent-dark: #B08A3C;
    /* Brush.Accent.Secondary */
    --tasu-accent-highlight: #D4AF6E;
    /* Brush.Accent.Highlight */
    /* ================= STATE ================= */
    --tasu-success: #6E8B5E;
    --tasu-warning: #D1A23C;
    --tasu-error: #8C3A2B;
}

/* 1. RESET & NỀN TẢNG (THEO PIRANHA.ORG) */
html,
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--tasu-bg-main);
    color: var(--tasu-text-primary);
    -webkit-font-smoothing: antialiased;
}

/* Ép phẳng hoàn toàn (Flat Design) giống WPF */
* {
    border-radius: 0 !important;
}

/* 2. NAVBAR (PHONG CÁCH TITLE BAR CỦA APP) */
.navbar {
    background-color: var(--tasu-title-main) !important;
    border-bottom: 2px solid var(--tasu-accent);
    padding: 0.5rem 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
    font-size: 1.15rem;
    /* Giảm nhẹ font-size so với mặc định Bootstrap */
    font-weight: 800;
    color: var(--tasu-accent) !important;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

.nav-link {
    color: var(--tasu-text-on-dark) !important;
    font-size: 0.75rem;
    /* Thu nhỏ thêm 1 cỡ */
    font-weight: 500;
    /* Nhẹ nhàng hơn */
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 0.5rem 0.5rem !important;
    margin: 0 0.75rem;
    /* Tách các tab ra một chút */
    transition: all 0.25s ease;
}

.nav-link:hover,
.nav-item.active .nav-link {
    background-color: transparent !important;
    /* Loại bỏ cục nền */
    color: var(--tasu-accent) !important;

    /* Gạch chân màu vàng mô phỏng Tab */
    text-decoration: underline !important;
    text-underline-offset: 8px;
    /* Đẩy gạch chân xa ra */
    text-decoration-thickness: 2px;
}



/* 4. CẤU TRÚC NỘI DUNG (MAIN CONTENT) */
main {
    padding-top: 65px;
    /* Đẩy xuống một lượng đúng bằng chiều cao của navbar (giờ đã mỏng đi do thu nhỏ font) */
}

/* Tùy chỉnh các Block của Piranha mặc định */
.block {
    margin-bottom: 4rem;
}

h1,
h2,
h3 {
    color: var(--tasu-title-main);
    font-weight: 700;
}

/* 5. FOOTER (MÀU TỐI CHUYÊN NGHIỆP) */
footer {
    background-color: var(--tasu-title-deep) !important;
    color: var(--tasu-text-on-dark) !important;
    border-top: 4px solid var(--tasu-accent);
}

.footer-text {
    color: var(--tasu-divider);
    /* Sử dụng nét chữ sáng dịu */
    font-size: 0.85rem;
    line-height: 1.6;
}

.footer-links a {
    color: var(--tasu-divider);
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.footer-links a:hover {
    color: var(--tasu-accent);
    padding-left: 6px;
    /* Hiệu ứng thò thụt thú vị */
}

.text-accent {
    color: var(--tasu-accent);
}

.copyright-text {
    color: var(--tasu-text-secondary);
    /* Text mờ cho khu vực bản quyền đằng dưới */
    font-size: 0.8rem;
}

.social-icon {
    display: inline-block;
    color: var(--tasu-divider);
    background-color: var(--tasu-title-highlight);
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 2px !important;
    margin-left: 8px;
    transition: all 0.2s;
}

.social-icon:hover {
    background-color: var(--tasu-accent);
    color: var(--tasu-title-main);
}

/* 6. THANH CUỘN (SCROLLBAR) CHO CHUYÊN NGHIỆP */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--tasu-bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--tasu-divider);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--tasu-accent);
}


/* ================= BUTTONS CUSTOMIZATION (WPF STYLE) ================= */

/* 1. Cấu hình chung cho tất cả Button (Nhẹ nhàng & Thanh thoát hơn) */
.btn {
    border-radius: 2px !important;
    /* Bo góc cực nhỏ, gần như vuông */
    font-size: 0.75rem;
    /* Thu nhỏ text button để cân với menu mới */
    font-weight: 500;
    /* Mỏng và nhẹ nhàng hơn */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.35rem 0.9rem;
    /* Thu nhỏ khoảng cách padding đáng kể để bớt thô */
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
    /* Bỏ gạch chân mặc định */
}

/* Trạng thái Hover chung */
.btn:hover {
    transform: none;
    /* Không nhảy nút để giữ đúng chất Flat Design */
}

/* 2. Button Chính (Accent - Vàng đồng TASU) */
.btn-primary {
    background-color: var(--tasu-accent) !important;
    color: var(--tasu-title-main) !important;
}

.btn-primary:hover {
    background-color: var(--tasu-accent-highlight) !important;
    /* Giữ nguyên viền để không bị giật style */
    border-color: var(--tasu-accent-highlight) !important;
}

.btn-primary:active {
    background-color: var(--tasu-accent-dark) !important;
}

/* 3. Button Phụ (Outline/Neutral - Theo tông màu Title Bar) */
.btn-outline-primary {
    border: 1px solid var(--tasu-accent) !important;
    color: var(--tasu-accent) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover {
    background-color: var(--tasu-accent) !important;
    color: var(--tasu-title-main) !important;
}

/* 4. Button Tối (Dành cho vùng nền sáng) */
.btn-dark {
    background-color: var(--tasu-title-main) !important;
    color: var(--tasu-text-on-dark) !important;
}

.btn-dark:hover {
    background-color: var(--tasu-title-highlight) !important;
}

/* 5. Trạng thái Error/Warning (State colors) */
.btn-danger {
    background-color: var(--tasu-error) !important;
    color: #fff !important;
}

.btn-success {
    background-color: var(--tasu-success) !important;
    color: #fff !important;
}

/* 6. Fix kích thước cho Button nhỏ (thường dùng trong table dữ liệu) */
.btn-sm {
    padding: 0.3rem 0.8rem;
    font-size: 0.75rem;
}