/*
Theme Name: Flatsome Child
Theme URI: https://uxthemes.com/
Description: This is a child theme for Flatsome Theme.
Author: UX Themes
Author URI: https://uxthemes.com/
Template: flatsome
Version: 3.0.1
*/

/* ==========================================
   KY MON CAI VAN - LIGHT SKIN THEME
   ========================================== */

:root {
    --primary-green: #007d43;      /* Deep green like sonchu.vn */
    --accent-gold: #b38b2d;        /* Elegant gold accent */
    --text-dark: #111111;          /* Dark charcoal for high contrast */
    --text-muted: #555555;         /* Muted gray for descriptions */
    --bg-light: #ffffff;           /* Pure white background */
    --bg-beige: #fdfaf3;           /* Light warm beige/cream */
    --border-light: #f0ede9;       /* Soft light gray/beige border */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Be Vietnam Pro', sans-serif;
}

/* Base resets & typography */
body {
    background-color: var(--bg-light) !important;
    color: var(--text-dark) !important;
    font-family: var(--font-body) !important;
}

/* .bta-clone-page = trang Báo cáo/Skill/Dịch vụ đồng bộ từ hoc.battutaman.vn: giữ màu tiêu đề gốc */
body:not(.bta-clone-page) h1, body:not(.bta-clone-page) h2, body:not(.bta-clone-page) h3,
body:not(.bta-clone-page) h4, body:not(.bta-clone-page) h5, body:not(.bta-clone-page) h6 {
    font-family: var(--font-heading) !important;
    color: var(--text-dark) !important;
    font-weight: 700 !important;
}

/* ==========================================
   PHẦN 1: HEADER & NAVIGATION CUSTOMIZATION
   ========================================== */

/* Header Wrapper */
.header-wrapper, #header {
    background-color: var(--bg-light) !important;
    border-bottom: 1px solid var(--border-light) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02) !important;
}

/* Logo brand text styling */
.header-main .logo-link {
    font-family: var(--font-heading) !important;
    font-size: 1.5rem !important;
    color: var(--primary-green) !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

/* Desktop Main Menu links styling */
.header-nav > li > a {
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-dark) !important;
    letter-spacing: 0.2px !important;
    text-transform: none !important;
    transition: color 0.25s ease !important;
}

.header-nav > li > a:hover {
    color: var(--primary-green) !important;
}

/* Mobile Bottom Navigation Bar */
#kymon-mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    border-top: 1px solid var(--border-light);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
    z-index: 9999;
    padding: 6px 0;
    box-sizing: border-box;
}

.kymon-bottom-nav-inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

.kymon-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none !important;
    color: #888888 !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    font-family: var(--font-body) !important;
    transition: all 0.2s ease;
    flex: 1;
    text-align: center;
}

.kymon-nav-icon {
    width: 20px;
    height: 20px;
    margin-bottom: 3px;
    transition: stroke 0.2s ease;
}

/* Active bottom item state */
.kymon-nav-item.active,
.kymon-nav-item:hover {
    color: var(--primary-green) !important;
}
.kymon-nav-item.active .kymon-nav-icon,
.kymon-nav-item:hover .kymon-nav-icon {
    stroke: var(--primary-green) !important;
}

/* Prominent Central Tools Action Button (Center item) */
.kymon-nav-center {
    position: relative;
    top: -15px; /* Floats the button slightly above the bar */
}

.kymon-center-circle {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary-green) 0%, #005a30 100%);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 125, 67, 0.35);
    border: 3px solid #ffffff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kymon-nav-center .kymon-nav-icon {
    stroke: #ffffff !important;
    width: 22px;
    height: 22px;
    margin-bottom: 0;
}

.kymon-nav-center span.center-label {
    margin-top: 4px;
    color: var(--primary-green) !important;
    font-weight: 700 !important;
}

.kymon-nav-center:hover .kymon-center-circle {
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(0, 125, 67, 0.45);
}

/* Adjust page padding on mobile to not hide content behind the fixed bottom bar */
@media (max-width: 849px) {
    body {
        padding-bottom: 60px !important;
    }
}

/* ==========================================
   HOMEPAGE LAYOUT AND CONTENT STYLING
   ========================================== */

.kymon-new-homepage {
    background-color: var(--bg-light);
    color: var(--text-dark);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
}

/* General Layout helpers */
.kymon-section-tag {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent-gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
}
.kymon-section-tag.font-alt {
    color: var(--primary-green);
}

.kymon-section-heading {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    color: var(--text-dark);
    margin: 0;
    font-weight: 700;
    line-height: 1.25;
}

.kymon-header-divider {
    width: 60px;
    height: 3px;
    background-color: var(--primary-green);
    margin: 15px auto 0 auto;
}
.kymon-header-divider.left-align {
    margin-left: 0;
}

.kymon-section-header {
    text-align: center;
    margin-bottom: 50px;
}

/* BUTTONS */
.kymon-btn {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    cursor: pointer;
}
.kymon-btn-primary {
    background-color: var(--primary-green);
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 125, 67, 0.2);
}
.kymon-btn-primary:hover {
    background-color: #005a30;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 125, 67, 0.3);
}
.kymon-btn-secondary {
    background-color: transparent;
    color: var(--accent-gold) !important;
    border: 1px solid var(--accent-gold);
}
.kymon-btn-secondary:hover {
    background-color: rgba(179, 139, 45, 0.05);
    transform: translateY(-2px);
}

/* ==========================================
   SECTION 1 & 2: HERO BANNER & QUICK TOOLS
   ========================================== */

.kymon-hero-section {
    background: radial-gradient(circle at top right, rgba(253, 250, 243, 0.6) 0%, #ffffff 80%);
    padding: 90px 20px 80px 20px;
    border-bottom: 1px solid var(--border-light);
}

.kymon-hero-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 70px;
}

.kymon-hero-content-left {
    text-align: left;
}

.kymon-hero-brand-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary-green);
    border: 1.5px solid var(--primary-green);
    padding: 3px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 20px;
}

.kymon-hero-title {
    font-family: var(--font-heading);
    font-size: 2.4rem;
    color: var(--text-dark);
    margin: 0 0 10px 0;
    line-height: 1.15;
    font-weight: 800;
}

.kymon-hero-subtitle {
    font-family: var(--font-body);
    font-size: 1.3rem;
    color: var(--accent-gold);
    margin: 0 0 24px 0;
    font-weight: 600;
    line-height: 1.4;
}

.kymon-hero-intro-text {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 30px;
}

.kymon-hero-address-badge {
    display: inline-flex;
    align-items: center;
    background-color: var(--bg-beige);
    border: 1px solid var(--border-light);
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 35px;
    color: var(--text-dark);
}

.kymon-hero-address-badge .addr-icon {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    stroke: var(--accent-gold);
    flex-shrink: 0;
}

.kymon-hero-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* ==========================================
   HERO BANNER V2 STYLES (Module 1 Redesign)
   ========================================== */
.kymon-hero-v2 {
    grid-template-columns: 1.15fr 0.85fr !important;
    gap: 40px !important;
    align-items: center !important;
}

.kymon-hero-brand-badge-v2 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 20px;
    letter-spacing: 0.3px;
}

.kymon-hero-title-v2 {
    font-family: var(--font-heading, 'Cinzel', serif);
    font-size: 2.25rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
    margin-bottom: 18px;
}

