/* =========================================================
   VIET BAO UI SYSTEM 2026
   Modern / Responsive / Dark mode / Admin ready
========================================================= */
:root{
 --bg:#f5f7fb;--surface:#fff;--surface-2:#f8fafc;--text:#172033;--muted:#667085;
 --border:#e7eaf0;--primary:#635bff;--primary-2:#7c3aed;--success:#16a34a;
 --danger:#ef4444;--warning:#f59e0b;--shadow:0 18px 55px rgba(15,23,42,.08);
 --radius:18px;--header:76px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.7 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;transition:background .2s,color .2s}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 10% 0%,rgba(99,91,255,.08),transparent 28%),radial-gradient(circle at 100% 15%,rgba(124,58,237,.06),transparent 24%);z-index:-1}
a{color:inherit;text-decoration:none}
img{max-width:100%}
button,input,select,textarea{font:inherit}
.container{width:min(1180px,calc(100% - 32px));margin:auto}
.site-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.86);backdrop-filter:blur(18px);border-bottom:1px solid var(--border)}
.nav{min-height:var(--header);display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:20px;letter-spacing:-.3px;white-space:nowrap}
.brand b,.brand img{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;object-fit:cover}
.brand b{color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-2));box-shadow:0 8px 24px rgba(99,91,255,.25)}
.main-nav{display:flex;align-items:center;gap:5px}
.main-nav>a{padding:10px 12px;border-radius:11px;color:var(--muted);font-weight:700}
.main-nav>a:hover,.main-nav>a.active{background:var(--surface-2);color:var(--text)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 15px;border:1px solid transparent;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff!important;font-weight:800;box-shadow:0 8px 20px rgba(99,91,255,.2);cursor:pointer;transition:.2s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.03)}
.btn-light{background:var(--surface);color:var(--text)!important;border-color:var(--border);box-shadow:none}
.theme-btn,.menu-btn{width:42px;height:42px;border:1px solid var(--border);background:var(--surface);border-radius:12px;cursor:pointer;color:var(--text)}
.menu-btn{display:none}
main{min-height:60vh}
.hero{padding:88px 0 78px;background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(244,240,255,.9));border-bottom:1px solid var(--border)}
.hero h1{font-size:clamp(36px,6vw,62px);line-height:1.02;letter-spacing:-2px;max-width:820px;margin:10px 0 18px}
.hero p{max-width:720px;color:var(--muted);font-size:18px}
.eyebrow,.tag{color:var(--primary);font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:.09em}
.page{padding:42px 0 80px}
.section{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:24px 0 18px}
.section h2,.section h1{margin:0;letter-spacing:-.8px}
.grid,.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.card,.featured,.panel,.form-card,.table-wrap,.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card{overflow:hidden;transition:.2s}
.card:hover{transform:translateY(-4px);box-shadow:0 24px 65px rgba(15,23,42,.12)}
.card img{width:100%;height:210px;object-fit:cover;background:var(--surface-2)}
.card-body{padding:20px}
.card h3{margin:7px 0 8px;line-height:1.3}
.muted{color:var(--muted)}
.featured{display:grid;grid-template-columns:1.08fr 1fr;overflow:hidden}
.featured img{width:100%;height:100%;min-height:360px;object-fit:cover}
.featured-body{padding:34px}
.search{display:flex;gap:8px;flex-wrap:wrap}
input,select,textarea{width:100%;border:1px solid var(--border);border-radius:12px;padding:12px 14px;background:var(--surface);color:var(--text);outline:none;transition:.2s}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(99,91,255,.11)}
textarea{min-height:160px;resize:vertical}
label{display:block;font-weight:800;margin:0 0 7px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.form-card,.panel{padding:24px}
.alert{padding:13px 15px;border-radius:13px;margin:15px 0;border:1px solid transparent}
.alert-success{background:#ecfdf3;color:#166534;border-color:#bbf7d0}.alert-error{background:#fef2f2;color:#991b1b;border-color:#fecaca}
.meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.badge{display:inline-flex;padding:5px 9px;border-radius:999px;background:rgba(99,91,255,.1);color:var(--primary);font-size:12px;font-weight:800}
.article{max-width:860px;margin:auto}.article h1{font-size:clamp(34px,5vw,56px);line-height:1.08;letter-spacing:-1.5px}.article-content{font-size:17px}.article-content img{border-radius:16px}
.site-footer{margin-top:70px;padding:55px 0 25px;color:#cbd5e1;background:#0b1020;position:relative;overflow:hidden}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:35px}.site-footer h3{color:#fff}.site-footer a{color:#cbd5e1}.site-footer a:hover{color:#fff}
.footer-bottom{margin-top:35px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap}
.back-top{position:fixed;right:22px;bottom:22px;width:44px;height:44px;border:0;border-radius:50%;background:var(--primary);color:#fff;cursor:pointer;box-shadow:0 12px 30px rgba(99,91,255,.3);display:none;z-index:900}
.back-top.show{display:block}
/* admin */
.admin-shell{display:grid;grid-template-columns:245px 1fr;gap:22px;align-items:start}
.admin-sidebar{position:sticky;top:95px;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:14px;box-shadow:var(--shadow)}
.admin-sidebar .side-title{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:900;padding:10px}
.admin-sidebar a{display:flex;gap:10px;align-items:center;padding:11px 12px;border-radius:12px;color:var(--muted);font-weight:750;margin:2px 0}
.admin-sidebar a:hover,.admin-sidebar a.active{background:rgba(99,91,255,.1);color:var(--primary)}
.admin-main{min-width:0}
.admin-title{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:20px}
.admin-title h1{margin:0;font-size:30px;letter-spacing:-1px}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.stat-card{padding:20px}.stat-card .icon{font-size:24px}.stat-card .num{font-size:30px;font-weight:900;line-height:1.2}.stat-card .label{color:var(--muted);font-weight:700}
.table-wrap{overflow:auto}.table-wrap table{width:100%;border-collapse:collapse;min-width:720px}.table-wrap th,.table-wrap td{padding:14px 16px;border-bottom:1px solid var(--border);text-align:left}.table-wrap th{font-size:12px;text-transform:uppercase;color:var(--muted);background:var(--surface-2)}
.modal{backdrop-filter:blur(8px)}
@media(max-width:900px){.grid,.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.featured{grid-template-columns:1fr}.featured img{min-height:260px}.admin-shell{grid-template-columns:1fr}.admin-sidebar{position:static}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.main-nav{display:none;position:absolute;left:16px;right:16px;top:70px;padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.main-nav.open{display:flex}.main-nav>a{text-align:left}.menu-btn{display:block}}
@media(max-width:620px){.container{width:min(100% - 22px,1180px)}.grid,.cards,.form-grid,.stats-grid{grid-template-columns:1fr}.hero{padding:60px 0}.hero h1{letter-spacing:-1px}.page{padding-top:28px}.section{align-items:flex-start;flex-direction:column}.footer-grid{grid-template-columns:1fr}.featured-body{padding:24px}.admin-title{align-items:flex-start;flex-direction:column}}
/* dark mode */
body.dark{--bg:#0b1020;--surface:#111827;--surface-2:#172033;--text:#edf2f7;--muted:#9aa6b8;--border:#263246;--shadow:0 18px 55px rgba(0,0,0,.25)}
body.dark .site-header{background:rgba(11,16,32,.86)}
body.dark .hero{background:linear-gradient(135deg,#0f172a,#15102a)}
body.dark .alert-success{background:#052e1a;color:#bbf7d0;border-color:#14532d}
body.dark .alert-error{background:#3a1115;color:#fecaca;border-color:#7f1d1d}
::selection{background:rgba(99,91,255,.22)}

/* =========================================================
   2026 UI POLISH
========================================================= */
.header-actions{display:flex;align-items:center;gap:9px}
.header-search{display:flex;align-items:center;width:min(280px,26vw);height:42px;border:1px solid var(--border);background:var(--surface);border-radius:13px;overflow:hidden;transition:.2s}
.header-search:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px rgba(99,91,255,.10)}
.header-search input{min-width:0;height:100%;padding:0 10px 0 13px;border:0;border-radius:0;background:transparent;box-shadow:none!important}
.header-search button{width:42px;height:100%;border:0;background:transparent;color:var(--muted);font-size:20px;cursor:pointer}
.header-search button:hover{color:var(--primary)}
.main-nav{max-width:100%}
.site-header{box-shadow:0 4px 24px rgba(15,23,42,.04)}
body.dark .header-search{background:#111827}
body.dark .header-search input{color:#edf2f7}
body.dark .card,body.dark .panel,body.dark .form-card,body.dark .table-wrap,body.dark .stat-card{box-shadow:0 18px 55px rgba(0,0,0,.2)}
.btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626)!important;color:#fff!important;border:0}
.post-comment-actions{display:flex;justify-content:flex-end;margin-top:8px}
.post-comment-actions button{border:0;background:transparent;color:#9b8fa5;font-size:12px;font-weight:800;cursor:pointer;padding:4px 7px;border-radius:7px}
.post-comment-actions button:hover{background:#fef2f2;color:#dc2626}
body.dark .post-comment-actions button:hover{background:#3a1115}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:1100px){.header-search{width:220px}.main-nav>a{padding:9px 8px;font-size:13px}}
@media(max-width:900px){.header-actions{gap:7px}.header-search{display:none}.main-nav{top:72px}}
@media(max-width:620px){.site-header{box-shadow:0 3px 18px rgba(15,23,42,.06)}.brand span{max-width:150px;overflow:hidden;text-overflow:ellipsis}.container{width:min(100% - 22px,1180px)}}


/* =========================================================
   MOBILE HEADER FIX / CACHE-SAFE POLISH
========================================================= */
html,body{max-width:100%;overflow-x:hidden}
.nav{min-width:0}
.brand{min-width:0;overflow:hidden}
.brand span{overflow:hidden;text-overflow:ellipsis}
.header-actions{min-width:0;margin-left:auto;flex-shrink:0}
.header-search{flex:0 0 auto}
@media(max-width:1024px){
  .header-search{display:none!important}
  .main-nav{display:none;position:fixed;left:12px;right:12px;top:calc(var(--header) + 8px);max-height:calc(100vh - var(--header) - 20px);overflow:auto;padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:0 24px 70px rgba(15,23,42,.18);flex-direction:column;align-items:stretch}
  .main-nav.open{display:flex}
  .main-nav>a{text-align:left;width:100%;padding:12px 14px}
  .menu-btn{display:grid;place-items:center}
}
@media(max-width:620px){
  :root{--header:64px}
  .nav{min-height:64px;gap:8px}
  .brand{font-size:17px;gap:8px}
  .brand b,.brand img{width:38px;height:38px;border-radius:11px}
  .header-actions{gap:6px}
  .theme-btn,.menu-btn{width:38px;height:38px;border-radius:11px}
  .hero h1{font-size:clamp(30px,8vw,46px)}
  .article h1{font-size:clamp(30px,7vw,48px)}
  .card img{height:190px}
}

/* =========================================================
   MOBILE SCROLL / IOS SAFARI FIX
   Prevent accidental scroll locking while preserving modal locks.
========================================================= */
html {
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
body {
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
main,
.site-footer {
  touch-action: pan-y;
}
@media (max-width: 768px) {
  html, body {
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .site-header {
    position: sticky;
    top: 0;
  }
  .main-nav,
  .modal,
  .cm-modal,
  .ap-lightbox,
  [role="dialog"] {
    touch-action: auto;
  }
}

/* Header account dropdown compatibility */
.site-header-modern .menu-btn{display:none}
@media(max-width:900px){.site-header-modern .menu-btn{display:block}.site-header-modern .main-nav{display:none}.site-header-modern .main-nav.open{display:flex}}


/* =========================================================
   SHARED HEADER / FOOTER COMPONENTS
========================================================= */
/* =========================================================
   HEADER STYLE - USER DROPDOWN
========================================================= */
.site-header.site-header-modern{
    position:sticky;top:0;z-index:1200;
    background:#06151d;
    border:0;
    box-shadow:0 8px 30px rgba(2,8,23,.18);
    color:#fff;
}
.site-header-modern .nav{min-height:70px;gap:18px}
.site-header-modern .brand{color:#fff}
.site-header-modern .brand b{background:linear-gradient(135deg,#65a30d,#16a34a);box-shadow:0 7px 20px rgba(22,163,74,.28)}
.site-header-modern .main-nav{gap:2px}
.site-header-modern .main-nav>a{color:#d8e1e6}
.site-header-modern .main-nav>a:hover,.site-header-modern .main-nav>a.active{background:rgba(255,255,255,.09);color:#fff}
.site-header-modern .header-search{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.13)}
.site-header-modern .header-search input{color:#fff}
.site-header-modern .header-search input::placeholder{color:#9fb0b8}
.site-header-modern .header-search button{color:#b8c5ca}
.site-header-modern .theme-btn,.site-header-modern .menu-btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#fff}

.header-account{position:relative;flex:0 0 auto}
.header-account-toggle{
    min-width:178px;height:54px;padding:5px 10px 5px 7px;border:1px solid rgba(255,255,255,.25);
    border-radius:30px;background:linear-gradient(135deg,rgba(70,106,49,.95),rgba(10,75,54,.94));
    color:#fff;display:flex;align-items:center;gap:9px;cursor:pointer;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 7px 22px rgba(0,0,0,.14);transition:.2s;
}
.header-account-toggle:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.4)}
.header-account-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;flex:0 0 40px;display:grid;place-items:center;background:linear-gradient(135deg,#b7df69,#65a30d);color:#23400f;border:2px solid rgba(255,255,255,.35);font-weight:950}
.header-account-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.header-account-info{min-width:0;display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.header-account-name{max-width:105px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:900;font-size:13px}
.header-account-balance{display:flex;gap:5px;align-items:center;color:#ffe28a;font-size:11px;font-weight:800;margin-top:3px}
.header-account-arrow{margin-left:auto;font-size:13px;opacity:.8;transition:.2s}
.header-account.open .header-account-arrow{transform:rotate(180deg)}
.header-dropdown{
    position:absolute;right:0;top:calc(100% + 10px);width:302px;background:#fff;color:#18212a;border-radius:20px;
    border:1px solid #e7ebee;box-shadow:0 24px 60px rgba(15,23,42,.2);overflow:hidden;
    opacity:0;visibility:hidden;transform:translateY(-7px) scale(.98);transform-origin:top right;transition:.18s ease;
}
.header-account.open .header-dropdown{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.header-profile-mini{padding:17px 18px 15px;background:linear-gradient(135deg,#31583e,#08764f);color:#fff;display:flex;align-items:center;gap:11px}
.header-profile-mini-avatar{width:46px;height:46px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#f1f5f9;color:#475569;font-weight:900;border:2px solid rgba(255,255,255,.4);flex:0 0 46px}
.header-profile-mini-avatar img{width:100%;height:100%;object-fit:cover}
.header-profile-mini strong{display:block;font-size:14px;line-height:1.2}
.header-profile-mini small{display:block;margin-top:5px;color:#d8f5e5;font-size:11px}
.header-profile-mini .verified-dot{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#1994ff;font-size:10px;margin-left:3px;vertical-align:middle}
.header-balance-row{display:flex;gap:7px;margin-top:8px;flex-wrap:wrap}
.header-balance-pill{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:8px;background:rgba(255,255,255,.14);font-size:10px;font-weight:800}
.header-dropdown-title{padding:13px 18px 7px;color:#6b7280;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.header-dropdown-list{padding:0 9px 9px}
.header-dropdown-item{display:flex;align-items:center;gap:11px;padding:11px 10px;border-radius:12px;color:#24313a;font-weight:700;font-size:13px;transition:.16s}
.header-dropdown-item:hover{background:#eef8ef;color:#17643f}
.header-dropdown-item.active{background:#eaf8e9;color:#17643f}
.header-dropdown-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#f1f7f2;color:#34734b;font-size:17px;flex:0 0 34px}
.header-dropdown-arrow{margin-left:auto;color:#a0a9af;font-size:17px}
.header-dropdown-divider{height:1px;background:#edf0f2;margin:4px 10px}
.header-dropdown-item.logout{color:#c24141;background:#fff8f8;margin-top:3px}
.header-dropdown-item.logout .header-dropdown-icon{color:#d04b4b;background:#fff0f0}
.header-account-login{display:flex;align-items:center;gap:8px}
@media(max-width:1100px){.site-header-modern .main-nav>a{font-size:12px;padding:9px 7px}.header-account-toggle{min-width:165px}}
@media(max-width:900px){
    .site-header-modern .nav{min-height:66px}
    .site-header-modern .main-nav{top:70px;background:#081922;border-color:rgba(255,255,255,.1)}
    .site-header-modern .main-nav>a{color:#dbe7eb}
    .site-header-modern .main-nav>a:hover,.site-header-modern .main-nav>a.active{background:rgba(255,255,255,.08);color:#fff}
    .header-account-toggle{min-width:154px;height:50px}
    .header-account-avatar{width:36px;height:36px;flex-basis:36px}
}
@media(max-width:620px){
    .site-header-modern .brand span{display:none}
    .site-header-modern .brand b,.site-header-modern .brand img{width:39px;height:39px}
    .header-account-toggle{min-width:142px;padding-right:8px}
    .header-account-name{max-width:80px}
    .header-dropdown{position:fixed;right:11px;left:11px;top:68px;width:auto}
}

/* =========================================================
   PREMIUM FOOTER
========================================================= */

.site-footer {
    position: relative;
    margin-top: 70px;
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(124,58,237,.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 20%,
            rgba(37,99,235,.10),
            transparent 28%
        ),
        #111827;
    color: #dbe3ef;
    overflow: hidden;
}

.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.025),
            transparent 40%
        );
}

.site-footer .container {
    position: relative;
    z-index: 2;
}

/* =========================================================
   FOOTER TOP
========================================================= */

.footer-top {
    padding: 58px 0 42px;
}

.footer-grid {
    display: grid;
    grid-template-columns:
        minmax(250px, 1.45fr)
        minmax(190px, 1fr)
        minmax(190px, 1fr)
        minmax(210px, 1fr);

    gap: 38px;
}

/* =========================================================
   BRAND
========================================================= */

.footer-brand {
    min-width: 0;
}

.footer-brand-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 15px;
}

.footer-logo {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    object-fit: contain;
    background: rgba(255,255,255,.95);
    padding: 5px;
    box-sizing: border-box;
    box-shadow:
        0 10px 30px rgba(0,0,0,.18);
}

.footer-logo-placeholder {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #2563eb
        );
    color: #fff;
    font-size: 22px;
    font-weight: 900;
    box-shadow:
        0 10px 30px rgba(37,99,235,.25);
}

.footer-brand h3 {
    margin: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 850;
    letter-spacing: -.3px;
}

.footer-brand-desc {
    margin: 0;
    max-width: 440px;
    color: #aeb9c9;
    line-height: 1.75;
    font-size: 14px;
}

/* =========================================================
   COLUMN
========================================================= */

.footer-column h3 {
    position: relative;
    margin: 0 0 17px;
    padding-bottom: 11px;
    color: #fff;
    font-size: 15px;
    font-weight: 850;
}

.footer-column h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 35px;
    height: 3px;
    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            #8b5cf6,
            #3b82f6
        );
}

.footer-links {
    display: grid;
    gap: 10px;
}

.footer-links a,
.footer-column a {
    color: #aeb9c9;
    text-decoration: none;
    font-size: 13px;
    transition:
        color .2s ease,
        transform .2s ease;
}

.footer-links a:hover,
.footer-column a:hover {
    color: #fff;
    transform: translateX(3px);
}

/* =========================================================
   CONTACT
========================================================= */

.footer-contact {
    display: grid;
    gap: 11px;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #aeb9c9;
    font-size: 13px;
    line-height: 1.55;
}

.footer-contact-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(255,255,255,.07);
    color: #c4b5fd;
    font-size: 15px;
}

.footer-contact-content {
    min-width: 0;
}

.footer-contact-content strong {
    display: block;
    color: #e7edf6;
    font-size: 11px;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.footer-contact-content a {
    word-break: break-word;
}

/* =========================================================
   SOCIAL
========================================================= */

.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.footer-social a {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.07);
    color: #dce5f2;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition:
        transform .2s ease,
        background .2s ease,
        color .2s ease;
}

.footer-social a:hover {
    transform: translateY(-4px);
    background: #fff;
    color: #111827;
}

/* =========================================================
   FOOTER BADGE
========================================================= */

.footer-badge {
    margin-top: 17px;
    padding: 13px 14px;
    border-radius: 13px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.07);
    color: #aeb9c9;
    font-size: 11px;
    line-height: 1.6;
}

.footer-badge strong {
    color: #fff;
}

/* =========================================================
   DIVIDER
========================================================= */

.footer-divider {
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.13),
            transparent
        );
}

/* =========================================================
   FOOTER BOTTOM
========================================================= */

.footer-bottom {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    color: #8f9caf;
    font-size: 12px;
}

.footer-bottom-left {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.footer-bottom-right {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.footer-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #667085;
}

/* =========================================================
   BACK TOP
========================================================= */

.back-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9999;

    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255,255,255,.14);
    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #2563eb
        );

    color: #fff;
    font-size: 20px;
    font-weight: 800;

    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);

    box-shadow:
        0 12px 35px rgba(37,99,235,.28);

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease;
}

.back-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-top:hover {
    transform: translateY(-4px);
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 950px) {

    .footer-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

}

@media (max-width: 600px) {

    .site-footer {
        margin-top: 45px;
    }

    .footer-top {
        padding: 40px 0 28px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-brand {
        grid-column: auto;
    }

    .footer-bottom {
        padding: 18px 0;
        min-height: auto;
        flex-direction: column;
        align-items: flex-start;
    }

    .back-top {
        right: 15px;
        bottom: 15px;
        width: 43px;
        height: 43px;
    }

}

/* =========================================================
   DARK MODE
========================================================= */

body.dark .site-footer {
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(124,58,237,.16),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 20%,
            rgba(37,99,235,.14),
            transparent 28%
        ),
        #080d18;
}

/* =========================================================
   REDUCE MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .site-footer *,
    .back-top {
        transition: none !important;
    }

}

/* =========================================================
   HAI PHONG NEW — FINAL UI LAYER
   Đồng bộ màu sắc, khoảng cách, header, cards, forms và mobile.
========================================================= */
:root{
  --hp-primary:#7c3aed;
  --hp-primary-2:#a855f7;
  --hp-ink:#10111a;
  --hp-dark:#0b0b12;
  --hp-green:#22c55e;
  --hp-radius:20px;
}
body{background:linear-gradient(180deg,#f7f7fb 0,#f3f5f9 55%,#eef1f6 100%)}
.site-header.site-header-modern{background:rgba(10,10,16,.94);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08)}
.site-header-modern .nav{min-height:72px}
.site-header-modern .brand{font-size:19px;letter-spacing:-.4px}
.site-header-modern .brand span{color:#fff}
.site-header-modern .brand b,.site-header-modern .brand img{width:44px;height:44px;border-radius:14px}
.site-header-modern .main-nav>a{font-size:13px;color:#c9c9d2;padding:10px 11px}
.site-header-modern .main-nav>a:hover,.site-header-modern .main-nav>a.active{background:rgba(255,255,255,.08);color:#fff}
.site-header-modern .header-search{height:42px;border-radius:13px;background:#17171f;border-color:#2b2b37}
.site-header-modern .header-search input{color:#fff}
.site-header-modern .header-account-toggle{min-width:172px;height:50px;border-radius:15px;background:#15151d;border-color:#30303b;color:#fff;transition:.2s}
.site-header-modern .header-account-toggle:hover{border-color:#555568;background:#1b1b25;transform:translateY(-1px)}
.site-header-modern .header-account-avatar,.site-header-modern .header-profile-mini-avatar{background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff;overflow:hidden}
.site-header-modern .header-dropdown{border:1px solid #e7e7ee;box-shadow:0 24px 70px rgba(15,15,25,.18);border-radius:18px;overflow:hidden}
.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 90% 15%,rgba(139,92,246,.22),transparent 25%),linear-gradient(135deg,#17131f,#111116 58%,#21163a);color:#fff;border:0}
.hero:after{content:"";position:absolute;width:420px;height:420px;border:1px solid rgba(255,255,255,.06);border-radius:50%;right:-160px;top:-210px;box-shadow:0 0 0 70px rgba(255,255,255,.018),0 0 0 140px rgba(255,255,255,.012);pointer-events:none}
.hero .container{position:relative;z-index:1}
.hero h1{max-width:920px;font-weight:950;letter-spacing:-2.8px}
.hero p{color:#aaa8b7;max-width:820px}
.hero .eyebrow,.hero .tag{color:#c084fc}
.btn{background:linear-gradient(135deg,#8b5cf6,#7c3aed);box-shadow:0 12px 28px rgba(124,58,237,.25);border-radius:13px}
.btn-light{background:#fff;color:#1f1f28!important}
.page{padding-top:38px}
.card,.featured,.panel,.form-card,.table-wrap,.stat-card{border-color:#e8e8ef;box-shadow:0 12px 35px rgba(18,20,30,.06)}
.card{border-radius:18px}.card:hover{box-shadow:0 22px 60px rgba(18,20,30,.12)}
.card-body{padding:20px 21px 22px}
.badge{background:rgba(124,58,237,.1);color:#6d28d9}
input,select,textarea{border-color:#dedfe8;background:#fff}
input:focus,select:focus,textarea:focus{border-color:#8b5cf6;box-shadow:0 0 0 4px rgba(139,92,246,.1)}
.section{margin-top:34px}
.section h2,.section h1{font-weight:900}
.site-footer{background:#0c0c12}
.back-top{background:linear-gradient(135deg,#8b5cf6,#6d28d9)}
@media(max-width:1024px){.site-header-modern .main-nav{top:76px;background:#111118;border-color:#2b2b37}.site-header-modern .main-nav>a{color:#d8d8e0}.site-header-modern .main-nav>a:hover,.site-header-modern .main-nav>a.active{background:#22222c}}
@media(max-width:700px){.hero{padding:66px 0 58px}.hero h1{letter-spacing:-1.8px}.hero p{font-size:16px}.site-header-modern .header-account-toggle{min-width:44px;width:44px;padding:4px;justify-content:center}.site-header-modern .header-account-info,.site-header-modern .header-account-arrow{display:none}.container{width:min(100% - 24px,1180px)}}