*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f6f8fb;color:#172033;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-size:14px}a{color:inherit}button,input,select,textarea{font:inherit}button{cursor:pointer}img{max-width:100%}:root{--primary:#00a36c;--secondary:#005b46;--accent:#d7f000;--line:#d4deea;--text:#172033;--muted:#64748b;--soft:#f5f8fc;--blue:#0877cc;--danger:#e52434;--shadow:0 2px 7px rgba(15,23,42,.08)}
.topbar{height:70px;display:flex;align-items:center;gap:22px;padding:0 28px;background:var(--primary);color:#fff;border-bottom:1px solid rgba(0,0,0,.16);position:sticky;top:0;z-index:80}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:285px}.brand-icon{width:42px;height:42px;border:1px solid rgba(255,255,255,.22);border-radius:12px;background:rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;font-size:22px}.brand-icon img{width:28px;height:28px;object-fit:contain;border-radius:7px}.brand-copy{display:flex;flex-direction:column}.brand-copy strong{font-size:19px;line-height:1.1}.brand-copy small{font-size:11px;color:#d8f8ec;margin-top:5px}.version-badge{font-size:11px;border-radius:8px;padding:5px 8px;background:#00664c;color:#99ffe0;align-self:flex-start}.global-search{height:38px;max-width:460px;min-width:300px;flex:1;margin:0 auto;background:var(--accent);border-radius:11px;display:flex;align-items:center;gap:8px;padding:0 13px;color:#4b6d75}.global-search input{flex:1;border:0;outline:0;background:transparent;color:#536774;font-weight:650}.global-search input::placeholder{color:#719497}.top-actions{display:flex;align-items:center;gap:9px;white-space:nowrap}.top-btn,.top-user{height:38px;border:0;border-radius:12px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:750;color:#fff}.top-user{background:#00543f;color:#9cf9dc}.top-btn.share{background:#0877cc}.top-btn.admin{background:#1769dd}.site-shell{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:calc(100vh - 70px)}
.sidebar{background:var(--secondary);color:#fff;display:flex;flex-direction:column;min-height:760px;position:relative;z-index:60}.sidebar-scroll{padding:16px 15px 20px;flex:1}.side-main{display:grid;grid-template-columns:24px 1fr auto;gap:9px;align-items:center;padding:12px 14px;border-radius:12px;text-decoration:none;margin-bottom:5px;color:#f4fffb}.side-main.active{background:#00a675;border:1px solid #24d3a4}.side-main b{font-size:14px}.side-main em,.side-parent em,.side-children em{font-style:normal;font-size:11px;background:#004936;border:1px solid #0d8569;border-radius:7px;padding:3px 7px}.side-label{margin:20px -15px 12px;padding:0 20px;min-height:40px;display:flex;align-items:center;gap:8px;color:#44e5ba;font-size:10px;letter-spacing:.06em;border-top:1px solid rgba(255,255,255,.06)}.side-label b{flex:1}.side-label a{text-decoration:none;border:1px solid #0c8066;border-radius:9px;padding:6px 9px;font-size:11px;letter-spacing:0}.side-group{border:1px solid #087a61;border-radius:13px;margin-bottom:12px;overflow:hidden}.side-parent{width:100%;border:0;background:#006047;color:#fff;display:grid;grid-template-columns:24px minmax(0,1fr) auto 15px;gap:8px;align-items:center;padding:12px 13px;text-align:left}.side-parent b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.side-parent i{font-style:normal;transition:.2s}.side-group.collapsed .side-parent i{transform:rotate(180deg)}.side-children{padding:5px 9px 9px 16px;border-left:2px solid #00a675;margin-left:15px}.side-group.collapsed .side-children{display:none}.side-children a{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:7px;align-items:center;text-decoration:none;color:#d9fff4;padding:9px 7px;border-radius:8px;font-size:12px}.side-children a:hover,.side-children a.active{background:#00513e;color:#fff}.side-children b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-admin-box{padding:15px;margin:0 14px 16px;border:1px solid #0e8168;background:#00513e;border-radius:13px;display:flex;flex-direction:column;gap:5px}.sidebar-admin-box small{font-size:10px;color:#7cf2d0}.sidebar-admin-box span{font-size:11px;color:#6ce4c4}.sidebar-admin-box a{margin-top:6px;text-decoration:none;text-align:center;background:#00a675;border:1px solid #14c89a;padding:9px;border-radius:9px;font-weight:750}.sidebar-mobile-head,.sidebar-overlay{display:none}
.content{padding:28px 32px 32px;min-width:0}.mobile-menu-btn{display:none}.hero-card{background:linear-gradient(110deg,#fff 60%,#f0fff9);border:1px solid #cbd8e5;border-radius:7px;box-shadow:var(--shadow);padding:26px 32px;margin-bottom:24px}.hero-title{display:flex;gap:15px;align-items:center;padding-bottom:24px;border-bottom:1px solid #e5ebf2}.hero-icon{width:58px;height:58px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;font-size:28px}.hero-title h1{font-size:24px;margin:0 0 5px}.hero-title h1 small{font-size:10px;color:#006b50;border:1px solid #33d7a9;border-radius:6px;padding:5px 10px;vertical-align:middle;margin-left:8px}.hero-title p{margin:0;color:#526479}.filter-row{padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:18px}.type-filters{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.type-filters label,.sort-form label{font-size:10px;color:#53657b;font-weight:700}.type-filters a{font-size:11px;text-decoration:none;padding:7px 11px;border:1px solid #cbd8e6;border-radius:6px;background:#f7f9fc;color:#4e5d73}.type-filters a.active{background:#006d50;border-color:#006d50;color:#fff;font-weight:700}.sort-form{display:flex;align-items:center;gap:8px}.sort-form select,.pagination-bar select{height:32px;border:1px solid #c8d4e1;border-radius:6px;background:#f8fafc;padding:0 10px;color:#314158}.software-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.software-card{background:#fff;border:1px solid #cbd7e5;border-radius:8px;min-width:0;display:flex;flex-direction:column;overflow:hidden;min-height:216px}.card-head{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;padding:16px 18px 8px;align-items:start}.card-head>img{width:56px;height:56px;border:1px solid #d9e2ec;border-radius:9px;padding:8px;object-fit:contain;background:#f8fafc}.card-title h3{margin:3px 0 6px;font-size:16px;line-height:1.25;color:#081226}.card-title p{margin:0;color:#51708c;font-size:11px}.card-title p::first-letter{color:#00a36c}.card-title small{display:block;margin-top:5px;color:#7182a3;font-size:10px}.featured-badge{display:inline-flex;align-items:center;white-space:nowrap;background:#fff9dd;border:1px solid #ffb800;color:#d77a00;border-radius:6px;padding:4px 8px;font-size:10px;font-weight:700}.card-desc{margin:10px 18px 12px;color:#42536a;line-height:1.55;min-height:48px}.card-actions{margin-top:auto;border-top:1px solid #e2e8f0;background:#fbfcfe;padding:11px 16px;display:flex;justify-content:space-between;align-items:center;gap:8px}.action-right{display:flex;gap:7px;justify-content:flex-end;flex-wrap:wrap}.detail-btn,.video-btn,.visit-btn,.download-btn{border-radius:8px;padding:8px 11px;font-size:11px;font-weight:750;text-decoration:none;white-space:nowrap}.detail-btn{border:1px solid #d1dbe7;background:#f7fafc;color:#ef263c}.visit-btn{border:1px solid #00b978;background:#04c985;color:#fff}.video-btn{border:1px solid #e7232d;background:#e7232d;color:#fff}.download-btn{border:1px solid #2b6cb0;background:#2b6cb0;color:#fff}.empty-state{background:#fff;border:1px dashed #cbd8e5;border-radius:12px;padding:55px 20px;text-align:center;color:#64748b}.empty-state b{font-size:35px}.empty-state h3{color:#172033}.pagination-bar{margin-top:24px;background:#fff;border:1px solid #cbd8e5;border-radius:7px;box-shadow:var(--shadow);padding:13px 16px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;color:#53657a;font-size:11px}.pagination-bar form{display:flex;align-items:center;gap:8px;border-left:1px solid #e0e6ee;padding-left:18px}.pages{margin-left:auto;display:flex;gap:5px}.pages a{min-width:30px;height:30px;border:1px solid #ccd8e4;background:#fff;border-radius:6px;text-decoration:none;display:flex;align-items:center;justify-content:center}.pages a.active{background:#006d50;color:#fff;border-color:#006d50}
.site-footer{background:#067333;color:#eafff2;padding:36px 30px 16px}.footer-grid{display:grid;grid-template-columns:1.05fr 2fr 1fr;gap:42px;max-width:1320px;margin:auto}.site-footer h3{font-size:16px;margin:0 0 13px}.site-footer h4{margin:0 0 14px;color:#63d7ce;font-size:10px;letter-spacing:.09em}.site-footer p{color:#a8e0c0;line-height:1.5;font-size:12px}.site-footer small{color:#7fd6a5}.footer-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px 24px}.footer-links a{text-decoration:none;font-size:12px}.footer-admin-btn{display:inline-flex;margin-top:8px;text-decoration:none;background:#079e69;border:1px solid #22ba85;border-radius:8px;padding:9px 12px;font-weight:700}.footer-bottom{max-width:1320px;margin:30px auto 0;padding-top:18px;border-top:1px solid rgba(0,0,0,.3);display:flex;justify-content:space-between;color:#79d6b0;font-size:10px}.footer-bottom b{color:#72f5c0}
.modal{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:24px}.modal.open{display:flex}.modal-backdrop{position:absolute;inset:0;background:rgba(14,22,38,.68);backdrop-filter:blur(3px)}body.modal-open{overflow:hidden}.detail-modal,.video-modal{position:relative;z-index:2;background:#fff;border-radius:9px;box-shadow:0 25px 70px rgba(0,0,0,.28);overflow:hidden;width:min(760px,95vw);max-height:92vh}.modal-x{position:absolute;right:23px;top:25px;border:0;background:transparent;color:#94a3b8;font-size:28px;z-index:5}.detail-top{display:flex;gap:17px;align-items:center;padding:28px 70px 20px 25px;border-bottom:1px solid #e3e9f1}.detail-top img{width:65px;height:65px;border:1px solid #d6e0eb;border-radius:8px;padding:8px;object-fit:contain}.detail-top h2{margin:0 0 7px;font-size:21px}.detail-top .featured-badge{vertical-align:3px;margin-left:5px}.detail-category{color:#594eff;margin:0 0 7px;font-weight:700}.detail-top small{color:#6d7d92}.detail-body{padding:22px 25px}.detail-body h4{font-size:11px;color:#8593a9;margin:0 0 10px}.detail-body>p{color:#41536b;line-height:1.6;margin:0 0 22px}.detail-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;background:#f6f8fb;border:1px solid #e5eaf1;border-radius:17px;padding:16px;margin-bottom:20px}.detail-stats>div{display:grid;grid-template-columns:28px 1fr;align-items:center}.detail-stats i{font-style:normal;color:#ff9d00;font-size:18px;grid-row:1/3}.detail-stats span{font-size:11px;color:#94a3b8}.detail-stats b{font-size:12px}.target-link{background:#f1f4ff;border:1px solid #d6dcff;border-radius:12px;padding:14px 16px;display:flex;align-items:center;gap:9px;color:#4a4bd7;overflow:hidden}.target-link a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#473ef1}.detail-foot{background:#fbfcfe;border-top:1px solid #e3e9f1;padding:18px 22px;display:flex;justify-content:flex-end;gap:10px;align-items:center}.detail-foot>button:first-child{border:0;background:transparent;color:#334155;margin-right:auto}.visit-big,.download-big,.video-big{border:0;text-decoration:none;border-radius:10px;padding:12px 17px;font-weight:800;color:#fff}.visit-big{background:#00a36c}.download-big{background:#2b6cb0}.video-big{background:#ea1018}.video-modal{width:min(900px,96vw);background:#061025;color:#fff;border:1px solid #1e314a;border-radius:22px}.video-modal-head{padding:18px 22px;display:flex;justify-content:space-between;align-items:center}.video-modal-head b{display:block}.video-modal-head small{display:block;color:#94a3b8;font-size:11px;margin-top:3px}.video-modal-head button{border:0;background:transparent;color:#94a3b8;font-size:26px}.video-frame-wrap{aspect-ratio:16/9;background:#000;display:flex;align-items:center;justify-content:center}.video-frame-wrap iframe,.video-frame-wrap video{width:100%;height:100%;border:0}.video-error{text-align:center;padding:40px}.video-error a{display:inline-block;margin-top:10px;background:#0ea5e9;color:#fff;text-decoration:none;padding:9px 12px;border-radius:8px}.video-modal-foot{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;color:#94a3b8;font-size:11px}.video-modal-foot button{border:0;border-radius:11px;background:#1b2942;color:#fff;padding:8px 17px;font-weight:700}
/* Admin */
.admin-shell{display:grid;grid-template-columns:250px minmax(0,1fr);gap:28px;padding:24px 28px;min-height:calc(100vh - 70px)}.admin-sidebar{background:#fff;border:1px solid #d7e0eb;border-radius:17px;padding:16px;height:max-content;position:sticky;top:94px}.admin-brand{background:#111a31;color:#fff;border-radius:12px;padding:14px;display:flex;flex-direction:column}.admin-brand small{font-size:9px;color:#24e3af;font-weight:800}.admin-brand strong{margin-top:7px}.admin-brand span{font-size:10px;color:#9db1d4;line-height:1.4;margin-top:5px}.admin-nav{display:flex;flex-direction:column;gap:5px;margin-top:14px}.admin-nav a{display:flex;gap:9px;align-items:center;text-decoration:none;color:#46566d;padding:11px 12px;border-radius:10px;font-weight:650;font-size:12px}.admin-nav a em{margin-left:auto;font-style:normal;font-size:10px;background:#e7edf5;padding:3px 7px;border-radius:6px}.admin-nav a.active{background:#00a36c;color:#fff}.admin-nav a.active em{background:#087a5a;color:#fff}.admin-notice{margin-top:16px;border-top:1px solid #e2e8f0;padding-top:14px;color:#718198;font-size:10px;line-height:1.5}.admin-content{min-width:0}.admin-page-title{display:flex;justify-content:space-between;gap:15px;align-items:end;margin-bottom:18px}.admin-page-title h1{margin:0;font-size:25px}.admin-page-title p{margin:5px 0 0;color:#64748b}.admin-grid{display:grid;grid-template-columns:minmax(340px,430px) minmax(0,1fr);gap:28px}.admin-card{background:#fff;border:1px solid #d6e0eb;border-radius:18px;padding:24px;box-shadow:0 2px 6px rgba(15,23,42,.04)}.admin-card h2{margin:0 0 6px;font-size:19px}.muted{color:#718198}.form-group{margin:16px 0}.form-group label{display:block;font-size:11px;color:#53627a;font-weight:800;margin-bottom:7px}.form-control{width:100%;border:1px solid #d2dce8;background:#f8fafc;border-radius:11px;padding:11px 13px;outline:0;color:#243247}.form-control:focus{border-color:#65cdb0;box-shadow:0 0 0 3px #e1fbf2}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}.btn-primary{width:100%;border:0;border-radius:11px;background:#5438ff;color:#fff;padding:13px;font-weight:800}.btn-green{background:#00a36c}.admin-list{display:flex;flex-direction:column;gap:9px;max-height:770px;overflow:auto;padding-right:5px}.list-item{border:1px solid #d7e1ec;border-radius:14px;padding:11px 12px;display:flex;align-items:center;gap:12px}.list-item img{width:44px;height:44px;border:1px solid #dce4ed;border-radius:9px;padding:6px;object-fit:contain}.list-item .info{min-width:0;flex:1}.list-item .info b{display:block}.list-item .info small{display:block;color:#718198;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.list-actions{display:flex;align-items:center;gap:6px}.list-actions a,.list-actions button{border:0;border-radius:9px;background:#eff4f9;color:#466078;text-decoration:none;padding:8px 10px;font-weight:700;font-size:11px}.list-actions button.danger{color:#e12b3f;background:#fff0f2}.tag{display:inline-block;border-radius:7px;background:#eef2f7;color:#58697d;padding:4px 7px;font-size:9px;font-weight:800}.tag.green{background:#dcfce7;color:#047857}.tag.orange{background:#fef3c7;color:#b45309}.flash{padding:12px 14px;border-radius:10px;margin:0 0 14px}.flash.success{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}.flash.error{background:#fff1f2;color:#be123c;border:1px solid #fecdd3}.admin-dashboard{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.stat-card{background:#fff;border:1px solid #d6e0eb;border-radius:16px;padding:20px}.stat-card small{color:#718198}.stat-card b{display:block;font-size:30px;margin-top:8px}.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}.quick-card{background:#fff;border:1px solid #d6e0eb;border-radius:14px;padding:18px;text-decoration:none}.quick-card strong{display:block;margin-bottom:5px}.quick-card span{color:#718198;font-size:11px}.login-page{min-height:100vh;background:linear-gradient(135deg,#f3f7fb,#e8fff7);display:flex;align-items:center;justify-content:center;padding:20px}.login-card{width:min(440px,100%);background:#fff;border:1px solid #d4dee9;border-radius:20px;padding:28px;box-shadow:0 20px 60px rgba(15,23,42,.12)}.login-card h1{font-size:22px;margin:0 0 7px}.login-card .btn-primary{margin-top:6px}.settings-section{border-top:1px solid #e4eaf1;margin-top:20px;padding-top:4px}.category-parent-card{border:1px solid #b9ddd3;background:#005c46;color:#fff;border-radius:14px;padding:13px 14px;display:flex;gap:12px;align-items:center}.category-parent-card .info{flex:1;min-width:0}.category-parent-card small{display:block;color:#86e9cd;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.category-children{border-left:2px solid #60d9b7;margin:7px 0 17px 25px;padding-left:15px}.dashboard-welcome{background:linear-gradient(110deg,#fff,#eefff8);border:1px solid #d3e2ec;border-radius:18px;padding:24px;margin-bottom:20px}.dashboard-welcome h1{margin:0 0 7px}.dashboard-welcome p{margin:0;color:#64748b}
@media(max-width:1180px){.software-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.site-shell{grid-template-columns:270px minmax(0,1fr)}.admin-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1.5fr}.footer-grid>div:last-child{grid-column:1/-1}.global-search{max-width:390px}.top-user{display:none}}
@media(max-width:900px){.topbar{padding:0 14px;height:64px}.brand{min-width:auto}.brand-copy small,.version-badge{display:none}.global-search{min-width:0;max-width:none}.top-actions .share{display:none}.site-shell{display:block}.sidebar{position:fixed;left:0;top:0;bottom:0;width:min(320px,88vw);min-height:0;transform:translateX(-105%);transition:.22s;z-index:210;box-shadow:20px 0 50px rgba(0,0,0,.22)}.sidebar.show{transform:translateX(0)}.sidebar-mobile-head{height:58px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.12)}.sidebar-mobile-head button{border:0;background:transparent;color:#fff;font-size:28px}.sidebar-overlay{display:block;position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:200;opacity:0;pointer-events:none;transition:.2s}.sidebar.show+.sidebar-overlay{opacity:1;pointer-events:auto}.content{padding:18px}.mobile-menu-btn{display:block;margin-bottom:12px;border:1px solid #cbd8e5;background:#fff;border-radius:9px;padding:9px 12px}.hero-card{padding:20px}.filter-row{align-items:flex-start;flex-direction:column}.software-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.site-footer{padding:30px 20px}.footer-grid{grid-template-columns:1fr}.footer-grid>div:last-child{grid-column:auto}.footer-links{grid-template-columns:repeat(2,1fr)}.footer-bottom{gap:10px;flex-direction:column}.admin-shell{display:block;padding:18px}.admin-sidebar{position:static;margin-bottom:18px}.admin-nav{display:grid;grid-template-columns:1fr 1fr}.admin-dashboard,.quick-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.brand-copy strong{font-size:15px}.brand-icon{width:36px;height:36px}.topbar{gap:9px}.global-search{height:36px}.top-btn.admin{padding:0 10px;font-size:0}.top-btn.admin::after{content:'⚙';font-size:17px}.content{padding:12px}.hero-card{padding:16px}.hero-title{align-items:flex-start}.hero-icon{width:44px;height:44px;font-size:22px}.hero-title h1{font-size:20px}.hero-title h1 small{display:inline-block;margin:6px 0 0}.software-grid{grid-template-columns:1fr;gap:13px}.card-head{grid-template-columns:50px minmax(0,1fr) auto;padding:14px}.card-head>img{width:50px;height:50px}.card-actions{align-items:flex-start}.action-right{gap:5px}.detail-btn,.video-btn,.visit-btn,.download-btn{padding:8px 9px}.pagination-bar form{border-left:0;padding-left:0}.pages{width:100%;margin-left:0}.detail-modal{width:96vw}.detail-top{padding:20px 45px 16px 18px;align-items:flex-start}.detail-top img{width:52px;height:52px}.detail-top h2{font-size:18px}.detail-body{padding:18px}.detail-stats{grid-template-columns:1fr}.detail-foot{flex-wrap:wrap}.detail-foot>button:first-child{width:100%;margin:0;text-align:left}.target-link{align-items:flex-start;flex-wrap:wrap}.footer-links{grid-template-columns:1fr}.admin-nav{grid-template-columns:1fr}.admin-grid{display:block}.admin-card{margin-bottom:16px;padding:18px}.form-row{grid-template-columns:1fr}.admin-dashboard,.quick-grid{grid-template-columns:1fr}.list-item{align-items:flex-start}.list-actions{flex-direction:column}.category-parent-card{align-items:flex-start;flex-wrap:wrap}}

/* ==============================================================
   KHO PHAN MEM V4 - WOOD BROWN + ORANGE THEME / SEO DETAIL / ADS
   ============================================================== */
:root{--primary:#8A451F;--secondary:#4A2B1C;--accent:#F28C28;--cream:#FFF4E8;--wood:#8A451F;--wood-dark:#4A2B1C;--wood-soft:#B96A32;--orange:#F28C28;--orange-dark:#D96F0B;--sand:#F7E4CF;--line:#E3D2C1;--text:#2E211A;--muted:#7A675C;--soft:#FFF9F3;--blue:#9C4D1D;--shadow:0 2px 9px rgba(74,43,28,.10)}
body{background:#F8F4EF;color:var(--text)}
.topbar{background:linear-gradient(100deg,var(--secondary),var(--primary) 55%,#A65522);border-bottom-color:rgba(52,29,16,.45)}
.brand-icon{background:rgba(255,153,58,.12);border-color:rgba(255,221,187,.35)}
.brand-copy small{color:#FFE0C0}.version-badge{background:#5D2F18;color:#FFD4A5;border:1px solid rgba(255,174,92,.28)}
.global-search{background:linear-gradient(90deg,#FFD7A8,#FFB45F);color:#6A3A1E;box-shadow:inset 0 0 0 1px rgba(111,55,20,.12)}
.global-search input,.global-search input::placeholder{color:#6A3A1E}.top-user{background:#5B301D;color:#FFD9B2}.top-btn.share{background:#C96822}.top-btn.admin{background:#E07A21}.logout-btn{background:#8B2635!important}
.sidebar{background:linear-gradient(180deg,var(--secondary),#3B2116)}
.side-main.active{background:linear-gradient(90deg,#B75E24,#D97721);border-color:#F4A75A}.side-main em,.side-parent em,.side-children em{background:#351C12;border-color:#8E4A24}.side-label{color:#FFB86D}.side-label a{border-color:#A65B2B;background:#56301E}.side-group{border-color:#744025}.side-parent{background:#5B321F}.side-children{border-left-color:#C97337}.side-children a{color:#F7DFCC}.side-children a:hover,.side-children a.active{background:#6D3A20}.sidebar-admin-box{border-color:#825030;background:#4C291C}.sidebar-admin-box small{color:#FFB972}.sidebar-admin-box span{color:#E8B894}.sidebar-admin-box a{background:#D87325;border-color:#F0964E}
.hero-card{background:linear-gradient(115deg,#fff 58%,var(--cream));border-color:#DFCAB6}.hero-icon{background:linear-gradient(145deg,var(--primary),var(--accent));box-shadow:0 5px 16px rgba(138,69,31,.2)}.hero-title h1 small{color:#8A451F;border-color:#F0A35B;background:#FFF7EE}.type-filters a.active,.pages a.active{background:var(--primary);border-color:var(--primary)}
.software-card{border-color:#DECBB9;box-shadow:0 2px 8px rgba(74,43,28,.045);transition:transform .16s ease,box-shadow .16s ease,border-color .16s}.software-card:hover{transform:translateY(-2px);box-shadow:0 9px 24px rgba(74,43,28,.11);border-color:#C99367}.card-head-link{text-decoration:none;color:inherit}.card-title h2{margin:3px 0 6px;font-size:16px;line-height:1.25;color:#2D1E16}.card-title p::first-letter{color:var(--accent)}.featured-badge{background:#FFF4DF;border-color:#F3A330;color:#B75D11}.card-actions{background:#FFFCF8;border-top-color:#EADBCB}.detail-btn{border-color:#E1CDBA;background:#FFF9F3;color:#A94C16}.visit-btn,.visit-big{background:linear-gradient(90deg,#C66321,#E5822B);border-color:#D87227}.download-btn,.download-big{background:#7F4A2C;border-color:#7F4A2C}.pagination-bar{border-color:#DECBB9}
.site-footer{background:linear-gradient(120deg,#3C2116,#5A301C 60%,#713919);color:#FFF5EC}.site-footer h4{color:#FFAE5B}.site-footer p{color:#E0BFA6}.site-footer small{color:#D6A987}.footer-admin-btn{background:#C76524;border-color:#E18745}.footer-bottom{color:#DAB292}.footer-bottom b{color:#FFC27F}
.admin-brand{background:linear-gradient(145deg,#342018,#5B321F)}.admin-brand small{color:#FF9E42}.admin-nav a.active{background:linear-gradient(90deg,var(--primary),#B85E24)}.admin-nav a.active em{background:#6B351A}.form-control:focus{border-color:#E0914C;box-shadow:0 0 0 3px #FFF0E0}.btn-primary{background:#9A4D21}.btn-green{background:linear-gradient(90deg,var(--primary),#B85E24)}.category-parent-card{border-color:#9D603D;background:linear-gradient(90deg,#4D2A1A,#69361E)}.category-parent-card small{color:#E7BA98}.category-children{border-left-color:#D88A4D}.dashboard-welcome{background:linear-gradient(110deg,#fff,#FFF1E2)}.login-page{background:linear-gradient(135deg,#F8F1EA,#FFE4C8)}

/* AdSense zones */
.ad-zone{width:100%;margin:14px auto;padding:8px;min-height:10px;text-align:center;overflow:hidden;background:transparent}.ad-zone ins{max-width:100%}.ad-label{display:block;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#9D8B7E;margin-bottom:5px}.sidebar .ad-zone{margin:8px 0;padding:5px}.sidebar .ad-label{color:#D8B79F}.grid-ad-span{grid-column:1/-1}.grid-ad-span:empty{display:none}.ad-list-icon{width:42px;height:42px;border-radius:10px;background:#FFF0DF;border:1px solid #F1BE8B;color:#A55220;font-weight:900;display:flex;align-items:center;justify-content:center}.code-area{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.55}.seo-example{display:flex;gap:8px;flex-wrap:wrap;background:#FFF8F0;border:1px dashed #E5B98E;padding:12px;border-radius:12px}.seo-example b{width:100%}.seo-example code,.admin-notice code,.side-info-box code{background:#F3E6DA;padding:5px 7px;border-radius:6px;color:#75401F}.category-type-box{display:grid;grid-template-columns:1fr 1fr;gap:10px;background:#FFF6ED;border:1px solid #EDC39B;padding:12px;border-radius:12px}.category-type-box label{margin:0!important}.admin-list-head{display:flex;align-items:end;justify-content:space-between;gap:15px}.admin-list-head form{width:min(280px,100%)}

/* SEO-friendly software detail page */
.standalone{max-width:1050px;margin:40px auto;padding:0 22px}.detail-page-wrap{max-width:1340px;margin:0 auto;padding:24px 28px 42px}.breadcrumbs{display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:#836C5F;font-size:12px;margin:2px 0 18px}.breadcrumbs a{text-decoration:none;color:#A1511D}.detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px}.software-detail-card{background:#fff;border:1px solid #DECBB9;border-radius:18px;overflow:hidden;box-shadow:0 7px 25px rgba(74,43,28,.07)}.software-detail-head{display:grid;grid-template-columns:90px 1fr;gap:20px;padding:28px}.software-detail-head>img{width:90px;height:90px;object-fit:contain;padding:12px;border:1px solid #E3D2C1;border-radius:16px;background:#FFF9F3}.title-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.software-detail-title h1{font-size:29px;margin:0;color:#2D1C13}.software-detail-title>p{font-size:15px;color:#705E53;line-height:1.65;margin:10px 0}.detail-meta{display:flex;gap:15px;flex-wrap:wrap;color:#806B5E;font-size:12px}.detail-meta a{color:#A55220;text-decoration:none;font-weight:750}.detail-stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#E7D6C6;border-top:1px solid #E7D6C6;border-bottom:1px solid #E7D6C6}.detail-stat-strip>div{background:#FFF9F3;padding:16px 18px;display:grid;grid-template-columns:26px 1fr;align-items:center}.detail-stat-strip span{grid-row:1/3;font-size:20px;color:#E07B26}.detail-stat-strip small{color:#9A8779}.detail-stat-strip b{font-size:13px}.detail-section{padding:25px 28px;border-bottom:1px solid #EEE2D7}.detail-section h2{font-size:18px;margin:0 0 14px}.rich-text{line-height:1.85;color:#59483D;font-size:15px}.detail-info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.detail-info-grid>div{border:1px solid #E7D8C9;border-radius:12px;background:#FFFBF7;padding:13px}.detail-info-grid small{display:block;color:#9A8679;margin-bottom:5px}.detail-cta-row{padding:22px 28px;display:flex;gap:10px;flex-wrap:wrap}.detail-rightbar{display:flex;flex-direction:column;gap:14px}.side-info-box{background:#fff;border:1px solid #DECBB9;border-radius:15px;padding:18px;box-shadow:0 3px 12px rgba(74,43,28,.05)}.side-info-box h3{margin:0 0 10px}.side-info-box code{display:block;overflow:auto}.side-info-box p{color:#7A675C;font-size:12px;line-height:1.6}.related-section{margin-top:26px}.related-section h2{font-size:20px}.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.related-card{display:grid;grid-template-columns:54px 1fr;gap:12px;text-decoration:none;background:#fff;border:1px solid #DECBB9;border-radius:14px;padding:14px}.related-card img{width:54px;height:54px;object-fit:contain;padding:7px;border:1px solid #E6D7C8;border-radius:10px}.related-card b{display:block;margin-bottom:5px}.related-card small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#7A675C;line-height:1.45}

@media(max-width:1050px){.detail-layout{grid-template-columns:1fr}.detail-rightbar{display:grid;grid-template-columns:1fr 1fr}.related-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.software-detail-head{grid-template-columns:65px 1fr;padding:20px}.software-detail-head>img{width:65px;height:65px;padding:8px}.software-detail-title h1{font-size:22px}.detail-stat-strip{grid-template-columns:1fr 1fr}.detail-info-grid{grid-template-columns:1fr}.detail-page-wrap{padding:16px 12px 30px}.detail-rightbar{grid-template-columns:1fr}.related-grid{grid-template-columns:1fr}.category-type-box{grid-template-columns:1fr}.admin-list-head{align-items:stretch;flex-direction:column}.admin-list-head form{width:100%}}
.modal-seo-link{padding:0 22px 18px;background:#fbfcfe;text-align:right}.modal-seo-link a{color:#9A4D21;font-weight:800;text-decoration:none;font-size:12px}
.detail-category{color:#A55220}.target-link{background:#FFF5EA;border-color:#EBC59E;color:#8A451F}.target-link a{color:#A6531E}.quick-grid{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.quick-grid{grid-template-columns:repeat(2,1fr)}}

/* ==============================================================
   V5 - TRAFFIC ANALYTICS ADMIN
   ============================================================== */
.admin-dashboard{grid-template-columns:repeat(4,minmax(0,1fr))}.stat-card span{display:block;margin-top:6px;color:#8A7568;font-size:11px;line-height:1.45}.traffic-title{align-items:center}.traffic-period-form{display:grid;grid-template-columns:150px 165px 90px;gap:8px;align-items:center}.traffic-period-form .btn-primary{width:auto;height:42px;padding:0 16px}.traffic-range-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;background:#FFF9F3;border:1px solid #E2CFBD;border-radius:14px;padding:11px 14px;margin-bottom:16px}.traffic-range-nav a{text-decoration:none;color:#A0521E;font-weight:750}.traffic-range-nav a:last-child{text-align:right}.traffic-range-nav strong{text-align:center;color:#4C2B1B}.traffic-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:16px}.traffic-kpi{background:#fff;border:1px solid #DECBB9;border-radius:14px;padding:16px;min-width:0;box-shadow:0 2px 7px rgba(74,43,28,.04)}.traffic-kpi span{display:block;color:#7C695C;font-size:11px;font-weight:750}.traffic-kpi b{display:block;color:#3B2418;font-size:23px;line-height:1.15;margin:7px 0 5px;word-break:break-word}.traffic-kpi small{display:block;color:#9A8779;font-size:10px;line-height:1.4}.traffic-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.traffic-section-head h2{margin:0}.traffic-section-head p{margin:5px 0 0;font-size:11px}.traffic-chart-card{margin-bottom:16px}.traffic-chart{height:260px;display:flex;align-items:stretch;gap:5px;border-left:1px solid #E8D8C9;border-bottom:1px solid #E8D8C9;padding:12px 8px 0 10px;background:linear-gradient(to top,rgba(242,140,40,.035),transparent)}.traffic-bar-item{flex:1;min-width:4px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px}.traffic-bars{width:100%;height:210px;display:flex;align-items:flex-end;justify-content:center;gap:2px}.traffic-bars i,.traffic-bars b{display:block;width:min(12px,42%);min-height:2px;border-radius:5px 5px 0 0}.traffic-bars i{background:linear-gradient(180deg,#F59A3A,#E4761A)}.traffic-bars b{background:linear-gradient(180deg,#8A451F,#532A18)}.traffic-bar-item small{height:24px;color:#927B6C;font-size:8px;white-space:nowrap}.traffic-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}.traffic-grid-tables{align-items:start}.traffic-source-list{display:flex;flex-direction:column;gap:8px}.traffic-source-list>div{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid #EEE0D2;background:#FFFBF7;border-radius:10px;padding:10px 12px}.traffic-source-list span{min-width:0}.traffic-source-list span b{display:block;color:#493024;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.traffic-source-list span small{display:block;color:#9A8779;margin-top:3px;font-size:10px}.traffic-source-list em{font-style:normal;color:#8A451F;font-weight:750;font-size:11px;white-space:nowrap}.empty-mini{padding:20px!important;justify-content:center!important;color:#9A8779}.traffic-table-wrap{overflow:auto}.traffic-table{width:100%;border-collapse:collapse;min-width:620px}.traffic-table th{text-align:left;color:#77665A;background:#FFF7EF;border-bottom:1px solid #E8D5C4;padding:10px;font-size:10px;white-space:nowrap}.traffic-table td{border-bottom:1px solid #F0E4D8;padding:11px 10px;vertical-align:top;color:#4F3B30;font-size:11px}.traffic-table td strong{display:block;max-width:520px}.traffic-table td a{display:block;color:#A45724;text-decoration:none;margin-top:4px;max-width:560px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.traffic-table td small{display:block;color:#99877B;margin-top:5px;line-height:1.4}.traffic-note{margin-top:16px;line-height:1.7}.traffic-note h2{margin-bottom:8px}.traffic-note p{color:#5C4A3F}.btn-secondary{display:inline-flex;border:1px solid #D7C4B3;background:#FFF9F3;color:#7D4320;border-radius:10px;padding:10px 13px;text-decoration:none;font-weight:750;font-size:11px;cursor:pointer}
@media(max-width:1350px){.traffic-kpis{grid-template-columns:repeat(3,1fr)}.admin-dashboard{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1050px){.traffic-grid-2{grid-template-columns:1fr}.traffic-title{align-items:stretch;flex-direction:column}.traffic-period-form{grid-template-columns:1fr 1fr auto}.traffic-chart{overflow-x:auto}.traffic-bar-item{min-width:18px}}
@media(max-width:650px){.traffic-kpis{grid-template-columns:1fr 1fr}.traffic-period-form{grid-template-columns:1fr}.traffic-range-nav{grid-template-columns:1fr auto 1fr;font-size:11px}.traffic-kpi b{font-size:19px}.traffic-chart{height:230px;padding-left:5px}.traffic-bars{height:180px}.admin-dashboard{grid-template-columns:1fr}.traffic-table{min-width:560px}}


/* =========================================================
   HEADER + MENU WEBSITE V5.2
   KHỚP VỚI HEADER.PHP MỚI
   ========================================================= */

.site-header{
    position:sticky;
    top:0;
    z-index:9999;
    width:100%;
    background:linear-gradient(100deg,var(--secondary),var(--primary) 55%,#A65522);
    border-bottom:1px solid rgba(52,29,16,.35);
    box-shadow:0 8px 28px rgba(74,43,28,.16);
}

.site-header-inner{
    width:min(1600px,100%);
    min-height:74px;
    margin:0 auto;
    padding:10px 24px;
    display:flex;
    align-items:center;
    gap:22px;
}

.header-brand{
    flex:0 0 auto;
    min-width:245px;
    display:flex;
    align-items:center;
    gap:10px;
    color:#fff;
    text-decoration:none;
}

.header-logo{
    width:46px;
    height:46px;
    flex:0 0 46px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:12px;
    background:rgba(255,255,255,.13);
    border:1px solid rgba(255,255,255,.22);
}

.header-logo img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:5px;
}

.default-logo{
    font-size:23px;
    color:#fff;
}

.header-brand-text{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
}

.header-brand-text strong{
    color:#fff;
    font-size:17px;
    font-weight:900;
    line-height:1.15;
    white-space:nowrap;
}

.header-brand-text small{
    max-width:190px;
    overflow:hidden;
    color:#FFE0C0;
    font-size:10px;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.header-version{
    padding:4px 7px;
    border-radius:7px;
    background:#5D2F18;
    color:#FFD4A5;
    border:1px solid rgba(255,174,92,.28);
    font-size:9px;
    font-weight:850;
}

/* MENU CHÍNH */

.main-navigation{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
}

.nav-item{
    position:relative;
    flex:0 0 auto;
}

.nav-main-row{
    display:flex;
    align-items:center;
}

.nav-link{
    min-height:43px;
    padding:0 13px;
    display:flex;
    align-items:center;
    gap:7px;
    border-radius:11px;
    color:rgba(255,255,255,.93);
    text-decoration:none;
    font-size:12.5px;
    font-weight:800;
    white-space:nowrap;
    transition:.18s ease;
}

.nav-link:hover{
    color:#fff;
    background:rgba(255,255,255,.13);
    transform:translateY(-1px);
}

.nav-icon{
    font-size:15px;
}

.submenu-toggle{
    width:25px;
    height:34px;
    margin-left:-8px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:8px;
    background:transparent;
    color:rgba(255,255,255,.78);
}

.submenu-toggle span{
    transition:transform .18s ease;
}

.nav-item:hover .submenu-toggle span{
    transform:rotate(180deg);
}

/* DROPDOWN CẤP 2 */

.submenu{
    position:absolute;
    top:calc(100% + 9px);
    left:0;
    width:255px;
    padding:8px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(8px);
    background:#fff;
    border:1px solid #ead8c7;
    border-radius:15px;
    box-shadow:0 20px 50px rgba(54,28,13,.20);
    transition:.18s ease;
}

.nav-item:hover .submenu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
}

.submenu::before{
    content:"";
    position:absolute;
    top:-6px;
    left:28px;
    width:12px;
    height:12px;
    background:#fff;
    border-left:1px solid #ead8c7;
    border-top:1px solid #ead8c7;
    transform:rotate(45deg);
}

.submenu-link{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 11px;
    border-radius:10px;
    color:#3d291f;
    text-decoration:none;
    transition:.18s ease;
}

.submenu-link:hover{
    color:var(--primary);
    background:var(--cream);
    transform:translateX(3px);
}

.submenu-icon{
    width:33px;
    height:33px;
    flex:0 0 33px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:#FFF0DF;
    color:var(--primary);
    font-size:14px;
}

.submenu-title{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.submenu-title strong{
    font-size:12.5px;
    font-weight:850;
}

.submenu-title small{
    color:#9a8276;
    font-size:9px;
}

/* NÚT PHẢI */

.header-actions{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:7px;
}

.header-user{
    max-width:145px;
    display:flex;
    align-items:center;
    gap:5px;
    color:#FFD9B2;
    font-size:10px;
    white-space:nowrap;
}

.header-user span:last-child{
    overflow:hidden;
    text-overflow:ellipsis;
}

.header-action-btn{
    min-height:39px;
    padding:0 12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:10px;
    color:#fff !important;
    text-decoration:none;
    font-size:11px;
    font-weight:800;
    transition:.18s ease;
}

button.header-action-btn{
    font:inherit;
}

.share-btn{
    background:#C96822;
}

.admin-btn{
    background:#E07A21;
}

.header-action-btn:hover{
    transform:translateY(-1px);
    filter:brightness(1.06);
    box-shadow:0 7px 18px rgba(42,21,10,.16);
}

/* MOBILE BUTTON */

.mobile-menu-button{
    display:none;
    width:41px;
    height:41px;
    flex:0 0 41px;
    padding:0;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    border:1px solid rgba(255,255,255,.17);
    border-radius:10px;
    background:rgba(255,255,255,.10);
}

.mobile-menu-button span{
    width:19px;
    height:2px;
    display:block;
    border-radius:999px;
    background:#fff;
    transition:.18s ease;
}

.mobile-menu-button.is-open span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
}

.mobile-menu-button.is-open span:nth-child(2){
    opacity:0;
}

.mobile-menu-button.is-open span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
}


/* TABLET + MOBILE */

@media(max-width:1100px){

    .site-header-inner{
        position:relative;
        min-height:66px;
        padding:8px 14px;
        gap:9px;
    }

    .header-brand{
        min-width:0;
        margin-right:auto;
    }

    .header-logo{
        width:42px;
        height:42px;
        flex-basis:42px;
    }

    .header-brand-text strong{
        font-size:14px;
    }

    .header-brand-text small{
        max-width:145px;
    }

    .header-version{
        display:none;
    }

    .mobile-menu-button{
        display:flex;
    }

    .main-navigation{
        position:absolute;
        top:calc(100% + 1px);
        left:10px;
        right:10px;
        display:none;
        max-height:calc(100vh - 80px);
        overflow-y:auto;
        padding:10px;
        align-items:stretch;
        justify-content:flex-start;
        flex-direction:column;
        gap:3px;
        background:#fff;
        border:1px solid #ead8c7;
        border-radius:0 0 15px 15px;
        box-shadow:0 20px 45px rgba(54,28,13,.18);
    }

    .main-navigation.mobile-open{
        display:flex;
    }

    .nav-item,
    .nav-main-row{
        width:100%;
    }

    .nav-link{
        flex:1;
        min-height:44px;
        color:#3d291f;
        font-size:13px;
    }

    .nav-link:hover{
        color:var(--primary);
        background:var(--cream);
        transform:none;
    }

    .submenu-toggle{
        width:43px;
        height:43px;
        margin-left:0;
        background:#FFF1E4;
        color:var(--primary);
    }

    .nav-item:hover .submenu-toggle span{
        transform:none;
    }

    .nav-item.submenu-open .submenu-toggle span{
        transform:rotate(180deg);
    }

    .submenu{
        position:static;
        width:auto;
        margin:3px 0 5px 17px;
        padding:5px;
        display:none;
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:none;
        background:#FFF9F3;
        border:1px solid #efdfd0;
        border-radius:11px;
        box-shadow:none;
    }

    .submenu::before{
        display:none;
    }

    .nav-item:hover .submenu{
        display:none;
    }

    .nav-item.submenu-open .submenu{
        display:block;
    }

    .header-user{
        display:none;
    }
}

@media(max-width:650px){

    .site-header-inner{
        padding:8px 10px;
    }

    .header-brand-text small{
        display:none;
    }

    .header-brand-text strong{
        max-width:135px;
        overflow:hidden;
        font-size:12.5px;
        text-overflow:ellipsis;
    }

    .header-actions{
        gap:4px;
    }

    .header-action-btn{
        width:39px;
        min-height:39px;
        padding:0;
        font-size:15px;
    }

    .header-action-btn .action-label{
        display:none;
    }

    .mobile-menu-button{
        width:39px;
        height:39px;
        flex-basis:39px;
    }
}

@media(max-width:430px){

    .header-logo{
        width:37px;
        height:37px;
        flex-basis:37px;
    }

    .header-brand-text strong{
        max-width:100px;
        font-size:11.5px;
    }
}


/* =========================================================
   HEADER + DROPDOWN MENU V5.3
   GHI ĐÈ PHẦN HEADER CŨ
   ========================================================= */

.site-header{
    position:sticky;
    top:0;
    z-index:9999;
    width:100%;
    background:linear-gradient(100deg,var(--secondary),var(--primary) 55%,#A65522);
    border-bottom:1px solid rgba(52,29,16,.35);
    box-shadow:0 8px 28px rgba(74,43,28,.16);
}

.site-header-inner{
    width:min(1600px,100%);
    min-height:74px;
    margin:0 auto;
    padding:10px 24px;
    display:flex;
    align-items:center;
    gap:22px;
}

.header-brand{
    flex:0 0 auto;
    min-width:245px;
    display:flex;
    align-items:center;
    gap:10px;
    color:#fff;
    text-decoration:none;
}

.header-logo{
    width:46px;
    height:46px;
    flex:0 0 46px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:12px;
    background:rgba(255,255,255,.13);
    border:1px solid rgba(255,255,255,.22);
}

.header-logo img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:5px;
}

.default-logo{
    font-size:23px;
    color:#fff;
}

.header-brand-text{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
}

.header-brand-text strong{
    color:#fff;
    font-size:17px;
    font-weight:900;
    line-height:1.15;
    white-space:nowrap;
}

.header-brand-text small{
    max-width:190px;
    overflow:hidden;
    color:#FFE0C0;
    font-size:10px;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.header-version{
    padding:4px 7px;
    border-radius:7px;
    background:#5D2F18;
    color:#FFD4A5;
    border:1px solid rgba(255,174,92,.28);
    font-size:9px;
    font-weight:850;
}

/* MENU CHÍNH */
.main-navigation{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
}

.nav-item{
    position:relative;
    flex:0 0 auto;
}

.nav-main-row{
    display:flex;
    align-items:center;
}

.nav-link{
    min-height:43px;
    padding:0 13px;
    display:flex;
    align-items:center;
    gap:7px;
    border-radius:11px;
    color:rgba(255,255,255,.93);
    text-decoration:none;
    font-size:12.5px;
    font-weight:800;
    white-space:nowrap;
    transition:.18s ease;
}

.nav-link:hover{
    color:#fff;
    background:rgba(255,255,255,.13);
    transform:translateY(-1px);
}

.nav-icon{
    font-size:15px;
}

.submenu-toggle{
    width:27px;
    height:36px;
    margin-left:-8px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:8px;
    background:transparent;
    color:rgba(255,255,255,.84);
    cursor:pointer;
}

.submenu-toggle:hover{
    background:rgba(255,255,255,.10);
}

.submenu-toggle span{
    display:block;
    font-size:17px;
    transition:transform .18s ease;
}

/*
 * QUAN TRỌNG:
 * top:100% => không còn khe hở làm mất hover.
 */
.submenu{
    position:absolute;
    top:100%;
    left:0;
    z-index:10020;
    width:270px;
    padding:8px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(5px);
    background:#fff;
    border:1px solid #ead8c7;
    border-radius:14px;
    box-shadow:0 18px 45px rgba(54,28,13,.20);
    transition:
        opacity .16s ease,
        transform .16s ease,
        visibility .16s ease;
}

/* Hover desktop */
@media(min-width:1101px){
    .nav-item.has-submenu:hover > .submenu{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:translateY(0);
    }

    .nav-item.has-submenu:hover .submenu-toggle span{
        transform:rotate(180deg);
    }
}

/* Click desktop/mobile */
.nav-item.submenu-open > .submenu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
}

.nav-item.submenu-open .submenu-toggle span{
    transform:rotate(180deg);
}

.submenu-link{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 11px;
    border-radius:10px;
    color:#3d291f;
    text-decoration:none;
    transition:.16s ease;
}

.submenu-link:hover{
    color:var(--primary);
    background:var(--cream);
    transform:translateX(3px);
}

.submenu-icon{
    width:35px;
    height:35px;
    flex:0 0 35px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:#FFF0DF;
    color:var(--primary);
    font-size:17px;
}

.submenu-title{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.submenu-title strong{
    color:inherit;
    font-size:12.5px;
    font-weight:850;
}

.submenu-title small{
    color:#9a8276;
    font-size:9px;
}

/* ACTIONS */
.header-actions{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:7px;
}

.header-user{
    max-width:145px;
    display:flex;
    align-items:center;
    gap:5px;
    color:#FFD9B2;
    font-size:10px;
    white-space:nowrap;
}

.header-user span:last-child{
    overflow:hidden;
    text-overflow:ellipsis;
}

.header-action-btn{
    min-height:39px;
    padding:0 12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:10px;
    color:#fff!important;
    text-decoration:none;
    font-size:11px;
    font-weight:800;
    transition:.18s ease;
}

button.header-action-btn{
    font:inherit;
}

.share-btn{
    background:#C96822;
}

.admin-btn{
    background:#E07A21;
}

.header-action-btn:hover{
    transform:translateY(-1px);
    filter:brightness(1.06);
    box-shadow:0 7px 18px rgba(42,21,10,.16);
}

/* MOBILE BUTTON */
.mobile-menu-button{
    display:none;
    width:41px;
    height:41px;
    flex:0 0 41px;
    padding:0;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    border:1px solid rgba(255,255,255,.17);
    border-radius:10px;
    background:rgba(255,255,255,.10);
}

.mobile-menu-button span{
    width:19px;
    height:2px;
    display:block;
    border-radius:999px;
    background:#fff;
    transition:.18s ease;
}

.mobile-menu-button.is-open span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
}

.mobile-menu-button.is-open span:nth-child(2){
    opacity:0;
}

.mobile-menu-button.is-open span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
}

/* TABLET + MOBILE */
@media(max-width:1100px){
    .site-header-inner{
        position:relative;
        min-height:66px;
        padding:8px 14px;
        gap:9px;
    }

    .header-brand{
        min-width:0;
        margin-right:auto;
    }

    .header-logo{
        width:42px;
        height:42px;
        flex-basis:42px;
    }

    .header-brand-text strong{
        font-size:14px;
    }

    .header-brand-text small{
        max-width:145px;
    }

    .header-version{
        display:none;
    }

    .mobile-menu-button{
        display:flex;
    }

    .main-navigation{
        position:absolute;
        top:100%;
        left:10px;
        right:10px;
        z-index:10010;
        display:none;
        max-height:calc(100vh - 80px);
        overflow-y:auto;
        padding:10px;
        align-items:stretch;
        justify-content:flex-start;
        flex-direction:column;
        gap:3px;
        background:#fff;
        border:1px solid #ead8c7;
        border-radius:0 0 15px 15px;
        box-shadow:0 20px 45px rgba(54,28,13,.18);
    }

    .main-navigation.mobile-open{
        display:flex;
    }

    .nav-item,
    .nav-main-row{
        width:100%;
    }

    .nav-link{
        flex:1;
        min-height:46px;
        color:#3d291f;
        font-size:13px;
    }

    .nav-link:hover{
        color:var(--primary);
        background:var(--cream);
        transform:none;
    }

    .submenu-toggle{
        width:45px;
        height:45px;
        margin-left:0;
        background:#FFF1E4;
        color:var(--primary);
    }

    .submenu{
        position:static;
        width:auto;
        margin:3px 0 5px 17px;
        padding:5px;
        display:none;
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:none;
        background:#FFF9F3;
        border:1px solid #efdfd0;
        border-radius:11px;
        box-shadow:none;
    }

    .nav-item.submenu-open > .submenu{
        display:block;
    }

    .header-user{
        display:none;
    }
}

@media(max-width:650px){
    .site-header-inner{
        padding:8px 10px;
    }

    .header-brand-text small{
        display:none;
    }

    .header-brand-text strong{
        max-width:135px;
        overflow:hidden;
        font-size:12.5px;
        text-overflow:ellipsis;
    }

    .header-actions{
        gap:4px;
    }

    .header-action-btn{
        width:39px;
        min-height:39px;
        padding:0;
        font-size:15px;
    }

    .header-action-btn .action-label{
        display:none;
    }

    .mobile-menu-button{
        width:39px;
        height:39px;
        flex-basis:39px;
    }
}

@media(max-width:430px){
    .header-logo{
        width:37px;
        height:37px;
        flex-basis:37px;
    }

    .header-brand-text strong{
        max-width:100px;
        font-size:11.5px;
    }
}