.kymon-hero-title-v2 .highlight-gold {
    background: linear-gradient(135deg, #b45309 0%, #d97706 50%, #92400e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.kymon-hero-intro-text-v2 {
    font-size: 1.05rem;
    color: #475569;
    line-height: 1.7;
    margin-bottom: 28px;
}

.kymon-hero-actions-v2 {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.kymon-btn-v2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.kymon-btn-guide {
    background: linear-gradient(135deg, #047857 0%, #059669 100%);
    color: #ffffff !important;
    border: 1px solid #047857;
}

.kymon-btn-guide:hover {
    background: linear-gradient(135deg, #065f46 0%, #047857 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(4, 120, 87, 0.25);
    color: #ffffff !important;
}

.kymon-btn-offer {
    background: linear-gradient(135deg, #991b1b 0%, #dc2626 100%);
    color: #ffffff !important;
    border: 1px solid #991b1b;
}

.kymon-btn-offer:hover {
    background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(153, 27, 27, 0.25);
    color: #ffffff !important;
}

.kymon-btn-tools-link {
    background: #ffffff;
    color: #1e293b !important;
    border: 1.5px solid #cbd5e1;
}

.kymon-btn-tools-link:hover {
    border-color: #b45309;
    color: #b45309 !important;
    transform: translateY(-2px);
}

.kymon-btn-thoivan {
    background: linear-gradient(135deg, #4c0519 0%, #881337 50%, #b45309 100%);
    color: #ffffff !important;
    border: 1.5px solid #f59e0b;
    box-shadow: 0 4px 14px rgba(136, 19, 55, 0.28);
    position: relative;
    overflow: hidden;
}

.kymon-btn-thoivan:hover {
    background: linear-gradient(135deg, #2a040d 0%, #700f2b 50%, #92400e 100%);
    border-color: #fbbf24;
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(136, 19, 55, 0.45);
    color: #ffffff !important;
}

.kymon-btn-luangiai {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
    color: #ffffff !important;
    border: 1.5px solid #f59e0b;
    box-shadow: 0 4px 14px rgba(30, 27, 75, 0.35);
    position: relative;
    overflow: hidden;
}

.kymon-btn-luangiai:hover {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #3730a3 100%);
    border-color: #fbbf24;
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(49, 46, 129, 0.5);
    color: #ffffff !important;
}

.kymon-btn-trachcat {
    background: linear-gradient(135deg, #064e3b 0%, #047857 50%, #0f766e 100%);
    color: #ffffff !important;
    border: 1.5px solid #f59e0b;
    box-shadow: 0 4px 14px rgba(4, 120, 87, 0.32);
    position: relative;
    overflow: hidden;
}

.kymon-btn-trachcat:hover {
    background: linear-gradient(135deg, #022c22 0%, #065f46 50%, #115e59 100%);
    border-color: #fbbf24;
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(4, 120, 87, 0.48);
    color: #ffffff !important;
}

.kymon-btn-hoahop {
    background: linear-gradient(135deg, #4a044e 0%, #701a75 50%, #9d174d 100%);
    color: #ffffff !important;
    border: 1.5px solid #f59e0b;
    box-shadow: 0 4px 14px rgba(112, 26, 117, 0.35);
    position: relative;
    overflow: hidden;
}

.kymon-btn-hoahop:hover {
    background: linear-gradient(135deg, #2e0233 0%, #58105d 50%, #831843 100%);
    border-color: #fbbf24;
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(112, 26, 117, 0.52);
    color: #ffffff !important;
}

/* Right Content Column: Highlight Cards */
.kymon-hero-content-right-v2 {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.kymon-hero-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    border: 1.5px solid #e2e8f0;
    transition: all 0.3s ease;
}

.kymon-hero-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.1);
}

.pro-card {
    border-color: #fde68a;
    background: linear-gradient(180deg, #fffdf5 0%, #ffffff 100%);
}

.card-badge-vip {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    color: #b45309;
    background: #fef3c7;
    padding: 4px 10px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.pro-card .card-title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 16px 0;
}

.hero-card-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hero-card-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.hero-card-features .feat-icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}

.hero-card-features .feat-text strong {
    display: block;
    font-size: 14px;
    color: #1e293b;
    margin-bottom: 2px;
}

.hero-card-features .feat-text span {
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.4;
    display: block;
}

/* August Offer Card */
.offer-card {
    background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
    color: #ffffff;
    border: 1px solid #b91c1c;
    position: relative;
    overflow: hidden;
}

.offer-card .offer-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.offer-card .offer-flame-icon {
    font-size: 28px;
}

.offer-card .offer-title {
    font-size: 15px;
    font-weight: 800;
    color: #fef08a;
    margin: 0;
    letter-spacing: 0.5px;
}

.offer-card .offer-subtitle {
    font-size: 12px;
    color: #fecca3;
}

.offer-price-box {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border: 1px dashed rgba(254, 240, 138, 0.4);
}

.discount-pill {
    display: inline-block;
    background: #fef08a;
    color: #7f1d1d;
    font-weight: 800;
    font-size: 13px;
    padding: 3px 10px;
    border-radius: 4px;
    margin-bottom: 6px;
}

.gift-item {
    font-size: 12.5px;
    color: #ffffff;
    line-height: 1.4;
}

.kymon-btn-upgrade {
    width: 100%;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff !important;
    border: none;
    padding: 12px 16px;
    text-align: center;
    border-radius: 8px;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.4);
}

.kymon-btn-upgrade:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    transform: translateY(-2px);
    color: #ffffff !important;
}

.offer-footer-note {
    font-size: 11.5px;
    color: #fecca3;
    text-align: center;
    margin-top: 10px;
}

/* Responsive adjustments for Hero V2 */
@media (max-width: 1024px) {
    .kymon-hero-v2 {
        grid-template-columns: 1fr !important;
        gap: 35px !important;
    }
    
    .kymon-hero-title-v2 {
        font-size: 1.85rem;
    }
    
    .kymon-hero-actions-v2 {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .kymon-hero-title-v2 {
        font-size: 1.55rem;
    }
    
    .kymon-hero-actions-v2 {
        flex-direction: column;
        width: 100%;
    }
    
    .kymon-btn-v2 {
        width: 100%;
        justify-content: center;
    }
}

/* Quick Tools Grid below banner */
.kymon-quick-tools-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 20px;
}

.kymon-tools-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
}

.kymon-tool-card {
    background-color: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 35px 25px;
    text-align: left;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: calc(25% - 20px);
    min-width: 250px;
    box-sizing: border-box;
}

@media (max-width: 1200px) {
    .kymon-tool-card {
        width: calc(33.333% - 20px);
    }
}

@media (max-width: 991px) {
    .kymon-tool-card {
        width: calc(50% - 15px);
    }
}

@media (max-width: 575px) {
    .kymon-tool-card {
        width: 100%;
    }
}

.kymon-tool-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-green);
    box-shadow: 0 15px 40px rgba(0, 125, 67, 0.05);
}

.kymon-tool-icon-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.tool-num {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-gold);
    letter-spacing: 1px;
}

.tool-icon {
    font-size: 2.2rem;
}

.kymon-tool-card h3 {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    color: var(--text-dark);
    margin: 0 0 12px 0;
    font-weight: 700;
}

.kymon-tool-card p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 25px 0;
    flex-grow: 1;
}

.kymon-tool-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-green);
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease;
}

.kymon-tool-link:after {
    content: " →";
    margin-left: 5px;
    transition: transform 0.2s ease;
}

.kymon-tool-card:hover .kymon-tool-link {
    color: var(--accent-gold);
}
.kymon-tool-card:hover .kymon-tool-link:after {
    transform: translateX(3px);
}

/* ==========================================
   SECTION 3: TRỢ LÝ TRÍ TUỆ NHÂN TẠO AI
   ========================================== */

.kymon-ai-section {
    padding: 90px 20px;
    background-color: var(--bg-beige);
    border-bottom: 1px solid var(--border-light);
}

.kymon-ai-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.kymon-ai-left {
    text-align: left;
}

.kymon-ai-desc {
    font-size: 1.05rem;
    color: var(--text-muted);
    margin-bottom: 30px;
    line-height: 1.7;
}

.kymon-ai-features {
    margin-bottom: 35px;
}

.ai-feature-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 600;
}

.feat-check {
    color: var(--primary-green);
    font-weight: 900;
    margin-right: 12px;
}

/* Chat Mockup Styling */
.kymon-chat-mockup {
    background-color: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.chat-header {
    background-color: var(--primary-green);
    color: #ffffff;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.chat-avatar {
    font-size: 1.5rem;
}

.chat-status h4 {
    color: #ffffff !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    margin: 0;
}

.chat-status span {
    font-size: 11px;
    opacity: 0.8;
}

.chat-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: #fafbfc;
}

.chat-msg {
    max-width: 85%;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
}

.chat-msg.user {
    background-color: #e2f0d9;
    color: #2b542c;
    align-self: flex-end;
    border-bottom-right-radius: 2px;
}

.chat-msg.bot {
    background-color: #ffffff;
    color: var(--text-dark);
    align-self: flex-start;
    border-bottom-left-radius: 2px;
    border: 1px solid var(--border-light);
}

/* Premium Chat Mockup Styling */
.kymon-chat-mockup-premium {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
}

.chat-header-premium {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #ffffff;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 2px solid var(--accent-gold);
}

.chat-logo-premium {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border: 1.5px solid var(--accent-gold) !important;
    background-color: #ffffff;
    object-fit: cover;
}

.chat-status-premium {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.chat-status-premium h4 {
    color: #ffffff !important;
    font-family: var(--font-heading) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin: 0 0 2px 0 !important;
    letter-spacing: 0.5px;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    opacity: 0.9;
    color: #34d399;
}

.status-dot {
    width: 7px;
    height: 7px;
    background-color: #10b981;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 8px #10b981;
    animation: pulseActive 2s infinite;
}

@keyframes pulseActive {
    0% { transform: scale(0.9); opacity: 0.6; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.6; }
}

.chat-body-premium {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: #f8fafc;
}

.chat-msg-premium {
    max-width: 88%;
    padding: 14px 20px;
    font-size: 13.5px;
    line-height: 1.6;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02);
}

