/* KimApp — giao diện theo ordersysvn.com (màu navy + cam, Roboto). Dùng chung cho mọi trang kế thừa base.html. */
:root {
    --k-navy: #01205E;
    --k-navy-deep: #010F33;
    --k-topbar: #16357F;
    --k-ink: #141B31;
    --k-muted: #5A6784;
    --k-flame: #F37006;
    --k-grad-flame: linear-gradient(103deg, #FF8A2B 0%, #F37006 52%, #E85800 100%);
    --k-cream: #FFF6EC;
    --k-tint: #FFF4EA;
    --k-line: #E7ECF5;
}
body { font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--k-ink); }

/* Dải trên */
.k-topbar { background: var(--k-topbar); color: #CBD8F2; font-size: .82rem; }
.k-topbar .k-in { display: flex; justify-content: space-between; align-items: center; min-height: 38px; gap: 12px; }
.k-topbar a { color: #C7D4EC; text-decoration: none; }
.k-topbar a:hover { color: #fff; }
.k-topbar .k-soc a { margin-left: 14px; font-size: 1rem; }
.k-topbar .k-soc a.k-lang { font-size: .82rem; }

/* Header */
.k-header { background: #fff; box-shadow: 0 2px 14px -10px rgba(1, 32, 94, .35); position: sticky; top: 0; z-index: 1020; }
.k-header .navbar { padding: 4px 0; }
.k-header .navbar-brand img { height: 60px; }
.k-header .nav-link { color: var(--k-ink); font-weight: 500; font-size: .97rem; padding-left: 11px !important; padding-right: 11px !important; }
.k-header .nav-link:hover, .k-header .nav-link.active { color: var(--k-flame); }
.k-header .navbar-toggler { border: 1.5px solid var(--k-line); border-radius: 12px; }
@media (max-width: 991.98px) {
    .k-header .navbar-brand img { height: 50px; }
    .k-header .navbar-collapse { padding: 8px 0 14px; }
}

/* Nút */
.btn-flame { background: var(--k-grad-flame); color: #fff !important; border: 0; border-radius: 999px; font-weight: 700;
             padding: 11px 26px; box-shadow: 0 8px 18px -10px rgba(243, 112, 6, .5); transition: transform .15s; }
.btn-flame:hover, .btn-flame:focus { transform: translateY(-2px); color: #fff; }
.btn-k-out { border: 1.5px solid var(--k-line); border-radius: 999px; font-weight: 700; padding: 10px 24px; color: var(--k-navy); background: #fff; }
.btn-k-out:hover { border-color: var(--k-flame); color: var(--k-flame); }
.btn-k-navy { background: var(--k-navy); color: #fff !important; border-radius: 999px; font-weight: 700; padding: 9px 20px; }
.btn-k-navy:hover { background: #0A2A6B; }

/* Hero trang chủ */
.k-hero { background: linear-gradient(180deg, rgba(255, 251, 244, .95), #fff); padding: 56px 0 48px; }
.k-pill { display: inline-flex; gap: 8px; align-items: center; border: 1px solid var(--k-line); background: #fff; border-radius: 999px;
          padding: 8px 16px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; color: #B4520A; text-transform: uppercase; }
.k-hero h1 { font-weight: 900; color: var(--k-navy); font-size: 2.6rem; line-height: 1.12; letter-spacing: -.02em; margin: 22px 0 18px; }
.k-hero h1 em { font-style: normal; background: var(--k-grad-flame); -webkit-background-clip: text; background-clip: text; color: transparent; }
.k-hero .lead { color: var(--k-muted); font-size: 1.1rem; line-height: 1.7; }
.k-ticks span { margin-right: 20px; font-weight: 500; font-size: .92rem; display: inline-block; }
.k-ticks i { color: var(--k-flame); }
.k-card { background: #fff; border: 1px solid var(--k-line); border-radius: 18px; box-shadow: 0 24px 50px -30px rgba(1, 32, 94, .45); padding: 28px; }
.k-card h2 { font-size: 1.25rem; font-weight: 800; color: var(--k-navy); }
@media (max-width: 991.98px) { .k-hero h1 { font-size: 2rem; } .k-hero { padding: 36px 0; } }

/* Khối nội dung */
.k-sec { padding: 56px 0; }
.k-sec.k-alt { background: var(--k-cream); }
.k-sec h2 { font-weight: 900; color: var(--k-navy); font-size: 1.9rem; letter-spacing: -.01em; }
.k-sec h2 em { font-style: normal; color: var(--k-flame); }
.feat { background: #fff; border: 1px solid var(--k-line); border-radius: 16px; height: 100%; transition: transform .2s, box-shadow .2s; }
.feat:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -24px rgba(1, 32, 94, .4); }
.feat .ic { width: 52px; height: 52px; border-radius: 14px; background: var(--k-tint); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.feat h3 { font-weight: 800; color: var(--k-navy); }
.feat a.stretched-link { text-decoration: none; }
#homeFaq .accordion-button { font-weight: 700; color: var(--k-navy); }
#homeFaq .accordion-button:not(.collapsed) { background: var(--k-tint); color: var(--k-flame); box-shadow: none; }

/* Footer */
.k-footer { background: var(--k-navy-deep); color: #A9BADA; padding: 52px 0 24px; font-size: .92rem; }
.k-footer h5 { color: #fff; font-weight: 800; font-size: 1rem; margin-bottom: 14px; }
.k-footer a { color: #A9BADA; text-decoration: none; display: block; margin-bottom: 8px; }
.k-footer a:hover { color: #fff; }
.k-footer .k-logo { background: #fff; border-radius: 12px; padding: 6px 10px; display: inline-block; margin-bottom: 14px; }
.k-footer .k-copy { border-top: 1px solid rgba(255, 255, 255, .08); margin-top: 32px; padding-top: 18px; font-size: .84rem;
                    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }

/* Nút nổi gọi / Zalo / Facebook */
.k-fab { position: fixed; right: 16px; bottom: 110px; display: flex; flex-direction: column; gap: 10px; z-index: 1030; }
.k-fab a { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff;
           font-weight: 800; text-decoration: none; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .4); font-size: 1.25rem; }
.k-fab .k-call { background: var(--k-grad-flame); }
.k-fab .k-zalo { background: #0068FF; font-size: .85rem; }
.k-fab .k-fb { background: #1877F2; }
@media (max-width: 575.98px) { .k-fab { bottom: 84px; right: 10px; } .k-fab a { width: 42px; height: 42px; font-size: 1.1rem; } }

/* Nút xanh mặc định của Bootstrap trong các khối trang chủ -> nút cam */
.home-sec .btn-primary { background: var(--k-grad-flame); border: 0; border-radius: 999px; font-weight: 700; padding: 10px 24px; }

/* ===== Đồng bộ màu cam cho cả site: ghi đè màu "primary" của Bootstrap 5.3 =====
   Liên kết dùng cam đậm #C2410C để đủ tương phản trên nền trắng (≈5:1). */
:root {
    --bs-primary: #F37006;
    --bs-primary-rgb: 243, 112, 6;
    --bs-primary-text-emphasis: #8A3A03;
    --bs-primary-bg-subtle: #FFF4EA;
    --bs-primary-border-subtle: #FFD3AD;
    --bs-link-color: #C2410C;
    --bs-link-color-rgb: 194, 65, 12;
    --bs-link-hover-color: #9A3412;
    --bs-link-hover-color-rgb: 154, 52, 18;
}
.btn-primary {
    --bs-btn-bg: #F37006; --bs-btn-border-color: #F37006;
    --bs-btn-hover-bg: #E85800; --bs-btn-hover-border-color: #E85800;
    --bs-btn-active-bg: #CC4E00; --bs-btn-active-border-color: #CC4E00;
    --bs-btn-disabled-bg: #F8A86A; --bs-btn-disabled-border-color: #F8A86A;
    --bs-btn-focus-shadow-rgb: 243, 112, 6;
    background-image: var(--k-grad-flame); border: 0; font-weight: 600;
}
.btn-outline-primary {
    --bs-btn-color: #C2410C; --bs-btn-border-color: #F37006;
    --bs-btn-hover-bg: #F37006; --bs-btn-hover-border-color: #F37006; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #E85800; --bs-btn-active-border-color: #E85800; --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #F8A86A; --bs-btn-disabled-border-color: #F8A86A;
    --bs-btn-focus-shadow-rgb: 243, 112, 6;
}
.form-control:focus, .form-select:focus { border-color: #F8A86A; box-shadow: 0 0 0 .25rem rgba(243, 112, 6, .2); }
.form-check-input:checked { background-color: #F37006; border-color: #F37006; }
.form-check-input:focus { border-color: #F8A86A; box-shadow: 0 0 0 .25rem rgba(243, 112, 6, .2); }
.nav-pills { --bs-nav-pills-link-active-bg: #F37006; }
.nav-link { --bs-nav-link-color: var(--k-ink); --bs-nav-link-hover-color: #C2410C; }
.progress, .progress-stacked { --bs-progress-bar-bg: #F37006; }
.pagination { --bs-pagination-active-bg: #F37006; --bs-pagination-active-border-color: #F37006; --bs-pagination-color: #C2410C; }
.dropdown-menu { --bs-dropdown-link-active-bg: #F37006; }
.list-group { --bs-list-group-active-bg: #F37006; --bs-list-group-active-border-color: #F37006; }