:root{--paper:#fcfaf5;--paper2:#f4efe5;--card:#fff;--border:#ddd3c3;--ink:#3f2f23;--muted:#7a6a58;--gold:#b8842d;--gold-dark:#9c6a1e;--brown:#4a3728}
*{box-sizing:border-box}body{margin:0;font-family:Inter,'Segoe UI',Arial,sans-serif;background:var(--paper);color:var(--ink);font-size:16px}a{color:var(--gold-dark);text-decoration:none}a:hover{color:var(--gold);text-decoration:underline}.container{max-width:1180px;margin:auto;padding:0 22px}.header{position:sticky;top:0;z-index:20;background:rgba(245,240,230,.96);border-bottom:1px solid var(--border)}.nav{height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:12px;color:var(--brown);font-weight:900;letter-spacing:-.5px;font-size:24px}.brand-mark{width:42px;height:42px;border-radius:14px;background:linear-gradient(145deg,#6b4a2d,#b8842d);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;box-shadow:0 8px 18px rgba(70,50,20,.16)}.menu{display:flex;gap:22px;align-items:center}.menu a{font-weight:750;color:var(--brown)}.menu .cta{background:var(--gold);color:#fff;padding:11px 16px;border-radius:999px}.menu .cta:hover{background:var(--gold-dark);text-decoration:none;color:#fff}.hero{padding:80px 0 64px;background:linear-gradient(130deg,#fcfaf5,#f4efe5 58%,#fffdf8);border-bottom:1px solid var(--border)}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}.kicker{display:inline-flex;color:#8a5a2b;font-weight:850;background:#fff8e8;border:1px solid #eadcc5;border-radius:999px;padding:8px 13px}h1{font-size:56px;line-height:1.06;letter-spacing:-1.4px;color:var(--brown);margin:20px 0}h2{font-size:36px;line-height:1.15;color:var(--brown);margin:0 0 12px}h3{font-size:22px;color:var(--brown);margin:0 0 8px}.lead{font-size:19px;line-height:1.75;color:var(--muted)}.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 20px;border-radius:14px;font-weight:850;border:1px solid transparent;text-align:center}.btn-primary{background:var(--gold);color:#fff}.btn-primary:hover{background:var(--gold-dark);color:#fff;text-decoration:none}.btn-outline{background:#fff;color:var(--brown);border-color:var(--border)}.btn-outline:hover{background:#faf7f0;text-decoration:none;color:var(--brown)}.hero-card,.card,.about-panel,.contact-box{background:#fff;border:1px solid var(--border);border-radius:28px;padding:28px;box-shadow:0 12px 35px rgba(70,50,20,.07)}.hero-visual{border-radius:22px;background:#fffaf0;border:1px solid #eadcc5;min-height:420px;display:flex;align-items:center;justify-content:center;text-align:center;padding:26px;overflow:hidden}.hero-visual img{width:100%;max-width:520px;height:auto;border-radius:20px;box-shadow:0 10px 28px rgba(70,50,20,.12)}.section{padding:68px 0;border-bottom:1px solid var(--border)}.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:28px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.card p{color:var(--muted);line-height:1.65}.book-card{padding:0;overflow:hidden}.book-top{height:250px;background:linear-gradient(135deg,#fffaf0,#f2e8d5);display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--border)}.book-cover{width:150px;height:220px;background:linear-gradient(155deg,#6b4a2d,#b8842d);color:#fff;padding:18px;display:flex;flex-direction:column;justify-content:space-between;text-align:center;box-shadow:0 10px 26px rgba(70,50,20,.18)}.book-body{padding:22px}.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:36px;align-items:start}.timeline{display:grid;gap:16px}.timeline-item{background:#fff;border:1px solid var(--border);border-radius:18px;padding:18px}.quote{font-size:24px;line-height:1.5;color:var(--brown);background:#fff8e8;border-left:5px solid var(--gold);padding:22px;border-radius:18px}.footer{background:var(--paper2);padding:38px 0;border-top:1px solid var(--border);color:var(--muted)}.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:24px}.small{font-size:14px;color:var(--muted)}@media(max-width:900px){.menu{display:none}h1{font-size:40px}.hero-grid,.grid,.split,.footer-grid{grid-template-columns:1fr}.section-head{display:block}}


.menu .admin-link{
    color:#8a7a66;
    font-size:14px;
    font-weight:800;
}
.menu .admin-link:hover{
    color:#4a3728;
}


/* Official white background refinement */
:root{
    --paper:#ffffff;
    --paper2:#ffffff;
    --paper3:#ffffff;
    --card:#ffffff;
    --soft:#fffaf2;
    --border:#eadfce;
    --ink:#3f2f23;
    --muted:#6f6258;
    --gold:#b8842d;
    --gold-dark:#9c6a1e;
    --brown:#4a3728;
}

body{
    background:#ffffff !important;
}

.header{
    background:rgba(255,255,255,.96) !important;
    box-shadow:0 1px 0 rgba(0,0,0,.04);
}

.hero{
    background:#ffffff !important;
    border-bottom:1px solid var(--border);
}

.section{
    background:#ffffff !important;
}

.hero-card,
.card,
.about-panel,
.contact-box{
    background:#ffffff !important;
}

.hero-visual,
.book-top{
    background:linear-gradient(135deg,#ffffff,#fff8ec) !important;
}

.white-section{
    background:#ffffff;
}

.about-author-grid{
    display:grid;
    grid-template-columns:1fr .78fr;
    gap:36px;
    align-items:start;
}

.author-cover-card{
    background:#ffffff;
    border:1px solid var(--border);
    border-radius:28px;
    padding:20px;
    box-shadow:0 16px 40px rgba(70,50,20,.08);
}

.author-cover-card img{
    display:block;
    width:100%;
    height:auto;
    border-radius:20px;
}

.author-caption{
    margin-top:14px;
    color:var(--muted);
    font-size:14px;
    line-height:1.55;
    text-align:center;
}

@media(max-width:900px){
    .about-author-grid{
        grid-template-columns:1fr;
    }
}


/* Final spacing fix */
.about-hero{
    padding:54px 0 38px !important;
}

.about-hero h1{
    margin-bottom:12px;
}

.about-main-section{
    padding:34px 0 !important;
}

.last-about-section{
    padding-bottom:56px !important;
}

.about-tight-grid{
    gap:24px !important;
}

.about-panel{
    padding:28px 30px !important;
}

.about-panel p{
    margin-top:0;
    margin-bottom:18px;
    line-height:1.65;
}

.about-panel p:last-child{
    margin-bottom:0;
}

.author-cover-compact{
    padding:18px !important;
    align-self:start;
}

.author-cover-compact img{
    max-height:620px;
    object-fit:contain;
    object-position:top center;
    background:#fff;
}

.quote{
    align-self:center;
}

.menu .cta{
    order:10;
}

.menu .admin-link{
    order:20;
}

@media(max-width:900px){
    .about-hero{
        padding:42px 0 28px !important;
    }

    .about-main-section{
        padding:24px 0 !important;
    }

    .about-tight-grid{
        gap:18px !important;
    }

    .about-panel{
        padding:22px !important;
    }

    .author-cover-compact img{
        max-height:none;
    }
}


/* =========================================================
   OFFICIAL GLOBAL SPACING FIX
   Apply to all main website pages, not only About.
   ========================================================= */

body{
    background:#ffffff !important;
}

.header{
    background:rgba(255,255,255,.97) !important;
}

.nav{
    min-height:72px;
}

/* reduce large empty vertical gaps across pages */
.hero{
    padding:54px 0 44px !important;
    background:#ffffff !important;
}

.section{
    padding:42px 0 !important;
    background:#ffffff !important;
}

.section + .section{
    padding-top:34px !important;
}

/* keep home hero slightly stronger but not too tall */
.hero-grid{
    gap:34px !important;
}

.split{
    gap:28px !important;
}

.grid{
    gap:20px !important;
}

/* tighter headings */
h1{
    margin:16px 0 18px !important;
}

h2{
    margin-bottom:10px !important;
}

h3{
    margin-bottom:8px !important;
}

.lead{
    margin-top:0;
    margin-bottom:0;
    line-height:1.65 !important;
}

/* cards and panels tighter */
.card,
.about-panel,
.contact-box,
.hero-card{
    padding:24px !important;
}

.card p,
.about-panel p,
.contact-box p{
    line-height:1.62 !important;
    margin-top:0;
    margin-bottom:16px;
}

.card p:last-child,
.about-panel p:last-child,
.contact-box p:last-child{
    margin-bottom:0;
}

.section-head{
    margin-bottom:22px !important;
}

/* book cards */
.book-top{
    height:220px !important;
}

.book-cover{
    width:135px !important;
    height:198px !important;
}

.book-body{
    padding:20px !important;
}

/* hero visual no excessive blank */
.hero-visual{
    min-height:340px !important;
    padding:22px !important;
}

.hero-visual img{
    max-width:440px !important;
}

/* about page specific final alignment */
.about-hero{
    padding:46px 0 30px !important;
}

.about-main-section{
    padding:30px 0 !important;
}

.about-tight-grid,
.about-author-grid{
    gap:24px !important;
}

.author-cover-card{
    padding:18px !important;
}

.author-cover-card img{
    max-height:580px;
    object-fit:contain;
    object-position:top center;
}

/* Footer tighter */
.footer{
    padding:30px 0 !important;
}

/* Main menu final order */
.menu .cta{
    order:10;
}

.menu .admin-link{
    order:20;
    color:#8a7a66;
    font-size:14px;
}

/* Mobile */
@media(max-width:900px){
    .hero{
        padding:38px 0 30px !important;
    }

    .section{
        padding:30px 0 !important;
    }

    .section + .section{
        padding-top:24px !important;
    }

    .grid,
    .split,
    .hero-grid,
    .footer-grid,
    .about-author-grid{
        gap:18px !important;
    }

    .card,
    .about-panel,
    .contact-box,
    .hero-card{
        padding:20px !important;
    }

    .hero-visual{
        min-height:auto !important;
        padding:18px !important;
    }

    .book-top{
        height:200px !important;
    }

    h1{
        font-size:38px !important;
    }
}

/* Only-2-fixes version: visitor counter styling */
.visitor-count{
    margin-top:12px;
    color:#7a6a58;
}
.visitor-count strong{
    color:#4a3728;
}
.brand-logo-img{
    width:52px;
    height:52px;
    border-radius:50%;
    object-fit:cover;
    border:1px solid #eadfce;
}


/* ===== FINAL WHITE BACKGROUND FIX ===== */
html,
body{
    background:#ffffff !important;
}

.header{
    background:rgba(255,255,255,0.97) !important;
    border-bottom:1px solid #eadfce;
}

.hero,
.section,
.white-section{
    background:#ffffff !important;
}

.footer{
    background:#ffffff !important;
    border-top:1px solid #eadfce;
}

.card,
.about-panel,
.contact-box,
.hero-card,
.timeline-item,
.author-cover-card{
    background:#ffffff !important;
}

.hero-visual,
.book-top{
    background:linear-gradient(135deg,#ffffff,#fff8ec) !important;
}

.container,
.admin-main{
    background:transparent;
}

/* ===== MAIN SITE CONTENT UPDATE ===== */

.hero-text{
    color:var(--muted);
    font-size:18px;
    line-height:1.72;
    margin:0 0 16px;
}

.framework-grid{
    grid-template-columns:repeat(3,1fr) !important;
}

.framework-grid .card{
    min-height:180px;
}

.home-closing{
    margin-top:28px;
    text-align:center;
    font-size:30px;
    font-weight:900;
}

.hero-visual img{
    max-width:520px !important;
    width:100%;
    height:auto;
    display:block;
}

@media(max-width:1050px){
    .framework-grid{
        grid-template-columns:repeat(2,1fr) !important;
    }
}

@media(max-width:900px){
    .framework-grid{
        grid-template-columns:1fr !important;
    }

    .home-closing{
        font-size:24px;
    }
}

/* ===== ABOUT PAGE FINAL UPDATE ===== */
.about-author-grid{
    grid-template-columns:minmax(0,1fr) minmax(320px,.55fr) !important;
    align-items:start;
}

.about-long-form{
    max-width:1040px;
}

.about-long-form p,
.about-panel p{
    font-size:17px;
    line-height:1.76 !important;
    color:#5f4b38;
}

.vienglese-series{
    margin:24px 0;
    padding:22px 24px;
    border:1px solid #eadfce;
    border-left:5px solid #b8842d;
    border-radius:20px;
    background:linear-gradient(135deg,#fff9ed,#ffffff);
}

.vienglese-series h3{
    margin-bottom:16px !important;
}

.vienglese-series p{
    margin-bottom:14px !important;
}

.author-signature{
    margin-top:22px !important;
    color:#4a3728 !important;
}

.author-photo-card{
    padding:20px !important;
    position:sticky;
    top:96px;
}

.author-photo-card img{
    width:100%;
    max-height:560px;
    object-fit:cover;
    object-position:top center;
    border-radius:22px;
}

.author-quote-caption{
    font-size:15px;
    line-height:1.55;
}

.author-quote-caption strong{
    color:#4a3728;
    font-size:18px;
}

.about-list{
    margin:20px 0 24px;
    padding-left:0;
    list-style:none;
    display:grid;
    gap:14px;
}

.about-list li{
    padding:16px 18px;
    border:1px solid #eadfce;
    border-radius:16px;
    background:#fffaf2;
    color:#5f4b38;
    line-height:1.68;
}

.about-concepts-head{
    margin-bottom:22px !important;
}

.about-concepts-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
}

.about-concepts-grid .timeline-item{
    min-height:170px;
    padding:24px !important;
}

.about-concepts-grid .timeline-item h3{
    font-size:24px;
}

@media(max-width:950px){
    .about-author-grid{
        grid-template-columns:1fr !important;
    }

    .author-photo-card{
        position:static;
        max-width:560px;
        margin:0 auto;
    }

    .about-concepts-grid{
        grid-template-columns:1fr;
    }
}


/* ===================================================
   Classes Dropdown
=================================================== */
.menu-dropdown{
    position:relative;
    display:flex;
    align-items:center;
}

.menu-dropdown > a{
    font-weight:750;
    color:var(--brown);
}

.menu-dropdown > a:hover{
    color:var(--gold);
    text-decoration:none;
}

.dropdown-menu{
    position:absolute;
    top:calc(100% + 12px);
    left:50%;
    transform:translateX(-50%) translateY(6px);
    min-width:250px;
    background:#fff;
    border:1px solid #eadfce;
    border-radius:18px;
    box-shadow:0 18px 45px rgba(70,50,20,.14);
    padding:10px 0;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
    z-index:999;
}

.dropdown-menu::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-14px;
    height:14px;
}

.menu-dropdown:hover .dropdown-menu,
.menu-dropdown:focus-within .dropdown-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
}

.dropdown-menu a{
    display:block;
    padding:14px 22px;
    color:#4a3728;
    font-weight:750;
    white-space:nowrap;
}

.dropdown-menu a:hover{
    background:#fff7e8;
    color:#b8842d;
    text-decoration:none;
}

@media(max-width:900px){
    .menu-dropdown{
        display:none;
    }
}

/* ===================================================
   Classes Dropdown - Fixed Version
   Uses unique class names to avoid conflicts with old .dropdown-menu rules.
=================================================== */
.menu .classes-menu{
    position:relative;
    display:flex;
    align-items:center;
    flex:0 0 auto;
}

.menu .classes-trigger{
    appearance:none;
    -webkit-appearance:none;
    border:0;
    background:transparent;
    padding:0;
    margin:0;
    cursor:pointer;
    font:inherit;
    font-weight:750;
    color:var(--brown);
    line-height:1;
    display:inline-flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
}

.menu .classes-trigger:hover,
.menu .classes-menu:focus-within .classes-trigger{
    color:var(--gold);
}

.menu .classes-caret{
    font-size:.82em;
    line-height:1;
    margin-top:2px;
}

.menu .classes-submenu{
    position:absolute !important;
    top:calc(100% + 14px) !important;
    left:50% !important;
    transform:translateX(-50%) translateY(8px) !important;
    min-width:250px !important;
    width:max-content;
    background:#fff !important;
    border:1px solid #eadfce !important;
    border-radius:18px !important;
    box-shadow:0 18px 45px rgba(70,50,20,.14) !important;
    padding:10px 0 !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    z-index:9999 !important;
    display:block !important;
    transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
}

.menu .classes-submenu::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-16px;
    height:16px;
}

.menu .classes-menu:hover .classes-submenu,
.menu .classes-menu:focus-within .classes-submenu{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateX(-50%) translateY(0) !important;
}

.menu .classes-submenu a{
    display:block !important;
    padding:14px 22px !important;
    margin:0 !important;
    color:#4a3728 !important;
    font-weight:750 !important;
    line-height:1.25 !important;
    white-space:nowrap !important;
    text-decoration:none !important;
}

.menu .classes-submenu a:hover{
    background:#fff7e8 !important;
    color:#b8842d !important;
    text-decoration:none !important;
}

@media(max-width:900px){
    .menu .classes-menu{
        display:none !important;
    }
}

/* ===================================================
   Mobile Hamburger Menu Patch
   Keeps desktop menu unchanged and adds a CSS-only mobile menu.
=================================================== */
.nav-toggle-input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.nav-toggle-label{
    display:none;
    width:46px;
    height:46px;
    border:1px solid #eadfce;
    border-radius:14px;
    background:#fff;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
    box-shadow:0 8px 18px rgba(70,50,20,.08);
}

.nav-toggle-label span{
    display:block;
    width:22px;
    height:2px;
    background:#4a3728;
    border-radius:999px;
    transition:transform .22s ease, opacity .22s ease;
}

@media(max-width:900px){
    .nav{
        position:relative;
        height:auto;
        min-height:72px;
        padding-top:12px;
        padding-bottom:12px;
    }

    .brand{
        max-width:calc(100% - 64px);
        font-size:21px;
        line-height:1.15;
    }

    .brand-mark{
        width:42px;
        height:42px;
        flex:0 0 auto;
    }

    .nav-toggle-label{
        display:flex;
        margin-left:auto;
        flex:0 0 auto;
    }

    .nav-toggle-input:checked + .nav-toggle-label span:nth-child(1){
        transform:translateY(7px) rotate(45deg);
    }

    .nav-toggle-input:checked + .nav-toggle-label span:nth-child(2){
        opacity:0;
    }

    .nav-toggle-input:checked + .nav-toggle-label span:nth-child(3){
        transform:translateY(-7px) rotate(-45deg);
    }

    .menu{
        display:none !important;
        position:absolute;
        top:100%;
        left:22px;
        right:22px;
        background:#fff;
        border:1px solid #eadfce;
        border-radius:22px;
        box-shadow:0 18px 45px rgba(70,50,20,.14);
        padding:14px;
        z-index:9999;
        flex-direction:column;
        align-items:stretch;
        gap:6px;
    }

    .nav-toggle-input:checked ~ .menu{
        display:flex !important;
    }

    .menu > a,
    .menu .classes-trigger{
        width:100%;
        min-height:44px;
        padding:11px 14px;
        border-radius:14px;
        font-size:16px;
        line-height:1.25;
        justify-content:flex-start;
    }

    .menu > a:hover,
    .menu .classes-trigger:hover{
        background:#fff7e8;
        color:#b8842d;
        text-decoration:none;
    }

    .menu .cta{
        order:10;
        justify-content:center;
        margin-top:6px;
        color:#fff !important;
        background:var(--gold);
    }

    .menu .admin-link{
        order:20;
        font-size:16px;
        color:#4a3728 !important;
    }

    .menu .classes-menu{
        display:block !important;
        width:100%;
        order:0;
    }

    .menu .classes-trigger{
        display:flex;
        align-items:center;
        color:var(--brown);
        background:#fff8ec;
        border:1px solid #eadfce;
    }

    .menu .classes-submenu{
        position:static !important;
        display:block !important;
        width:100% !important;
        min-width:0 !important;
        transform:none !important;
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
        box-shadow:none !important;
        border:0 !important;
        border-radius:0 !important;
        padding:6px 0 4px 16px !important;
        background:transparent !important;
    }

    .menu .classes-submenu::before{
        display:none !important;
    }

    .menu .classes-submenu a{
        display:block !important;
        padding:9px 14px !important;
        border-radius:12px;
        font-size:15px;
        white-space:normal !important;
        color:#5f4b38 !important;
    }

    .menu .classes-submenu a:hover{
        background:#fff7e8 !important;
        color:#b8842d !important;
    }
}


/* ===== REPLACE OLD VIDEOS CSS WITH THIS BLOCK ===== */
.videos-section{overflow:visible}
.videos-grid .video-card{
position:relative;
padding-top:58px!important;
overflow:visible;
}
.videos-grid .video-badge{
position:absolute;
top:-24px;
left:28px;
width:48px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#9b816b;
color:#fff;
font-size:22px;
font-weight:800;
box-shadow:0 8px 18px rgba(0,0,0,.12);
}
.videos-grid .video-link{
display:inline-flex;
align-items:center;
gap:8px;
padding:9px 12px;
border-radius:999px;
background:#fff8ec;
border:1px solid #eadfce;
font-weight:700;
text-decoration:none;
}
.videos-grid .video-link-icon{
width:22px;
height:22px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#b8842d;
color:#fff;
font-size:12px;
}



/* ===================================================
   HOME FRAMEWORK GRID - SAFE FINAL FIX
   Uses the existing container but removes the global .grid class in index.php.
=================================================== */

.framework-grid-fixed{
    max-width:1500px !important;
    width:94vw !important;
    margin-left:auto !important;
    margin-right:auto !important;

    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:32px !important;
    align-items:stretch !important;
}

.framework-grid-fixed .card{
    width:100% !important;
    min-height:360px !important;
    height:100% !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;

    padding:34px !important;
}

@media(max-width:1050px){
    .framework-grid-fixed{
        width:auto !important;
        max-width:1180px !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}

@media(max-width:900px){
    .framework-grid-fixed{
        width:auto !important;
        max-width:1180px !important;
        grid-template-columns:1fr !important;
        gap:18px !important;
    }

    .framework-grid-fixed .card{
        min-height:auto !important;
        padding:22px !important;
    }
}