.chat-msg-premium.user {
    background-color: #ffffff;
    color: #334155;
    align-self: flex-end;
    border-radius: 18px 18px 2px 18px;
    border: 1px solid #e2e8f0;
    text-align: left;
}

.chat-msg-premium.bot {
    background-color: #ffffff;
    color: #0f172a;
    align-self: flex-start;
    border-radius: 18px 18px 18px 2px;
    border: 1px solid #e2e8f0;
    position: relative;
    padding-left: 24px;
    text-align: left;
}

.bot-accent-bar {
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    background-color: var(--accent-gold);
    border-radius: 0 2px 2px 0;
}

.chat-suggestions-premium {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.suggestion-tag {
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    color: #475569;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.suggestion-tag:hover {
    border-color: var(--accent-gold);
    color: var(--accent-gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(184, 134, 11, 0.08);
}

/* ==========================================
   SECTION 4: KHÓA HỌC TRỰC TUYẾN
   ========================================== */

.kymon-courses-section {
    padding: 90px 20px;
    background-color: #ffffff;
    border-bottom: 1px solid var(--border-light);
}

.kymon-courses-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}

.kymon-course-card {
    background-color: var(--bg-beige);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    padding: 35px 30px;
    transition: all 0.3s ease;
}

.kymon-course-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-gold);
    box-shadow: 0 12px 35px rgba(179, 139, 45, 0.06);
}

.course-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 11px;
    font-weight: 700;
    color: var(--primary-green);
    background-color: #e1f5fe;
    padding: 3px 10px;
    border-radius: 4px;
    text-transform: uppercase;
}

.course-badge.gold {
    color: var(--accent-gold);
    background-color: #fff9db;
}

.kymon-course-card h3 {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    margin: 0 0 15px 0;
}

.kymon-course-card p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 30px;
}

.course-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.course-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-green);
}

.kymon-course-btn {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark);
    text-decoration: none !important;
    border-bottom: 2px solid var(--accent-gold);
    padding-bottom: 2px;
    transition: color 0.2s ease;
}

.kymon-course-btn:hover {
    color: var(--primary-green);
}

/* ==========================================
   SECTION 5: GIỚI THIỆU CHUYÊN GIA
   ========================================== */

.kymon-expert-section {
    padding: 95px 20px;
    background-color: #ffffff;
    border-bottom: 1px solid var(--border-light);
}

.kymon-expert-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 50px;
    align-items: flex-start;
}

.kymon-expert-image-wrapper {
    position: relative;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}

.kymon-expert-img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    position: relative;
    z-index: 2;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.expert-frame {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid var(--accent-gold);
    border-radius: 12px;
    top: 20px;
    left: 20px;
    z-index: 1;
}

.kymon-expert-name {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    margin: 0 0 5px 0;
}

.kymon-expert-title {
    font-family: var(--font-body);
    font-size: 1.15rem;
    color: var(--accent-gold);
    margin: 0 0 20px 0;
    font-weight: 600;
}

.expert-quote {
    font-size: 1.1rem;
    font-style: italic;
    color: var(--primary-green);
    line-height: 1.6;
    margin-bottom: 35px;
    border-left: 3px solid var(--accent-gold);
    padding-left: 20px;
}

.expert-bio-sections {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.bio-block h4 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--text-dark);
    margin: 0 0 10px 0;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 8px;
}

.bio-block p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
}

.expert-skills-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.expert-skills-list li {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 12px;
    position: relative;
    padding-left: 20px;
}

.expert-skills-list li:before {
    content: "🔸";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 10px;
}

/* ==========================================
   SECTION 6: BÀI VIẾT MỚI & TỦ SÁCH HỌC THUẬT
   ========================================== */

.kymon-library-section {
    padding: 90px 20px;
    background-color: var(--bg-beige);
    border-bottom: 1px solid var(--border-light);
}

.kymon-library-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 50px;
}

.kymon-lib-col h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin-bottom: 30px;
    border-bottom: 2px solid var(--border-light);
    padding-bottom: 12px;
}

.lib-items-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lib-article-item {
    background-color: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 20px;
    text-decoration: none !important;
    display: block;
    transition: all 0.25s ease;
}

.lib-article-item:hover {
    border-color: var(--primary-green);
    box-shadow: 0 8px 24px rgba(0,0,0,0.03);
    transform: translateY(-2px);
}

.article-date {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-gold);
    display: block;
    margin-bottom: 8px;
}

.lib-article-item h4 {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--text-dark);
    margin: 0;
    font-weight: 600;
    line-height: 1.4;
}

.lib-article-item:hover h4 {
    color: var(--primary-green);
}

.lib-books-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
}

.book-card {
    background-color: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 24px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}

.book-cover {
    font-size: 3.5rem;
    margin-bottom: 15px;
}

.book-card h4 {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-dark);
    margin: 0 0 5px 0;
    font-weight: 700;
    line-height: 1.4;
}

.book-card span {
    font-size: 12px;
    color: var(--text-muted);
}

/* ==========================================
   SECTION 7: CHÂN TRANG / FOOTER
   ========================================== */

.kymon-footer {
    background-color: #ffffff;
    border-top: 1px solid var(--border-light);
    padding: 60px 20px 20px 20px;
}

.kymon-footer-container {
    max-width: 1200px;
    margin: 0 auto 40px auto;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
}

.footer-brand h2 {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    color: var(--primary-green);
    margin: 0 0 15px 0;
}

.footer-brand p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 500px;
}

.footer-contacts h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    margin: 0 0 15px 0;
}

.footer-contacts p {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.footer-contacts strong {
    color: var(--text-dark);
}

.footer-copyright {
    text-align: center;
    border-top: 1px solid var(--border-light);
    padding-top: 20px;
    font-size: 12px;
    color: var(--text-muted);
}

/* ==========================================
   RESPONSIVE MEDIA QUERIES
   ========================================== */

@media (max-width: 991px) {
    .kymon-hero-container,
    .kymon-ai-container,
    .kymon-expert-container,
    .kymon-library-container,
    .kymon-library-grid,
    .kymon-footer-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .kymon-hero-content-left,
    .kymon-hero-content-right,
    .kymon-ai-left,
    .kymon-expert-left,
    .kymon-expert-right {
        text-align: center;
    }
    
    .kymon-hero-title {
        font-size: 2.4rem;
    }
    
    .kymon-hero-address-badge {
        justify-content: center;
    }
    
    .kymon-hero-actions {
        justify-content: center;
    }
    
    .kymon-header-divider.left-align {
        margin-left: auto;
    }
    
    .expert-quote {
        border-left: none;
        border-top: 1px solid var(--border-light);
        border-bottom: 1px solid var(--border-light);
        padding: 20px 0;
    }
}

@media (max-width: 575px) {
    .kymon-hero-title {
        font-size: 2rem;
    }
    
    .kymon-courses-grid {
        grid-template-columns: 1fr;
    }
    
    .kymon-compass-orbit {
        width: 290px;
        height: 290px;
    }
    
    .kymon-rotating-compass {
        width: 240px;
        height: 240px;
    }
}

/* ==========================================
   KYMON CUSTOM HEADER STYLING (SONCHU.VN)
   ========================================== */

.kymon-custom-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--border-light) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03) !important;
    padding: 12px 24px;
    box-sizing: border-box;
}

.kymon-header-container-inner {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    gap: 8px;
}

/* Left: Logo and Brand */
.kymon-header-left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.kymon-header-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none !important;
}

.kymon-header-logo-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    margin-right: 10px;
    flex-shrink: 0;
}

.kymon-header-logo-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.kymon-header-brand-title {
    display: block;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-green) !important;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.kymon-header-brand-subtitle {
    display: block;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-gold) !important;
    line-height: 1.1;
}

/* Center: Navigation List */
.kymon-header-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
}

.kymon-header-nav-list {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: clamp(8px, 1.2vw, 18px);
    justify-content: center;
    align-items: center;
}

.kymon-nav-item-wrap {
    position: relative;
    flex-shrink: 0;
    padding: 6px 0;
}

.kymon-header-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none !important;
    color: var(--text-dark) !important;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.kymon-header-nav-link .nav-icon {
    width: 22px;
    height: 22px;
    stroke: #888888;
    margin-bottom: 4px;
    transition: stroke 0.2s ease;
}

.kymon-nav-item-wrap.active .kymon-header-nav-link .nav-icon,
.kymon-nav-item-wrap:hover .kymon-header-nav-link .nav-icon {
    stroke: var(--primary-green) !important;
}

.kymon-nav-item-wrap.active .kymon-header-nav-link,
.kymon-nav-item-wrap:hover .kymon-header-nav-link {
    color: var(--primary-green) !important;
}

.kymon-nav-item-wrap.active:after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--primary-green);
    border-radius: 2px;
}

/* ==========================================================================
   DROPDOWN MENU: THỜI VẬN (DESKTOP & MOBILE DRAWER)
   ========================================================================== */
.kymon-nav-has-dd {
    position: relative;
}

.kymon-nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(14px);
    background: #ffffff;
    border: 1.5px solid #ece5d6;
    border-radius: 18px;
    padding: 10px;
    min-width: 320px;
    box-shadow: 0 16px 40px rgba(15, 31, 61, 0.12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1000;
}

.kymon-nav-dropdown-menu::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-top: 1.5px solid #ece5d6;
    border-left: 1.5px solid #ece5d6;
}

.kymon-nav-has-dd:hover > .kymon-nav-dropdown-menu,
.kymon-nav-has-dd:focus-within > .kymon-nav-dropdown-menu,
.kymon-nav-has-dd.is-open > .kymon-nav-dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(4px);
}

.kymon-nav-dd-item {
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    margin-bottom: 4px;
}

.kymon-nav-dd-item:last-child {
    margin-bottom: 0;
}

.kymon-nav-dd-item:hover {
    background: #faf7f0;
    transform: translateX(3px);
}

.kymon-nav-dd-item .dd-ico-box {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fff7e6, #fbf0d3);
    border: 1px solid #ebdcc5;
    display: grid;
    place-items: center;
    font-size: 20px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.kymon-nav-dd-item:hover .dd-ico-box {
    transform: scale(1.08) rotate(4deg);
}

.kymon-nav-dd-item .dd-content {
    display: flex;
    flex-direction: column;
}

.kymon-nav-dd-item .dd-title {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    color: #0f1f3d !important;
    line-height: 1.35;
    transition: color 0.2s ease;
}

.kymon-nav-dd-item:hover .dd-title {
    color: #b47e1f !important;
}

.kymon-nav-dd-item .dd-desc {
    font-size: 12px;
    color: #64748b;
    line-height: 1.35;
    margin-top: 2px;
}

/* Mobile Drawer Sub-Menu */
.drawer-nav-item-has-sub .drawer-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.drawer-nav-item-has-sub .drawer-sub-toggle {
    font-size: 16px;
    color: #94a3b8;
    padding: 0 12px;
    transition: transform 0.25s ease;
}

.drawer-nav-item-has-sub.is-open .drawer-sub-toggle {
    transform: rotate(180deg);
    color: var(--primary-green);
}

.drawer-sub-list {
    list-style: none !important;
    margin: 4px 0 8px 32px !important;
    padding: 0 !important;
    display: none;
    border-left: 2px solid #e2e8f0;
}

.drawer-nav-item-has-sub.is-open .drawer-sub-list {
    display: block;
}

.drawer-sub-list li a {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 8px 12px !important;
    border-radius: 10px;
    color: #334155 !important;
    text-decoration: none !important;
    font-size: 13.5px;
}

.drawer-sub-list li a:hover {
    background: #f8fafc;
    color: var(--primary-green) !important;
}

.drawer-sub-list .d-sub-ico {
    font-size: 18px;
    flex-shrink: 0;
}

.drawer-sub-list .d-sub-txt {
    display: flex;
    flex-direction: column;
}

.drawer-sub-list .d-sub-txt strong {
    font-size: 13px;
    font-weight: 700;
    color: #0f1f3d;
}

.drawer-sub-list .d-sub-txt small {
    font-size: 11px;
    color: #64748b;
}

/* Right: Buttons and Actions */
.kymon-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.kymon-head-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 20px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.25s ease;
    box-sizing: border-box;
    line-height: 1;
}

.kymon-head-btn .btn-icon {
    width: 16px;
    height: 16px;
    stroke: #ffffff;
}

.kymon-head-btn-gold {
    background: linear-gradient(135deg, var(--accent-gold) 0%, #906c1a 100%);
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(179, 139, 45, 0.15);
}

.kymon-head-btn-gold:hover {
    transform: translateY(-1.5px);
    box-shadow: 0 6px 15px rgba(179, 139, 45, 0.25);
}

.kymon-head-btn-green {
    background: linear-gradient(135deg, var(--primary-green) 0%, #005a30 100%);
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0, 125, 67, 0.15);
}

.kymon-head-btn-green:hover {
    transform: translateY(-1.5px);
    box-shadow: 0 6px 15px rgba(0, 125, 67, 0.25);
}

/* Action Icons */
.kymon-head-action-icons {
    display: flex;
    gap: 12px;
    margin: 0 8px;
}

.kymon-head-icon-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #faf7f2;
    color: #555555 !important;
    transition: all 0.2s ease;
}

.kymon-head-icon-link:hover {
    background-color: #f1ebd9;
    color: var(--primary-green) !important;
}

.kymon-head-icon-link .act-icon {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

/* Mobile Toggle Hamburger */
.kymon-mobile-toggle {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: var(--text-dark);
    display: flex;
    justify-content: center;
    align-items: center;
}

.kymon-mobile-toggle .toggle-icon {
    width: 26px;
    height: 26px;
    stroke: currentColor;
}

/* Mobile Drawer */
.kymon-mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999 !important; /* Raised z-index to sit on top of Flatsome bottom navigation */
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
}

.kymon-mobile-drawer.active {
    visibility: visible;
    opacity: 1;
}

.drawer-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

.drawer-content {
    position: absolute;
    left: -280px;
    right: auto;
    top: 0;
    width: 280px;
    height: 100vh !important;
    max-height: 100vh !important;
    background: #ffffff;
    padding: 30px 20px 80px 20px !important; /* Added 80px bottom padding to keep tools visible above bottom navigations */
    box-shadow: 5px 0 25px rgba(0, 0, 0, 0.15);
    transition: left 0.3s ease;
    display: block !important; /* Changed from flex to block to prevent browser-specific scrolling bugs */
    box-sizing: border-box;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.kymon-mobile-drawer.active .drawer-content {
    left: 0;
    right: auto;
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 15px;
}

.drawer-header h3 {
    margin: 0;
    font-size: 18px;
    font-family: var(--font-heading);
    color: var(--primary-green);
}

.drawer-close {
    font-size: 28px;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    color: #888888;
    padding: 0;
}

.drawer-nav {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left;
}

.drawer-nav li {
    margin-bottom: 20px;
}

.drawer-nav a {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark) !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.drawer-nav a:hover {
    color: var(--primary-green) !important;
}

/* Hide default Flatsome elements we don't need */
.header-main, #top-bar, .header-wrapper {
    display: none !important;
}

/* ==========================================
   KYMON TOOLS PAGE & OVERRIDE STYLING (ACCORDION & LIGHT THEME)
   ========================================== */

.kymon-tools-page-wrapper {
    background-color: #faf7f2;
    min-height: 100vh;
    padding-bottom: 0px;
    box-sizing: border-box;
}

/* Hero Section */
.kymon-tools-hero {
    background: linear-gradient(135deg, var(--primary-green) 0%, #005a30 100%);
    padding: 50px 20px;
    text-align: center;
    color: #ffffff;
}

.kymon-tools-hero-inner {
    max-width: 800px;
    margin: 0 auto;
}

.kymon-tools-badge {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--accent-gold);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 20px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
    border: 1px solid rgba(179, 139, 45, 0.3);
}

.kymon-tools-title {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.kymon-tools-subtitle {
    font-family: var(--font-body);
    font-size: 1rem;
    color: #f0e9df;
    margin: 0;
    font-weight: 400;
    line-height: 1.5;
}

/* Container */
.kymon-tools-hub-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 30px 16px;
    box-sizing: border-box;
}

/* Premium CTA Register Banner */
.kymon-tools-cta-banner {
    background: #ffffff;
    border: 2px solid var(--accent-gold);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    box-shadow: 0 6px 20px rgba(179, 139, 45, 0.05);
    box-sizing: border-box;
}

.cta-banner-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cta-lock-icon {
    font-size: 32px;
    filter: drop-shadow(0 2px 4px rgba(179, 139, 45, 0.15));
    flex-shrink: 0;
}

.cta-text-wrap {
    text-align: left;
}

.cta-text-wrap h3 {
    margin: 0 0 4px 0;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-green);
}

.cta-text-wrap p {
    margin: 0;
    font-family: var(--font-body);
    font-size: 13.5px;
    color: #555555;
    line-height: 1.4;
}

.kymon-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-green) 0%, #005a30 100%);
    color: #ffffff !important;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none !important;
    padding: 12px 24px;
    border-radius: 25px;
    box-shadow: 0 4px 15px rgba(0, 125, 67, 0.2);
    transition: all 0.25s ease;
    white-space: nowrap;
    border: none;
    cursor: pointer;
}

.kymon-cta-btn:hover {
    transform: translateY(-1.5px);
    box-shadow: 0 6px 20px rgba(0, 125, 67, 0.3);
}

@media (max-width: 768px) {
    .kymon-tools-cta-banner {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    .cta-banner-content {
        flex-direction: column;
        gap: 10px;
    }
    .cta-text-wrap {
        text-align: center;
    }
    .kymon-cta-btn {
        width: 100%;
    }
}

/* Accordion Card Styles */
.kymon-accordion-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.kymon-accordion-card {
    background-color: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
    overflow: hidden;
    transition: all 0.3s ease;
}

.kymon-accordion-card.expanded {
    border-color: var(--accent-gold);
    box-shadow: 0 10px 30px rgba(179, 139, 45, 0.08);
}

.card-header {
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background-color: #ffffff;
    transition: background-color 0.2s ease;
    user-select: none;
    box-sizing: border-box;
}

.card-header:hover {
    background-color: #faf8f5;
}

.card-header-left {
    display: flex;
    align-items: center;
    gap: 20px;
    text-align: left;
}

.card-num {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 900;
    color: var(--accent-gold);
    opacity: 0.8;
    line-height: 1;
}

.card-title-wrap h2 {
    margin: 0 0 4px 0;
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1.2;
}

.card-title-wrap p {
    margin: 0;
    font-family: var(--font-body);
    font-size: 13.5px;
    color: #666666;
    line-height: 1.4;
}

.card-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.card-badge-tag {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}

.card-badge-tag.green { background-color: #e6f6ee; color: var(--primary-green); }
.card-badge-tag.gold { background-color: #faf4e6; color: var(--accent-gold); }
.card-badge-tag.charcoal { background-color: #f1f3f5; color: #4b5563; }

.expand-toggle-btn {
    background: none;
    border: 1.5px solid #ebd9c5;
    border-radius: 20px;
    padding: 6px 14px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-gold);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.kymon-accordion-card.expanded .expand-toggle-btn {
    background-color: var(--accent-gold);
    color: #ffffff;
    border-color: var(--accent-gold);
}

@media (max-width: 575px) {
    .card-header {
        padding: 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .card-header-right {
        width: 100%;
        justify-content: space-between;
    }
}

/* Card Body Wrapper */
.card-body-wrapper {
    display: none;
    border-top: 1px solid var(--border-light);
    padding: 35px 24px;
    background-color: #ffffff;
    box-sizing: border-box;
}

.kymon-accordion-card.expanded .card-body-wrapper {
    display: block;
}

.kymon-form-guest-alert {
    background-color: #fffaf0;
    border: 1px solid #ffd59a;
    border-radius: 8px;
    padding: 12px 18px;
    margin-bottom: 25px;
    font-size: 13px;
    color: #b7791f;
    text-align: left;
    line-height: 1.5;
}

.kymon-form-guest-alert a {
    color: var(--primary-green) !important;
    font-weight: 700;
    text-decoration: underline !important;
}

/* Sub-tab styles inside expanded panels */
.kymon-sub-accordion .sub-tab-buttons {
    display: flex;
    gap: 12px;
    border-bottom: 1.5px solid var(--border-light);
    margin-bottom: 25px;
    padding-bottom: 2px;
}

.kymon-sub-tab {
    background: none;
    border: none;
    padding: 8px 16px;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 700;
    color: #777777;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.kymon-sub-tab.active {
    color: var(--primary-green);
}

.kymon-sub-tab.active::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--primary-green);
}

.sub-panel {
    display: none;
}

.sub-panel.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* ==========================================
   FORCED LIGHT THEME OVERRIDES (STRIP DARK THEMES)
   ========================================== */

/* Outer wrappers: Reset backgrounds */
.kmtd-wrapper, .kmdg-wrapper, .ttmb-wrapper, .hkpt-wrapper, .hkdq-wrapper {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #333333 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Forms container overrides */
.kmtd-form-section, .kmdg-form-section, .ttmb-form-section, .hkpt-form-section, .hkdq-form-section {
    background-color: #faf7f2 !important;
    border: 1px solid #ebd9c5 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 30px !important;
    box-shadow: none !important;
}

/* Inputs & Labels */
.kmtd-form-group label, .kmdg-form-group label, 
.ttmb-wrapper label, .hkpt-wrapper label, .hkdq-wrapper label {
    color: #444444 !important;
    font-weight: 700 !important;
}

.kmtd-input, .kmdg-input, 
.ttmb-wrapper input, .ttmb-wrapper select, 
.hkpt-wrapper input, .hkpt-wrapper select, 
.hkdq-wrapper input, .hkdq-wrapper select {
    background-color: #ffffff !important;
    border: 1.5px solid #dcd7cc !important;
    color: #1a1a1a !important;
}

.kmtd-input:focus, .kmdg-input:focus {
    border-color: var(--primary-green) !important;
    box-shadow: 0 0 0 3px rgba(0, 125, 67, 0.08) !important;
}

/* Profile cards (results) */
.kmtd-profile-card {
    background: #ffffff !important;
    border: 1px solid #ebd9c5 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02) !important;
    color: #333333 !important;
}

.kmtd-user-info h2 {
    color: var(--text-dark) !important;
}

.kmtd-user-meta, .kmtd-user-can-chi {
    color: #666666 !important;
}

.kmtd-user-meta strong, .kmtd-user-can-chi strong {
    color: var(--primary-green) !important;
}

.kmtd-element-item {
    background-color: #faf7f2 !important;
    border: 1px solid #e5dfd3 !important;
}

.kmtd-element-item:hover {
    border-color: var(--accent-gold) !important;
    background-color: #ffffff !important;
}

.kmtd-el-label {
    color: #777777 !important;
}

.kmtd-el-val {
    color: var(--text-dark) !important;
}

/* Nine Palaces Grid (Cửu cung) */
.kmtd-cuu-cung, .kmdg-cuu-cung, .hkpt-cuu-cung, .hkdq-cuu-cung {
    background-color: #eae3d5 !important;
    border: 1px solid #d4c8b3 !important;
}

.kmtd-c-cell, .kmdg-c-cell {
    background-color: #faf7f2 !important;
    border: 1.5px solid #ebd9c5 !important;
    color: #333333 !important;
}

.kmtd-c-cell.active, .kmdg-c-cell.active {
    background-color: #ffffff !important;
    border: 2px solid var(--accent-gold) !important;
    box-shadow: 0 4px 15px rgba(179, 139, 45, 0.15) !important;
}

.kmtd-c-center, .kmdg-c-center {
    background-color: #eae3d5 !important;
    border-color: #d4c8b3 !important;
}

.kmtd-c-tcan, .kmdg-c-tcan {
    color: #1a1a1a !important;
}

.kmtd-c-dcan, .kmdg-c-dcan {
    color: #777777 !important;
}

/* Column titles */
.kmtd-column-title, .kmdg-column-title {
    color: var(--text-dark) !important;
    border-left: 3px solid var(--accent-gold) !important;
}

/* Reading boxes */
.kmtd-reading-box {
    background-color: #faf7f2 !important;
    border: 1px solid #e5dfd3 !important;
    color: #333333 !important;
}

.kmtd-reading-box h4 {
    color: var(--primary-green) !important;
    border-bottom: 1px solid #e5dfd3 !important;
}

.kmtd-reading-box p {
    color: #444444 !important;
}

.kmtd-reading-box.highlight {
    border-color: rgba(179, 139, 45, 0.3) !important;
    background-color: rgba(179, 139, 45, 0.03) !important;
}

.kmtd-reading-box.highlight h4 {
    color: var(--accent-gold) !important;
}

/* Paywall Overrides */
.kmtd-paywall-box {
    background: linear-gradient(135deg, #ffffff 0%, #faf8f5 100%) !important;
    border: 2px solid var(--accent-gold) !important;
    box-shadow: 0 10px 30px rgba(179, 139, 45, 0.08) !important;
}

.kmtd-paywall-icon {
    filter: drop-shadow(0 4px 8px rgba(179, 139, 45, 0.2)) !important;
}

.kmtd-paywall-box h4 {
    color: var(--primary-green) !important;
    font-weight: 800 !important;
}

.kmtd-paywall-box p {
    color: #555555 !important;
}

.kmtd-paywall-btn {
    background: linear-gradient(135deg, var(--primary-green) 0%, #005a30 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 125, 67, 0.2) !important;
}

.kmtd-paywall-btn:hover {
    box-shadow: 0 6px 20px rgba(0, 125, 67, 0.3) !important;
}

/* Branded Custom Footer */
.kymon-footer {
    background-color: #111625 !important; /* Premium dark navy/slate color */
    color: #cbd5e0 !important;
    padding: 60px 20px 20px 20px !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    box-sizing: border-box !important;
    font-family: var(--font-body) !important;
}

.kymon-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    text-align: left;
}

.footer-col {
    display: flex;
    flex-direction: column;
}

/* Column 1: Brand */
.footer-brand-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.footer-logo-img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    border: 2px solid var(--accent-gold) !important;
    object-fit: cover !important;
}

.footer-brand-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.footer-brand-title {
    font-family: var(--font-heading) !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
}

.footer-brand-subtitle {
    font-family: var(--font-body) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--accent-gold) !important;
    letter-spacing: 1px !important;
}

.footer-brand-desc {
    font-size: 13.5px !important;
    color: #a0aec0 !important;
    line-height: 1.6 !important;
    margin: 0 0 20px 0 !important;
    text-align: left !important;
}

.footer-contact-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.contact-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    font-size: 13.5px !important;
    color: #cbd5e0 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    text-align: left !important;
}

.contact-icon {
    font-size: 16px !important;
    flex-shrink: 0 !important;
}

.contact-item strong {
    color: #ffffff !important;
}

/* Social Media Circular Buttons */
.footer-social-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.social-circle {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    box-sizing: border-box !important;
}

.social-circle svg {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
    fill: none !important;
}

.social-circle.fb { background-color: #1877f2 !important; }
.social-circle.yt { background-color: #ff0000 !important; }
.social-circle.zl {
    background-color: #0068ff !important;
    font-family: var(--font-body) !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
}
.social-circle.phone { background-color: #25d366 !important; }

.social-circle:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.15) !important;
    box-shadow: 0 4px 12px rgba(255,255,255,0.08) !important;
}

/* Columns 2 & 3: Links */
.footer-col-title {
    font-family: var(--font-heading) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 0 20px 0 !important;
    border-bottom: 2px solid var(--accent-gold) !important;
    padding-bottom: 8px !important;
    display: inline-block !important;
    align-self: flex-start !important;
}

.footer-links-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.footer-links-list li {
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
}

.footer-links-list a {
    font-size: 13.5px !important;
    color: #a0aec0 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    display: inline-block !important;
}

.footer-links-list a:hover {
    color: var(--accent-gold) !important;
    transform: translateX(3px) !important;
}

/* Bottom Bar */
.footer-bottom-bar {
    max-width: 1200px;
    margin: 40px auto 0 auto;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.06);
    box-sizing: border-box;
}

.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.copyright-text {
    font-size: 12px !important;
    color: #718096 !important;
}

.footer-bottom-tagline {
    font-size: 12px !important;
    color: #718096 !important;
    font-style: italic !important;
}

@media (max-width: 768px) {
    .kymon-footer-container {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    .footer-bottom-inner {
        flex-direction: column !important;
        text-align: center !important;
        gap: 10px !important;
    }
    
    .footer-col-title {
        margin-bottom: 12px !important;
    }
}


/* ==========================================
   MOBILE HEADER (SONCHU.VN SPECIFIC RECREATION)
   ========================================== */

/* Hiding floating chatbot site-wide as requested */
.shk-chatbot-launcher, .shk-chatbot-window, .shk-chatbot-trigger, #shk-chatbot-icon {
    display: none !important;
}

/* Visibility toggles */
.kymon-header-desktop {
    display: block;
}

.kymon-header-mobile {
    display: none;
    box-sizing: border-box;
}

@media (max-width: 991px) {
    .kymon-header-desktop {
        display: none !important;
    }
    .kymon-header-mobile {
        display: block !important;
    }
}

/* Mobile Header Inner Container */
.kymon-header-mobile-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* 1. Hamburger button on the left */
.kymon-mob-hamburger {
    background: none;
    border: none;
    padding: 8px 4px;
    cursor: pointer;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kymon-mob-hamburger .toggle-icon {
    width: 26px;
    height: 26px;
    stroke: currentColor;
}

/* 2. Search pill in the center */
.kymon-mob-search-pill {
    flex-grow: 1;
    background-color: #faf7f2;
    border: 1.5px solid #ebd9c5;
    border-radius: 20px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    min-width: 100px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.kymon-mob-search-pill:hover {
    background-color: #f1ebd9;
}

.kymon-mob-search-pill .mob-search-icon {
    width: 16px;
    height: 16px;
    stroke: #8c7e6c;
    flex-shrink: 0;
}

.kymon-mob-search-pill span {
    font-family: var(--font-body);
    font-size: 13px;
    color: #8c7e6c;
    font-weight: 500;
}

/* 3. Gold grid tools button */
.kymon-mob-grid-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--accent-gold);
    color: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(179, 139, 45, 0.15);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.kymon-mob-grid-btn:hover {
    transform: scale(1.04);
}

.kymon-mob-grid-btn .grid-icon {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

/* 4. Green login button on the right */
.kymon-mob-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--primary-green);
    color: #ffffff !important;
    padding: 8px 18px;
    border-radius: 20px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: 0 4px 10px rgba(0, 125, 67, 0.15);
    flex-shrink: 0;
    transition: all 0.2s ease;
    box-sizing: border-box;
    line-height: 1;
}

.kymon-mob-login-btn:hover {
    transform: scale(1.02);
}

.kymon-mob-login-btn .login-user-icon {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}

@media (max-width: 400px) {
    .kymon-mob-login-btn span {
        display: none; /* Hide label on extremely small screens */
    }
    .kymon-mob-login-btn {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        padding: 0;
        justify-content: center;
    }
}

/* Drawer Branding Layout */
.drawer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.drawer-logo-img {
    width: 48px !important;
    height: 48px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    border: 2px solid var(--accent-gold) !important;
}

.drawer-brand-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.drawer-brand-title {
    display: block;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 800;
    color: var(--primary-green);
    line-height: 1.2;
}

.drawer-brand-subtitle {
    display: block;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;
    color: var(--accent-gold);
    line-height: 1;
}

/* Drawer navigation icons styling */
.drawer-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.drawer-icon {
    width: 18px;
    height: 18px;
    stroke: #888888;
    transition: stroke 0.2s ease;
}

.drawer-nav a:hover .drawer-icon {
    stroke: var(--primary-green);
}

/* Drawer Quick tools section (CÔNG CỤ NHANH) */
.drawer-quick-tools-section {
    margin-top: auto;
    border-top: 1px solid var(--border-light);
    padding-top: 20px;
    text-align: left;
}

.quick-tools-title {
    display: block;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    color: #888888;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.quick-tools-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.quick-tool-btn {
    background-color: #faf7f2;
    border: 1px solid #ebd9c5;
    border-radius: 6px;
    padding: 10px 8px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-dark) !important;
    text-decoration: none !important;
    text-align: center;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.quick-tool-btn:hover {
    background-color: #f1ebd9;
    border-color: var(--accent-gold);
    color: var(--primary-green) !important;
}


/* ==========================================
   STRICT SVG SIZE & FILL RESETS FOR MOBILE HEADER
   ========================================== */

@media (max-width: 991px) {
    /* Tighten custom header padding on mobile */
    .kymon-custom-header {
        padding: 8px 12px !important;
    }
    
    /* Enforce strict sizes on SVGs */
    .kymon-header-mobile svg,
    .kymon-mobile-drawer svg {
        display: inline-block !important;
        vertical-align: middle !important;
    }
    
    /* Hamburger */
    .kymon-mob-hamburger svg {
        width: 24px !important;
        height: 24px !important;
    }
    
    /* Search Icon */
    .kymon-mob-search-pill svg.mob-search-icon {
        width: 16px !important;
        height: 16px !important;
    }
    
    /* Grid Icon */
    .kymon-mob-grid-btn svg.grid-icon {
        width: 18px !important;
        height: 18px !important;
    }
    
    /* Login User Icon */
    .kymon-mob-login-btn svg.login-user-icon {
        width: 14px !important;
        height: 14px !important;
    }
    
    /* Drawer Icon */
    .drawer-nav svg.drawer-icon {
        width: 18px !important;
        height: 18px !important;
    }
    
    /* Force line-art rendering (stroke only, NO fill) */
    .kymon-header-mobile svg,
    .kymon-header-mobile svg *,
    .kymon-mobile-drawer svg,
    .kymon-mobile-drawer svg * {
        fill: none !important;
    }
}


/* ==========================================
   DEDICATED SINGLE TOOL PAGE VIEW STYLING
   ========================================== */

/* Header Bar inside Single Tool View */
.kymon-single-tool-header-bar {
    background-color: #ffffff;
    border-bottom: 1.5px solid #ebd9c5;
    padding: 12px 20px;
    box-sizing: border-box;
    position: sticky;
    top: 60px; /* Sits right under site-wide header */
    z-index: 999;
    box-shadow: 0 4px 10px rgba(0,0,0,0.01);
}

@media (max-width: 991px) {
    .kymon-single-tool-header-bar {
        top: 55px; /* Adjust for mobile header height */
    }
}

.header-bar-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.kymon-single-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #faf7f2;
    border: 1.5px solid #ebd9c5;
    border-radius: 20px;
    padding: 6px 16px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark) !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
    cursor: pointer;
    line-height: 1;
}

.kymon-single-back-btn:hover {
    background-color: #ebd9c5;
}

.kymon-single-tool-title {
    font-family: var(--font-heading) !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    color: var(--primary-green) !important;
    margin: 0 !important;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.kymon-single-login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-green);
    color: #ffffff !important;
    border-radius: 20px;
    padding: 6px 16px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: 0 4px 10px rgba(0, 125, 67, 0.15);
    transition: all 0.2s ease;
    cursor: pointer;
    line-height: 1;
}

.kymon-single-login-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(0, 125, 67, 0.25);
}

@media (max-width: 575px) {
    .kymon-single-tool-title {
        font-size: 13px !important;
    }
    .kymon-single-back-btn, .kymon-single-login-btn {
        padding: 5px 12px;
        font-size: 12px;
    }
}

/* Page container & Columns */
.kymon-single-tool-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 16px 60px 16px;
    box-sizing: border-box;
}

.kymon-single-tool-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.kymon-single-tool-main {
    flex-grow: 1;
    width: 68%;
    box-sizing: border-box;
}

.kymon-single-tool-sidebar {
    width: 32%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-sizing: border-box;
}

@media (max-width: 991px) {
    .kymon-single-tool-layout {
        flex-direction: column;
    }
    .kymon-single-tool-main, .kymon-single-tool-sidebar {
        width: 100%;
    }
}

/* Guest Warning */
.kymon-single-tool-guest-warning {
    background-color: #fffaf0;
    border: 1px solid #ffd59a;
    border-radius: 8px;
    padding: 12px 18px;
    margin-bottom: 25px;
    font-size: 13.5px;
    color: #b7791f;
    text-align: left;
    line-height: 1.5;
}

.kymon-single-tool-guest-warning a {
    color: var(--primary-green) !important;
    font-weight: 700;
    text-decoration: underline !important;
}

/* Main Form Card */
.kymon-single-tool-form-card {
    background-color: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 30px 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
    box-sizing: border-box;
}

@media (max-width: 575px) {
    .kymon-single-tool-form-card {
        padding: 20px 16px;
    }
}

/* Mobile & Tablet Responsiveness Optimization for Feng Shui Tools Results */
@media (max-width: 768px) {
    /* Auto detect when any result is loaded in the single view and expand to full screen width */
    .kymon-single-tool-container:has(.ttmb-la-so),
    .kymon-single-tool-container:has(.gqkd-result-container),
    .kymon-single-tool-container:has(.lndd-grid-4x4) {
        padding: 10px 4px 40px 4px !important;
    }
    
    .kymon-single-tool-container:has(.ttmb-la-so) .kymon-single-tool-form-card,
    .kymon-single-tool-container:has(.gqkd-result-container) .kymon-single-tool-form-card,
    .kymon-single-tool-container:has(.lndd-grid-4x4) .kymon-single-tool-form-card {
        padding: 8px 4px !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    
    /* Fallback old wrapper class selector */
    .kymon-tools-page-wrapper.single-tool-view.has-results .kymon-single-tool-container {
        padding: 10px 6px 40px 6px !important;
    }
    .kymon-tools-page-wrapper.single-tool-view.has-results .kymon-single-tool-form-card {
        padding: 8px 4px !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    
    .kymon-single-tool-guest-warning {
        padding: 10px 12px !important;
        margin-bottom: 15px !important;
        font-size: 12.5px !important;
    }
    
    /* Stack side-by-side grids (like positive/negative aspects in Bazi analysis) vertically on mobile */
    .ttmb-tab-pane div[style*="display: grid"][style*="grid-template-columns: 1fr 1fr"],
    .ttmb-tab-pane div[style*="display:grid"][style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
}



/* Sidebar Cards */
.kymon-sidebar-card {
    background-color: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
    text-align: left;
    box-sizing: border-box;
}

/* Expert Card Styling */
.expert-card-header {
    display: flex;
    gap: 12px;
    align-items: center;
    border-bottom: 1.5px solid var(--border-light);
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.expert-header-icon {
    font-size: 24px;
    line-height: 1;
}

.expert-header-text h4 {
    margin: 0 0 2px 0 !important;
    font-family: var(--font-heading) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--text-dark) !important;
}

.expert-header-text p {
    margin: 0 !important;
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    color: #888888 !important;
}

.expert-desc {
    font-size: 13px !important;
    color: #555555 !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
}

.expert-bullets {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.expert-bullets li {
    font-size: 12.5px !important;
    color: var(--primary-green) !important;
    font-weight: 700 !important;
    display: flex;
    align-items: center;
    gap: 6px;
}

.expert-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent-gold);
    color: #ffffff !important;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none !important;
    padding: 12px 16px;
    border-radius: 6px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(179,139,45,0.2);
    transition: all 0.25s ease;
}

.expert-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(179,139,45,0.3);
}

/* Suggested Experts */
.suggested-experts-list {
    margin-top: 24px;
    border-top: 1px solid var(--border-light);
    padding-top: 16px;
}

.suggested-experts-list h5 {
    margin: 0 0 12px 0 !important;
    font-family: var(--font-heading) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: var(--text-dark) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.expert-item {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.expert-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #e6f6ee;
    color: var(--primary-green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 12px;
    flex-shrink: 0;
}

.expert-avatar.pt {
    background-color: #faf4e6;
    color: var(--accent-gold);
}

.expert-info {
    text-align: left;
}

.expert-name {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--text-dark) !important;
    display: flex;
    align-items: center;
}

.expert-badge {
    font-size: 9px !important;
    font-weight: 700 !important;
    background-color: #f1f3f5 !important;
    color: #666666 !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    margin-left: 6px !important;
    line-height: 1;
}

.expert-rating {
    font-size: 11px !important;
    color: #777777 !important;
    margin-top: 2px !important;
}

/* Lock Features Card Styling */
.lock-features-card h4 {
    margin: 0 0 8px 0 !important;
    font-family: var(--font-heading) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--text-dark) !important;
}

.lock-desc {
    font-size: 13px !important;
    color: #555555 !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
}

.lock-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-green);
    color: #ffffff !important;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13px;
    text-decoration: none !important;
    padding: 12px 16px;
    border-radius: 6px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,125,67,0.15);
    transition: all 0.25s ease;
    margin-bottom: 20px;
}

.lock-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,125,67,0.25);
}

.lock-features-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lock-feature-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.lock-icon {
    font-size: 16px !important;
    color: #888888 !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}

.lock-feature-text {
    text-align: left;
}

.lock-feature-text h6 {
    margin: 0 0 2px 0 !important;
    font-family: var(--font-heading) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: var(--text-dark) !important;
}

.lock-feature-text p {
    margin: 0 !important;
    font-family: var(--font-body) !important;
    font-size: 11.5px !important;
    color: #777777 !important;
    line-height: 1.4 !important;
}


/* ==========================================
   QIMEN NINE PALACES GRID CELL RESET (VISUAL FIX)
   ========================================== */

.kmtd-cuu-cung, .kmdg-cuu-cung {
    aspect-ratio: 1 / 1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-gap: 6px !important;
    padding: 6px !important;
    box-sizing: border-box !important;
}

.kmtd-c-cell, .kmdg-c-cell {
    background: #faf7f2 !important; /* Force strip default dark gradients */
    border: 1.5px solid #ebd9c5 !important;
    border-radius: 6px !important;
    padding: 8px 6px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 90px !important;
    position: relative !important;
    transition: all 0.25s ease !important;
}

/* Enforce solid white background for active Cung Mệnh cell and override gradient */
.kmtd-c-cell.active, .kmdg-c-cell.active {
    background: #ffffff !important; /* Clean solid white background */
    background-image: none !important; /* Strip any linear gradients from plugin stylesheet */
    border: 2px solid var(--accent-gold) !important;
    box-shadow: 0 4px 15px rgba(179, 139, 45, 0.15) !important;
}

.kmtd-c-deity, .kmdg-c-deity {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--accent-gold) !important;
    text-align: center !important;
    line-height: 1.2 !important;
    margin-bottom: 2px !important;
}

.kmtd-c-middle, .kmdg-c-middle {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin: 4px 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.kmtd-c-gate, .kmdg-c-gate {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #b91c1c !important; /* Red Gate text */
    line-height: 1 !important;
}

.kmtd-c-tcan, .kmdg-c-tcan {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important; /* Dark Can text */
    line-height: 1 !important;
}

.kmtd-c-bottom, .kmdg-c-bottom {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin: 4px 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.kmtd-c-star, .kmdg-c-star {
    font-size: 11px !important;
    color: #2563eb !important; /* Blue Star text */
    font-weight: 600 !important;
    line-height: 1 !important;
}

.kmtd-c-dcan, .kmdg-c-dcan {
    font-size: 11px !important;
    color: #666666 !important; /* Gray Can text */
    font-weight: 600 !important;
    line-height: 1 !important;
}

.kmtd-c-footer, .kmdg-c-footer {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    border-top: 1px solid rgba(0,0,0,0.06) !important;
    padding-top: 4px !important;
    margin-top: 2px !important;
    box-sizing: border-box !important;
}

.kmtd-c-trigram, .kmtd-c-name, .kmtd-c-dir,
.kmdg-c-trigram, .kmdg-c-name, .kmdg-c-dir {
    font-size: 9px !important;
    color: #888888 !important;
    line-height: 1 !important;
}

.kmtd-c-center, .kmdg-c-center {
    background: #eae3d5 !important;
    border: 1.5px solid #d4c8b3 !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

.kmtd-center-can, .kmdg-center-can {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #555555 !important;
    line-height: 1.2 !important;
}

.kmtd-center-lbl, .kmdg-center-lbl {
    font-size: 9px !important;
    color: #888888 !important;
    letter-spacing: 0.5px !important;
    margin-top: 2px !important;
    text-transform: uppercase !important;
}

.kmtd-menh-ribbon, .kmdg-menh-ribbon {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    background-color: #b91c1c !important;
    color: #ffffff !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    padding: 1px 4px !important;
    border-bottom-left-radius: 4px !important;
    border-top-right-radius: 0 !important;
    text-transform: uppercase !important;
    z-index: 10 !important;
    line-height: 1.2 !important;
}


/* ==========================================
   KỲ MÔN TRỌN ĐỜI RESULTS LAYOUT V2 (WIDE DESKTOP / MOBILE STACK)
   ========================================== */

@media (min-width: 992px) {
    /* Hide page-level sidebar and make main column full-width when results are active */
    .kymon-tools-page-wrapper.single-tool-view.has-results .kymon-single-tool-layout {
        display: block !important;
    }
    .kymon-tools-page-wrapper.single-tool-view.has-results .kymon-single-tool-main {
        width: 100% !important;
    }
    .kymon-tools-page-wrapper.single-tool-view.has-results .kymon-single-tool-sidebar {
        display: none !important;
    }
    
    /* Layout columns for results area */
    .kmtd-body-layout {
        display: flex !important;
        flex-direction: row !important;
        gap: 35px !important;
        align-items: flex-start !important;
        margin-top: 30px !important;
    }
    
    .kmtd-chart-column {
        width: 38% !important; /* Left Column for 3x3 Qimen grid & Sidebar cards */
        flex-shrink: 0 !important;
    }
    
    .kmtd-report-column {
        width: 62% !important; /* Right Column for detailed interpretations */
        flex-grow: 1 !important;
    }
}

@media (max-width: 991px) {
    .kmtd-body-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
    }
    
    .kmtd-chart-column, .kmtd-report-column {
        width: 100% !important;
    }
}

/* Beautiful Rounded Pills for Interpretations Tabs */
.kmtd-report-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-bottom: 25px !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.kmtd-r-tab {
    background-color: #faf7f2 !important;
    border: 1.5px solid #ebd9c5 !important;
    border-radius: 20px !important;
    padding: 8px 18px !important;
    font-family: var(--font-body) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #555555 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    outline: none !important;
}

.kmtd-r-tab:hover {
    background-color: #ebd9c5 !important;
    color: var(--text-dark) !important;
}

.kmtd-r-tab.active {
    background-color: var(--primary-green) !important;
    color: #ffffff !important;
    border-color: var(--primary-green) !important;
    box-shadow: 0 4px 12px rgba(0, 125, 67, 0.15) !important;
}

/* Clean spacing for Profile Card */
.kmtd-profile-card {
    margin-bottom: 25px !important;
}


/* ==========================================
   KỲ MÔN TRỌN ĐỜI RESULTS LAYOUT V3 (CENTERED CHART & FULL WIDTH TABS)
   ========================================== */

.kmtd-centered-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 35px !important;
    width: 100% !important;
    margin-top: 30px !important;
    box-sizing: border-box !important;
}

.kmtd-centered-chart-section {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.kmtd-grid-wrapper {
    width: 100% !important;
    max-width: 460px !important; /* Grid is rendered large and gorgeous */
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

.kmtd-centered-report-section {
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

/* Ensure the section titles are centered */
.kmtd-section-title {
    font-family: var(--font-heading) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--text-dark) !important;
    margin: 0 0 15px 0 !important;
    text-align: center !important;
}

/* Force container full width on results screen and hide sidebar */
@media (min-width: 992px) {
    .kymon-tools-page-wrapper.single-tool-view.has-results .kymon-single-tool-layout {
        display: block !important;
    }
    .kymon-tools-page-wrapper.single-tool-view.has-results .kymon-single-tool-main {
        width: 100% !important;
    }
    .kymon-tools-page-wrapper.single-tool-view.has-results .kymon-single-tool-sidebar {
        display: none !important;
    }
}


/* ==========================================
   HORIZONTAL SCROLLABLE TABS FOR MOBILE (11 TABS)
   ========================================== */

@media (max-width: 767px) {
    .kmtd-report-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding-bottom: 10px !important;
        margin-bottom: 20px !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 8px !important;
        border-bottom: 1.5px solid rgba(0,0,0,0.05) !important;
    }
    
    .kmtd-r-tab {
        flex-shrink: 0 !important;
        padding: 6px 14px !important;
        font-size: 12.5px !important;
    }
    
    /* Hide scrollbar for Webkit browsers (Chrome, Safari, iOS Safari) */
    .kmtd-report-tabs::-webkit-scrollbar {
        height: 4px !important;
    }
    .kmtd-report-tabs::-webkit-scrollbar-track {
        background: transparent !important;
    }
    .kmtd-report-tabs::-webkit-scrollbar-thumb {
        background: #ebd9c5 !important;
        border-radius: 10px !important;
    }
}

/* Responsive header adjustments to prevent menu wrapping */
@media (max-width: 1440px) {
    .kymon-header-nav-list {
        gap: 14px;
    }
    .kymon-head-action-icons {
        display: none !important;
    }
}
@media (max-width: 1200px) {
    .kymon-header-nav-list {
        gap: 8px;
    }
    .kymon-header-logo-text {
        display: none !important;
    }
}

/* Hide all floating chat buttons on mobile and desktop */
.kymon-floating-helpers,
.helper-floating-btn,
.bta-zalo-float,
#bta-zalo-advisor,
.helper-floating-btn.helper-one,
.helper-floating-btn.helper-two {
    display: none !important;
}

/* ==========================================
   BÁT TỰ TÂM AN - SINGLE POST ZERO GAP FIX
   ========================================== */

/* 1. Hide comments section completely */
#comments, #respond, .comments-area, .comment-respond {
    display: none !important;
}

/* 2. Eliminate gap between header title and article body */
.single-post #content,
.blog-single #content,
.single-post .blog-wrapper {
    padding-top: 10px !important;
}

.blog-single .entry-header,
.single-post .entry-header {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.blog-single .entry-header .entry-divider,
.single-post .entry-divider {
    margin: 6px auto 10px auto !important;
    padding: 0 !important;
}

.blog-single .entry-title,
.single-post .entry-title {
    margin-bottom: 4px !important;
}

.blog-single .entry-meta,
.single-post .entry-meta {
    margin-bottom: 6px !important;
}

.blog-single .article-inner,
.single-post .article-inner,
.single-post .entry-content,
.blog-single .entry-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.single-post .entry-content > *:first-child,
.blog-single .entry-content > *:first-child,
.bta-article-wrapper,
.bta-lead-box {
    margin-top: 0 !important;
}

.bta-article-wrapper {
    padding-top: 5px !important;
    margin-top: 0 !important;
}

/* 3. Right Sidebar Styling */
.post-sidebar .bta-recent-posts-widget {
    background: #ffffff;
    border: 1px solid #ebd9c5;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}