@import url("../fonts/fonts.css");
:root{--blue:#0751a7;--blue2:#0a65c7;--ink:#123f80;--sky:#eaf8ff;--line:#d5eafa;--pink:#ed2861;--shadow:0 2px 7px rgba(23,89,150,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scrollbar-gutter:stable}body{margin:0;background:#f4fbff;color:#153f7c;font-family:"Be Vietnam Pro",Arial,sans-serif;font-size:15px}button,input{font:inherit}.site-header{height:142px;position:relative;overflow:hidden;background:linear-gradient(180deg,#dff6ff,#f4fcff 76%,#e2f6ff)}.header-inner{height:100%;max-width:1500px;margin:auto;display:flex;align-items:flex-start;gap:24px;padding:15px 28px;position:relative;z-index:2}.brand{display:flex;align-items:center;gap:18px;text-decoration:none;flex:0 0 320px;color:var(--blue)}.brand img{width:94px;height:94px}.school-name{display:flex;flex-direction:column;line-height:1}.school-name small{font-size:16px;font-weight:800}.school-name strong{font-size:39px;color:#ed285e;font-weight:900;letter-spacing:1px;margin-top:8px}.desktop-title{flex:1;text-align:center;padding-top:4px;min-width:240px}.title-line{display:flex;justify-content:center;align-items:center;gap:14px}.title-line h1{font-size:40px;line-height:1;margin:4px 0 5px;font-weight:900;letter-spacing:2px;color:#064eaa}.note{font-size:40px;line-height:1}.note.yellow{color:#ffb500}.note.purple{color:#b24ce2}.desktop-title p{margin:4px 0;font-size:17px;color:#174c91}.desktop-actions{display:flex;align-items:center;gap:12px;flex:none}.searchbox{height:42px;width:305px;border:1px solid #0d62bd;border-radius:24px;background:#fff;display:flex;align-items:center;padding:0 10px 0 17px}.searchbox input{border:0;outline:0;min-width:0;flex:1;color:#1b4b88;font-size:13px;background:transparent}.searchbox button{border:0;background:transparent;color:#064eaa;font-size:28px;line-height:1;cursor:pointer}.btn{height:41px;border:0;border-radius:24px;padding:0 17px;color:white;font-weight:700;white-space:nowrap;cursor:pointer}.btn-blue{background:#0756b4}.btn-pink{background:#e92861}.school-illustration{position:absolute;right:7%;bottom:-2px;font-size:66px;opacity:.95}.mobile-search,.mobile-menu{display:none}.main-nav{height:58px;background:#f5fbff;border-bottom:1px solid #d8ecfa;box-shadow:0 2px 5px #c9e4f455;position:relative;z-index:3}.nav-inner{max-width:1500px;height:100%;margin:auto;padding:0 28px;display:flex;align-items:stretch;justify-content:space-between;gap:4px}.nav-item{border:0;background:transparent;color:#123e7e;font-weight:700;padding:0 20px;display:flex;align-items:center;gap:11px;white-space:nowrap;cursor:pointer;border-radius:10px 10px 0 0}.nav-item span{font-size:27px;color:#0761c2}.nav-item.active{background:#0758b8;color:#fff;border-radius:10px}.nav-item.active span{color:#fff}.page{max-width:1500px;margin:10px auto 0;padding:0 28px}.breadcrumb{display:none}.hero{height:300px;border-radius:17px;overflow:hidden;position:relative;box-shadow:var(--shadow);background:#bceaff}.hero-art{height:100%;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 95%,#fff9a7 0 12%,transparent 32%),linear-gradient(180deg,#b9eaff 0%,#dff7ff 58%,#a5e38c 59%,#72c65b 100%)}.hero-art:before{content:"";position:absolute;inset:60% 0 0;background:repeating-linear-gradient(170deg,transparent 0 28px,#6fbf54 29px 32px),linear-gradient(0deg,#4caf50,#9bd96b)}.tree{position:absolute;font-size:116px;top:-15px;filter:drop-shadow(2px 3px 0 #559e47)}.tree-left{left:-22px}.tree-right{right:-12px}.floating-note{position:absolute;font-size:42px;color:#0874d6;text-shadow:2px 2px #fff}.n1{left:28%;top:12%;color:#ffb000}.n2{right:24%;top:9%;color:#ed2861}.n3{left:10%;top:35%;color:#ed2861}.hero-copy{position:absolute;left:31%;right:31%;top:25px;text-align:center;z-index:2}
.hero{touch-action:pan-y}.hero-copy{will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}.hero-wordmark{font-size:59px;font-weight:1000;line-height:1.08;letter-spacing:2px;text-shadow:2px 3px 0 #fff}.hero-wordmark span{color:#f12c68}.hero-wordmark b{color:#0b58ba}.hero-copy h2{margin:8px 0 0;font-size:25px;color:#0754b2;font-weight:900;white-space:nowrap;transform:rotate(-2deg)}.hero-copy h2 em{font-style:normal;color:#ef2b65}.ribbon{display:inline-block;margin-top:8px;padding:12px 25px;background:#ffdf36;border-radius:45% 55% 42% 58% / 32% 38% 62% 68%;font-size:21px;line-height:1.25;color:#0753a8;font-weight:600;transform:rotate(-1deg);box-shadow:0 3px 0 #f8c72b}.kid{position:absolute;bottom:-15px;width:155px;height:205px;z-index:3}.kid-boy{left:12%}.kid-girl{right:14%;transform:scale(.9)}.kid .face{position:absolute;left:25px;top:14px;width:104px;height:105px;background:#ffd6b2;border:3px solid #583b31;border-radius:48% 48% 45% 45%;z-index:2}.kid .hair{position:absolute;left:19px;top:0;width:116px;height:64px;background:#28232a;border-radius:55% 48% 25% 22%;z-index:3;transform:rotate(-4deg)}.kid .face:before,.kid .face:after{content:"";position:absolute;top:30px;width:22px;height:31px;background:#ffd6b2;border-radius:50%}.kid .face:before{left:-5px}.kid .face:after{right:-5px}.eye{position:absolute;top:44px;width:13px;height:18px;background:#29252b;border-radius:50%;z-index:3}.eye:after{content:"";position:absolute;width:4px;height:5px;background:white;border-radius:50%;top:3px;left:3px}.e1{left:26px}.e2{right:24px}.smile{position:absolute;left:42px;top:70px;width:24px;height:13px;border-bottom:4px solid #9d3836;border-radius:0 0 50% 50%;z-index:3}.kid .body{position:absolute;bottom:0;left:8px;width:140px;height:103px;background:#fff;border:3px solid #c2d7e7;border-radius:35px 35px 0 0;z-index:1}.kid .body:before{content:"";position:absolute;left:0;top:0;width:100%;height:24px;background:#0758b5;border-radius:30px 30px 0 0}.collar{position:absolute;top:8px;left:54px;width:25px;height:20px;background:#fff;clip-path:polygon(0 0,100% 0,50% 100%)}.guitar{position:absolute;z-index:4;left:95px;bottom:26px;font-size:66px;transform:rotate(-25deg)}.kid-girl .hair{height:100px;border-radius:60% 55% 25% 25%;width:130px;left:12px}.kid-girl .bow{position:absolute;right:-3px;top:8px;z-index:5;font-size:31px}.kid-girl .body:before{background:#fff}.tie{position:absolute;top:24px;left:59px;width:18px;height:30px;background:#e52b61;clip-path:polygon(0 0,100% 0,75% 100%,50% 75%,25% 100%)}.mic{position:absolute;z-index:5;left:-13px;bottom:77px;font-size:44px;transform:rotate(-25deg)}.piano{position:absolute;right:-4px;bottom:-4px;background:#fff;border:5px solid #253e5b;border-radius:8px 8px 0 0;width:240px;height:72px;color:#142b47;font-size:18px;transform:skewY(-18deg);padding:9px 5px;box-shadow:0 -5px 0 #e5a74e}.slide-arrow{position:absolute;top:43%;width:48px;height:48px;border:0;border-radius:50%;background:#fff;color:#0758b8;font-size:36px;line-height:1;cursor:pointer;box-shadow:0 2px 6px #386a9a44}.slide-arrow.prev{left:15px}.slide-arrow.next{right:15px}.slide-dots{position:absolute;bottom:23px;left:50%;transform:translateX(-50%);display:flex;gap:11px}.dot{width:11px;height:11px;border-radius:50%;border:1px solid #0a67c7;background:#fff;padding:0;cursor:pointer}.dot.selected{background:#0a67c7;box-shadow:0 0 0 3px #ffffffa8}
.quick-links{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:10px 4px 11px}.quick-card{height:87px;background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow);display:flex;align-items:center;gap:17px;padding:12px 20px;text-decoration:none;color:var(--ink);transition:.18s}.quick-card:hover,.topic-card:hover,.song-card:hover{transform:translateY(-2px);box-shadow:0 5px 14px #1a69a522}.quick-icon{width:63px;height:63px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:33px;flex:none}.pink{background:#ed2861}.green{background:#20b51b}.violet{background:#8139df}.gold{background:#ffb400}.sky{background:#1676d2}.orange{background:#ff6b28}.quick-card strong{display:block;font-size:17px;margin-bottom:5px}.quick-card small{font-size:14px;color:#42628d}.content-layout{display:grid;grid-template-columns:minmax(0,3.1fr) minmax(280px,1fr);gap:27px}.section{margin:0 0 14px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin:7px 0 8px}.section-heading h2{font-size:24px;margin:0;font-weight:900;color:#0753ad}.heading-note{font-size:30px;margin-right:9px;color:#0870d2}.star{font-size:31px;color:#ffb500;margin-right:10px;text-shadow:1px 1px #d28c00}.view-all,.side-heading a{color:#0754ad;text-decoration:none;font-size:14px}.song-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.song-card{border:1px solid var(--line);border-radius:13px;background:white;overflow:hidden;box-shadow:var(--shadow);transition:.18s}.song-thumb{height:118px;position:relative;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;background:linear-gradient(#a9e4ff 0 58%,#8dd76d 58% 100%)}.song-thumb:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,#fff 0 7px,transparent 8px),radial-gradient(circle at 80% 13%,#fff 0 9px,transparent 10px),linear-gradient(90deg,transparent 0 10%,#56ad55 10% 13%,transparent 13% 90%,#56ad55 90% 93%,transparent 93%)}.thumb-school:after{content:"🌳";position:absolute;left:0;top:-13px;font-size:67px}.school{position:absolute;top:20px;font-size:36px}.children{position:relative;z-index:1;font-size:28px;white-space:nowrap;filter:drop-shadow(0 1px 1px #fff)}.thumb-class{background:linear-gradient(#9fe2ff 0 57%,#74c85e 57%)}.thumb-garden{background:linear-gradient(#b5eaff 0 55%,#7ecf5e 55%)}.thumb-music{background:linear-gradient(#9bdbff 0 55%,#72c95d 55%)}.thumb-homeland{background:linear-gradient(#aee6ff 0 56%,#83ce65 56%)}.thumb-schoolflag{background:linear-gradient(#9edfff 0 56%,#78ca5e 56%)}.duration{position:absolute;right:6px;bottom:5px;background:#111e;color:#fff;padding:3px 7px;border-radius:5px;font-weight:700;font-size:13px}.song-info{padding:8px 13px 10px}.song-info h3{margin:0 0 7px;font-size:15px;color:#0a4eaa}.stats{display:flex;align-items:center;gap:17px;color:#47719e;font-size:12px}.stats button{border:0;background:transparent;color:#47719e;font:inherit;padding:0;cursor:pointer}.stats button.liked{color:#e92861}.sidebar{padding-top:0}.side-panel{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:13px}.side-heading{height:39px;background:#e3f4ff;display:flex;align-items:center;justify-content:space-between;padding:0 13px}.side-heading h2{margin:0;font-size:17px;color:#0753ad}.side-heading a{font-size:12px}.notice-list{list-style:none;padding:3px 15px;margin:0}.notice-list li{display:flex;align-items:center;gap:14px;min-height:47px;border-bottom:1px solid #e8f1f8;font-size:12px;color:#214b82}.notice-list li:last-child{border-bottom:0}.notice-list time{width:42px;height:36px;border:1px solid #d6e9f8;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#0753ad;flex:none;line-height:1}.notice-list time b{font-size:16px}.notice-list time small{font-size:10px;margin-top:2px}.latest{padding-bottom:7px}.latest-list{padding:5px 13px}.latest-item{display:flex;align-items:center;gap:10px;min-height:47px;color:#173f7c}.mini-thumb{width:58px;height:36px;border-radius:5px;background:linear-gradient(#aee4ff 0 55%,#80ce64 55%);display:grid;place-items:center;font-size:19px;flex:none}.latest-title{min-width:0;flex:1;display:flex;flex-direction:column;gap:4px;font-size:12px}.latest-title b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.latest-title small{font-size:10px;color:#52749b}.latest-item time{font-size:12px;color:#315782}.latest-item button{border:0;background:transparent;color:#42648b;font-size:20px;cursor:pointer}
.songs-page{padding:18px 4px 24px}.page-title{display:flex;align-items:center;gap:15px;margin:10px 0 28px}.page-title-icon{font-size:54px;color:#0874d6;line-height:1}.page-title h1{font-size:28px;color:#084d9f;margin:0 0 3px;font-weight:900}.page-title p{font-size:19px;color:#42628d;margin:0}.filter-row{display:flex;gap:9px;overflow-x:auto;padding:0 0 18px;scrollbar-width:none}.filter-row::-webkit-scrollbar{display:none}.filter{border:1px solid #e1effa;background:#edf7ff;color:#214d85;border-radius:16px;padding:12px 17px;white-space:nowrap;cursor:pointer}.filter.active{background:#0861c9;color:white;border-color:#0861c9}.song-search{height:53px;border:1px solid #b8d7f4;border-radius:17px;background:#fff;display:flex;align-items:center;padding:0 15px 0 18px;margin-bottom:17px}.song-search input{border:0;outline:0;min-width:0;flex:1;color:#204d84;font-size:15px}.song-search button{border:0;background:transparent;color:#0756b5;font-size:29px;cursor:pointer}.song-list{display:flex;flex-direction:column;gap:12px}.song-list .song-card{display:flex;align-items:center;min-height:136px;padding:12px 14px;border-radius:17px;gap:18px}.song-list .song-thumb{width:158px;height:100px;flex:none;border-radius:9px}.song-list .song-info{padding:0;min-width:0;flex:1}.song-list .song-info h3{font-size:18px;margin:0 0 8px}.song-list .song-info .tag{display:inline-block;padding:4px 10px;border-radius:7px;background:#fce4ee;color:#e12660;font-size:12px;margin-bottom:10px}.song-list .song-info .tag.blue{background:#e2f3ff;color:#0872c9}.song-list .song-info .tag.green{background:#e1f7e4;color:#247e37}.song-list .stats{gap:23px;font-size:13px}.song-list .more{border:0;background:transparent;color:#4c709b;font-size:24px;cursor:pointer;align-self:flex-start}.pagination{display:flex;justify-content:center;align-items:center;gap:8px;padding:20px 0 0;max-width:100%;box-sizing:border-box;flex-wrap:wrap;overflow:visible}.pagination button{min-width:40px;height:42px;border:0;border-radius:7px;background:#e8f4fd;color:#174a86;cursor:pointer}.pagination button.active{background:#0861c9;color:#fff}.pagination button:disabled{opacity:.35;cursor:default}.empty-state{text-align:center;padding:35px;color:#6482a3;background:#fff;border:1px solid var(--line);border-radius:14px}footer{display:flex;justify-content:space-between;color:#6d8eae;font-size:12px;padding:13px 4px 20px}.toast{position:fixed;top:20px;bottom:auto;left:50%;transform:translate(-50%,-12px);background:#123f80;color:white;padding:11px 18px;border-radius:9px;opacity:0;pointer-events:none;transition:.2s;z-index:20050;box-shadow:0 5px 20px #123f8040;max-width:min(92vw,520px);text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}

/* AUTH/NOTICE TOAST — always visible above mobile bottom nav and modals. */
@media(max-width:600px){.toast{top:max(18px,calc(env(safe-area-inset-top) + 12px));bottom:auto;z-index:20050;max-width:calc(100vw - 28px);padding:12px 16px;font-size:14px;line-height:1.35}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}






.management-page,.simple-page{padding:22px 4px 28px;min-height:55vh}.management-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.post-management-panel{max-width:850px}.post-subtabs{display:flex;gap:8px;flex-wrap:wrap;margin:-4px 0 18px;padding-bottom:14px;border-bottom:1px solid var(--line)}.post-subtab{border:1px solid #d5eafa;background:#f4faff;color:#194b85;padding:10px 15px;border-radius:10px;cursor:pointer;font-weight:700}.post-subtab.active{background:#0861c9;color:#fff;border-color:#0861c9} .all-content-filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--line)}.all-content-filters .post-subtab{font-size:14px}.post-subpanel{width:100%}.post-subtabs .admin-post-only[hidden]{display:none}.tab{border:1px solid #d5eafa;background:#edf7ff;color:#194b85;padding:11px 17px;border-radius:12px;cursor:pointer}.tab.active{background:#0861c9;color:white;border-color:#0861c9}.manage-panel{background:#fff;border:1px solid var(--line);border-radius:17px;padding:22px;box-shadow:var(--shadow);max-width:850px}.upload-form{display:flex;flex-direction:column;gap:15px}.upload-form label,.modal label{display:flex;flex-direction:column;gap:7px;color:#17477f;font-weight:700}.upload-form input,.upload-form select,.upload-form textarea,.modal input{width:100%;border:1px solid #c9dff2;border-radius:10px;padding:12px 13px;background:#fbfdff;color:#153f7c;outline-color:#0a65c7;font-weight:400}.upload-form input[type=file]{padding:9px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}.form-hint,.security-note{font-size:12px;color:#6b87a7;line-height:1.5}.submit-btn{align-self:flex-start;min-width:160px;height:45px}.management-page .page-title{margin-top:0}.user-song{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid #e5f0f8}.user-song:last-child{border-bottom:0}.user-song .mini-thumb{width:70px;height:48px}.user-song .user-song-meta{flex:1;min-width:0}.user-song strong{display:block;color:#084d9f}.user-song small{display:block;color:#6b87a7;margin-top:4px}.danger-btn,.light-btn{border:1px solid #d8e8f5;background:#f5faff;color:#194b85;border-radius:9px;padding:8px 11px;cursor:pointer}.danger-btn{border-color:#ffd1dc;background:#fff4f6;color:#c51e4f}.profile-card{display:grid;gap:12px;color:#244f81}.profile-card strong{color:#064eaa}.simple-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:13px}.simple-tile{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--shadow);min-height:110px}.simple-tile b{display:block;color:#0753ad;font-size:17px;margin-bottom:7px}.simple-tile p{margin:0;color:#5b789a;font-size:13px;line-height:1.5}.modal-backdrop{position:fixed;inset:0;background:#09274c88;display:grid;place-items:center;padding:18px;z-index:20}.modal{position:relative;background:#fff;border-radius:20px;padding:25px;width:min(100%,430px);box-shadow:0 20px 60px #052d5b55;max-height:92vh;overflow:auto}.modal-close{position:absolute;right:14px;top:10px;border:0;background:transparent;color:#41658d;font-size:29px;cursor:pointer}.modal-logo{margin:auto;width:54px;height:54px;border-radius:50%;background:#e6f5ff;color:#0861c9;display:grid;place-items:center;font-size:32px}.modal h2{text-align:center;color:#084d9f;margin:10px 0 4px;font-size:24px}.modal>p{text-align:center;color:#6a86a5;font-size:13px;margin:0 0 16px}.auth-switch{display:grid;grid-template-columns:1fr 1fr;background:#eef7ff;border-radius:11px;padding:4px;margin-bottom:17px}.auth-switch button{border:0;background:transparent;color:#315d8e;border-radius:8px;padding:10px;cursor:pointer}.auth-switch button.active{background:#fff;color:#0756b5;box-shadow:0 1px 5px #174f8020;font-weight:700}.modal form{display:flex;flex-direction:column;gap:13px}.modal .submit-btn{width:100%;align-self:stretch}.modal .security-note{text-align:center;margin:0}.hidden{display:none!important}


.manage-nav{color:#0753ad}.song-description{display:block;color:#6683a3;font-size:12px;margin-top:5px}.song-thumb img{z-index:1}.song-thumb .duration{z-index:2}

/* Responsive layout corrections */




/* Featured topics: cleaner, consistent cards */
.topics{margin-top:20px;padding:0 2px 8px}
.topics .section-heading{margin:0 0 13px}
.topics .section-heading h2{display:flex;align-items:center;gap:9px;font-size:23px;letter-spacing:-.25px}
.topics .star{display:inline-grid;place-items:center;width:36px;height:36px;margin:0;border-radius:11px;background:#fff4cc;color:#f2a900;text-shadow:none;font-size:25px}
.topic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.topic-card{position:relative;display:flex;align-items:center;gap:13px;min-width:0;min-height:88px;padding:13px 15px;border:1px solid #e0edf8;border-radius:15px;background:#fff;color:#174b88;text-decoration:none;box-shadow:0 3px 12px #174d8010;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;overflow:hidden}
.topic-card:before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 5px 5px 0;background:#d4e9fb}
.topic-card:hover{transform:translateY(-2px);border-color:#a9d4f8;box-shadow:0 7px 18px #174d8019}
.topic-icon{display:grid;place-items:center;flex:0 0 52px;width:52px;height:52px;border-radius:14px;font-size:27px;line-height:1;background:#eef7ff;box-shadow:inset 0 0 0 1px #ffffffaa}
.topic-pink .topic-icon{background:#fff0f5}
.topic-yellow .topic-icon{background:#fff6df}
.topic-purple .topic-icon{background:#f2edff}
.topic-green .topic-icon{background:#eaf8ed}
.topic-card>span:last-child{display:block;min-width:0}
.topic-card strong{display:block;color:#104d91;font-size:14px;line-height:1.3;font-weight:800;margin:0 0 5px;overflow-wrap:anywhere}
.topic-card small{display:block;color:#6883a2;font-size:12px;line-height:1.4;overflow-wrap:anywhere}



/* Featured topics - match the supplied mobile reference */
.topics{margin-top:18px;padding:0 2px 10px}
.topics .section-heading{margin:8px 0 10px}
.topics .section-heading h2{display:flex;align-items:center;gap:8px;font-size:23px;letter-spacing:0}
.topics .star{display:inline-block;width:auto;height:auto;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:#ffb400;text-shadow:1px 1px #d18c00;font-size:31px;line-height:1}
.topic-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.topic-card{display:flex;align-items:center;gap:12px;min-width:0;min-height:96px;padding:12px 13px;border:1px solid transparent;border-radius:13px;text-decoration:none;box-shadow:0 3px 10px #174d800b;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.topic-card:before{display:none}
.topic-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px #174d801b}
.topic-pink{background:#fde7f0;border-color:#f9dce8}
.topic-yellow{background:#fff3d5;border-color:#f8e9c1}
.topic-purple{background:#eee8ff;border-color:#e4dafa}
.topic-green{background:#e2f5e5;border-color:#d2ecd7}
.topic-icon{display:grid;place-items:center;flex:0 0 54px;width:54px;height:54px;border-radius:50%;font-size:30px;line-height:1;background:#ffffff8c;box-shadow:none}
.topic-pink .topic-icon{background:#f9d2e5}
.topic-yellow .topic-icon{background:#ffe8a6}
.topic-purple .topic-icon{background:#dcd0ff}
.topic-green .topic-icon{background:#c9edcf}
.topic-card>span:last-child{display:block;min-width:0}
.topic-card strong{display:block;color:#104d91;font-size:14px;line-height:1.3;font-weight:800;margin:0 0 5px;overflow-wrap:normal}
.topic-card small{display:block;color:#285a91;font-size:12px;line-height:1.4;overflow-wrap:break-word}



/* Footer social links - Admin controlled */
.footer-social{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.footer-social .social-link{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#0861c9;color:#fff;font-size:23px;font-weight:800;text-decoration:none;border:1px solid transparent;box-shadow:0 3px 9px #1b65a522;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.footer-social .social-link:hover{transform:translateY(-2px);box-shadow:0 6px 14px #1b65a533;filter:brightness(1.04)}
.footer-social .social-link img{width:25px;height:25px;object-fit:contain;display:block}
.footer-social .social-link.social-youtube{background:#e72d21;font-size:17px}
.footer-social .social-link.social-zalo{background:#eaf4ff;color:#0872d6;border-color:#b8d8f7;font-size:12px}
.footer-social .social-link.social-facebook{background:#0861c9}
.footer-social-editor-rows{display:flex;flex-direction:column;gap:12px;margin:10px 0 12px}
.footer-social-editor-row{border:1px solid #d7e8f7;border-radius:14px;background:#fafdff;padding:14px;box-shadow:0 2px 8px #1a69a50c}
.social-row-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;color:#245485}
.social-row-head strong{font-size:16px}
.inline-check{display:flex!important;flex-direction:row!important;align-items:center;gap:8px;margin-top:9px!important;font-size:14px!important;color:#52739a}
.inline-check input{width:18px!important;height:18px!important}
.social-icon-upload{font-size:14px!important}
@media (max-width:700px){.footer-social .social-link{width:40px;height:40px}.footer-social-editor-row .form-row{grid-template-columns:1fr!important}}

/* Footer information section - retain the site's blue/white visual language */
.site-footer{display:block;margin-top:28px;padding:0 24px 0;background:#f0f8ff;border:1px solid #d6e9fa;border-radius:18px 18px 0 0;color:#42628d;font-size:14px;overflow:hidden}
.footer-main{display:grid;grid-template-columns:1.35fr .8fr .9fr 1.25fr;gap:34px;max-width:1320px;margin:0 auto;padding:34px 8px 30px}
.footer-brand-name{display:flex;align-items:center;gap:12px;color:#174b88;font-family:inherit;font-size:24px;font-style:italic;font-weight:700;line-height:1.05}
.footer-brand-name strong{font-size:28px;color:#ed2c65}
.footer-brand-mark{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#e1f1ff;color:#0861c9;font-size:32px;font-style:normal}
.footer-brand p{max-width:330px;margin:18px 0;color:#5d7899;line-height:1.6}
.footer-social{display:flex;align-items:center;gap:12px;margin-top:16px}
.footer-social span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#0861c9;color:#fff;font-size:23px;font-weight:800}
.footer-social .social-youtube{background:#e72d21;font-size:17px}
.footer-social .social-zalo{background:#eaf4ff;color:#0872d6;border:1px solid #b8d8f7;font-size:12px}
.footer-column{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.footer-column h3{margin:2px 0 8px;color:#124d91;font-size:18px;font-weight:800}
.footer-column a,.footer-column p{margin:0;color:#587697;font-size:14px;line-height:1.55;text-decoration:none;overflow-wrap:anywhere}
.footer-column a:hover{color:#0861c9;text-decoration:underline}
.footer-contact p{margin-bottom:2px}
.footer-contact strong{color:#174b88}
.footer-bottom{border-top:1px solid #d1e3f3;padding:16px 8px 19px;text-align:center;color:#52749a;font-size:13px}



/* Hoàng Huệ_Music brand identity */
.site-header{background:linear-gradient(180deg,#151515,#252525 78%,#343434);border-bottom:1px solid #b98b53}
.brand-hoanghue{flex:0 0 340px;width:340px;height:114px;align-items:center;justify-content:flex-start;gap:0;overflow:hidden;border-radius:10px;background:#050505;box-shadow:0 5px 18px #0005}
.brand-hoanghue img{display:block;width:100%;height:100%;object-fit:contain}
.desktop-title{padding-top:14px}
.desktop-title .title-line h1{font-size:clamp(23px,2.1vw,34px);letter-spacing:.2px;color:#f4d39b;text-shadow:0 2px 10px #c18b4b55}
.desktop-title .note.yellow{color:#e7b65f}.desktop-title .note.purple{color:#f1d6a4}
.desktop-title p{color:#f3e3c9;letter-spacing:.5px}
.school-illustration{display:none}





/* Mobile header and footer balance refinements */




/* Softer, lighter brand header */
.site-header{
  background:linear-gradient(180deg,#f4fbff 0%,#e8f5ff 76%,#d9edfb 100%);
  border-bottom:1px solid #c7e1f7;
}
.brand-hoanghue{
  background:#fff;
  border:1px solid #d8e9f7;
  box-shadow:0 3px 12px rgba(28,82,132,.10);
}
.desktop-title .title-line h1{
  color:#174f91;
  text-shadow:none;
}
.desktop-title .note.yellow{color:#e6a51c}
.desktop-title .note.purple{color:#7b61d1}
.desktop-title p{color:#54749a}


/* Remove portrait/avatar artwork from the site header; use a clean text logo. */
.brand-hoanghue.brand-text{display:flex;align-items:center;justify-content:center;gap:12px;background:linear-gradient(135deg,#ffffff,#eaf6ff);border:1px solid #cfe5f8;box-shadow:0 3px 12px rgba(28,82,132,.10);padding:12px 18px;color:#174f91;text-decoration:none;overflow:visible}
.brand-hoanghue.brand-text .brand-note{font-size:42px;line-height:1;color:#0b65c8}
.brand-hoanghue.brand-text .brand-name{font-size:clamp(20px,2vw,30px);font-weight:800;font-style:italic;letter-spacing:-.5px;line-height:1.05;white-space:nowrap}
.brand-hoanghue.brand-text .brand-name strong{color:#ed2c65}



/* Remove duplicated large brand title from header */
.header-inner{align-items:center}
.desktop-title{display:none!important}
.desktop-actions{margin-left:auto}

/* Admin login option */
.auth-switch{grid-template-columns:repeat(3,minmax(0,1fr))}
.auth-switch button{padding:9px 5px;font-size:13px}

/* Resource upload and management */
#resourceType{width:100%}.user-song-meta{min-width:0;overflow-wrap:anywhere}.user-song{gap:10px}.user-song .light-btn{white-space:nowrap}


/* External media embed player */
.embed-divider{display:flex;align-items:center;gap:12px;margin:8px 0;color:#6683a7;font-size:.78rem;font-weight:800;letter-spacing:.06em}
.embed-divider:before,.embed-divider:after{content:"";height:1px;background:#d6e6f7;flex:1}
.embed-hint{margin-top:-8px}
.embed-modal{width:min(900px,calc(100vw - 28px));max-width:900px}
.embed-stage{width:100%;aspect-ratio:16/9;min-height:220px;background:#101827;border-radius:14px;overflow:hidden;display:grid;place-items:center}
.embed-stage iframe,.embed-stage video{width:100%;height:100%;border:0;display:block}
.embed-stage audio{width:min(92%,620px)}
.embed-external{display:inline-flex;align-items:center;justify-content:center;margin-top:8px;text-decoration:none}


/* Empty states and administrator-managed notices */
.featured-empty,.latest-empty{grid-column:1/-1;min-height:100px;display:flex;align-items:center;justify-content:center;text-align:center;padding:22px;color:#5b789e;background:#fff;border:1px dashed #b8d8f8;border-radius:16px}
.notice-empty{list-style:none;color:#5b789e;padding:16px 12px;font-size:.95rem;line-height:1.5}
.management-tabs [data-tab="notices"][hidden]{display:none}
#noticeAdminList{display:grid;gap:10px;margin-top:14px}

/* Compact persistent MP3 player */
.inline-audio-player{position:fixed;z-index:30;left:50%;bottom:14px;transform:translateX(-50%);width:min(980px,calc(100% - 28px));display:grid;grid-template-columns:minmax(150px,1.1fr) auto minmax(180px,1.5fr) minmax(90px,.55fr) 28px;align-items:center;gap:16px;padding:12px 16px;background:rgba(255,255,255,.97);border:1px solid #b9d9f5;border-radius:17px;box-shadow:0 8px 30px #174d8030;color:#174b88;backdrop-filter:blur(12px)}.inline-track{display:flex;align-items:center;gap:10px;min-width:0}.inline-note{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:12px;background:#e6f4ff;color:#0861c9;font-size:27px}.inline-track-meta{display:flex;flex-direction:column;min-width:0;gap:4px}.inline-track-meta strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inline-track-meta small,.inline-times{font-size:11px;color:#6684a5}.inline-controls{display:flex;align-items:center;gap:8px}.inline-controls button,.inline-close{border:0;background:transparent;color:#245b96;cursor:pointer;font-size:18px;padding:5px}.inline-controls .inline-toggle{width:36px;height:36px;border-radius:50%;background:#0861c9;color:#fff;font-size:15px}.inline-wave-wrap{min-width:0}.inline-wave{height:29px;display:flex;align-items:center;justify-content:center;gap:3px;overflow:hidden}.inline-wave i{display:block;width:3px;height:var(--bar);max-height:25px;border-radius:4px;background:#8bbce8;transform:scaleY(.55);transform-origin:center}.inline-audio-player.playing .inline-wave i{animation:music-wave .72s ease-in-out infinite alternate;animation-delay:calc(var(--n,1)*-35ms)}.inline-wave i:nth-child(3n){--n:3}.inline-wave i:nth-child(3n/**/+1){--n:1}.inline-wave i:nth-child(3n/**/+2){--n:2}.inline-seek{display:block;width:100%;height:4px;accent-color:#0861c9;cursor:pointer}.inline-times{display:flex;justify-content:space-between;margin-top:4px}.inline-volume{display:flex;align-items:center;gap:6px;font-size:16px}.inline-volume input{width:72px;accent-color:#0861c9;cursor:pointer}.inline-close{font-size:23px;color:#6b87a7}.song-card{cursor:pointer}.song-card button{position:relative;z-index:2}.latest-item{cursor:pointer}.latest-item button{position:relative;z-index:2}@keyframes music-wave{from{transform:scaleY(.25)}to{transform:scaleY(1)}}

/* Tách riêng khu vực đăng nhập người dùng và quản trị */
.auth-switch{grid-template-columns:repeat(2,minmax(0,1fr))}
.auth-admin-link{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:16px;padding-top:13px;border-top:1px solid #e5eff8;color:#6b87a7;font-size:13px}
.auth-admin-link button{border:0;background:transparent;color:#0756b5;font-weight:700;cursor:pointer;padding:4px}
.admin-error{margin:0;color:#c51e4f;background:#fff1f4;border:1px solid #ffd0dc;border-radius:9px;padding:9px 11px;font-size:13px}
.admin-modal .modal-logo{background:#e8f3ff;color:#0756b5}


.auth-options{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 14px;font-size:13px}
.auth-options[hidden]{display:none}
.auth-options button{border:0;background:transparent;color:#0756b5;font-weight:700;cursor:pointer;padding:5px 0}
.auth-options .remember-option{display:flex;align-items:center;gap:7px;font-weight:500;color:#456b96;margin:0}
.auth-options input[type=checkbox]{width:16px;height:16px;accent-color:#0756b5}
#roleField select{display:block;width:100%;margin-top:7px;padding:11px 12px;border:1px solid #c9e0f8;border-radius:10px;background:#fbfdff;color:#174c89;font:inherit}


.profile-password-heading{font-weight:800;color:#174c89;margin:10px 0 2px;padding-top:10px;border-top:1px solid #d7e8f8}
.profile-password-heading small{font-weight:500;color:#6684a8}
.profile-edit-modal{max-height:88vh;overflow:auto}
.profile-edit-modal .form-hint{color:#c0392b;min-height:0}
#profileForm .submit-btn{margin-top:10px}

/* Account identity: clearly highlighted; clicking opens profile actions for members. */
.account-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;max-width:260px;padding:7px 15px;border:1px solid #b9d9f5;border-radius:24px;background:linear-gradient(135deg,#fff,#e7f4ff);color:#0756b4;box-shadow:0 3px 10px rgba(24,88,150,.12);cursor:pointer;white-space:nowrap;transition:background .18s,box-shadow .18s,transform .18s}
.account-button:hover{background:#dff0ff;box-shadow:0 5px 14px rgba(24,88,150,.2);transform:translateY(-1px)}
.account-greeting{font-size:12px;color:#6683a7;font-weight:600}
.account-name{display:inline-block;max-width:145px;overflow:hidden;text-overflow:ellipsis;color:#e92861;font-size:14px;font-weight:800}
.account-chevron{color:#0756b4;font-size:15px}


/* Gọn phần tài khoản: đăng nhập và đăng ký dùng chung hộp thoại */
.auth-entry{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.auth-entry-icon{display:none;font-size:20px;line-height:1}
#profileLogout{background:#eaf4ff!important;border:1px solid #9fc9f2!important;color:#0756b5!important;font-weight:800!important;opacity:1!important;box-shadow:0 2px 6px rgba(7,86,181,.10)}
#profileLogout:hover{background:#d9ecff!important;color:#03458f!important}




/* One combined sign-in/register entry: text on desktop, person icon on mobile. */




/* Header controls: distinct, high-contrast account and menu icons */
.auth-entry-icon{display:inline-flex;align-items:center;justify-content:center;color:#fff}
.auth-entry-icon svg{display:block;width:20px;height:20px;fill:currentColor}



/* Mobile menu: morph hamburger into a clear close (X) and layer dropdown above page content. */

.auth-options .remember-option{display:inline-flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;white-space:nowrap;line-height:1.4}
.auth-options .remember-option input[type="checkbox"]{display:inline-block!important;flex:0 0 16px;width:16px;height:16px;margin:0;vertical-align:middle;}

/* Full-height mobile navigation drawer with a blurred page backdrop. */
.menu-backdrop{display:none}




/* Final mobile drawer: full viewport, above search/header, with persistent close control. */






/* Keep the account icon clear of the fixed menu button on small screens. */



/* Align the account and menu controls on the same horizontal row on mobile. */


/* SCORM / eLearning local LMS player */
.scorm-lms-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;padding:10px 14px;border:1px solid #c7e0f7;border-radius:12px;background:#eef8ff;color:#245b96;font-size:13px;flex-wrap:wrap}
.scorm-progress-wrap{flex:1 1 260px;min-width:180px;display:flex;align-items:center;gap:10px}.scorm-progress-label{white-space:nowrap}.scorm-progress-track{height:8px;flex:1;background:#d9e8f5;border-radius:999px;overflow:hidden}.scorm-progress-track span{display:block;height:100%;background:#1976d2;border-radius:999px;transition:width .25s ease}.scorm-lms-bar strong{color:#0b55a4}.scorm-lms-bar button{border:1px solid #0861c9;background:#0861c9;color:#fff;border-radius:8px;padding:7px 12px;font-weight:700;cursor:pointer}.scorm-frame{width:100%;height:min(78vh,900px);border:0;border-radius:10px;background:#fff;display:block}.embed-modal{width:min(1280px,96vw)}

/* Bài giảng/eLearning hiển thị ngay trên Trang chủ */
.home-lesson-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.home-lesson-card{display:flex;align-items:center;gap:14px;min-height:104px;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 4px 14px rgba(24,91,145,.08);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.home-lesson-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(24,91,145,.13);border-color:#a9d7f6}
.home-lesson-icon{width:58px;height:58px;flex:none;border-radius:15px;display:grid;place-items:center;background:#e7f5ff;font-size:30px}
.home-lesson-info{flex:1;min-width:0}
.home-lesson-info h3{margin:0 0 5px;color:#084d9f;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-lesson-info p{margin:0 0 4px;color:#52769e;font-size:13px}
.home-lesson-info small{color:#7692ae;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.home-lesson-open{border:1px solid #c9e2f5;background:#f5fbff;color:#0758aa;border-radius:9px;padding:8px 10px;cursor:pointer;white-space:nowrap}


.upload-file-clear{flex:0 0 auto;width:30px;height:30px;border:0;border-radius:50%;background:#e8eef5;color:#31577d;font-size:22px;line-height:28px;font-weight:700;cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center}.upload-file-clear:hover{background:#dbe7f2;color:#b42318}.upload-file-clear:focus-visible{outline:2px solid #0b63c7;outline-offset:2px}.upload-source-box{border:1px solid #cfe4f6;border-radius:16px;padding:16px;background:#f9fcff}.upload-source-title{font-weight:800;color:#174b88;font-size:18px;margin-bottom:10px}.upload-source-actions{display:flex;gap:10px;flex-wrap:wrap}.file-picker-btn,.folder-picker-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 18px;border-radius:12px;font-weight:800;cursor:pointer;border:1px solid #bcdaf2;background:#fff;color:#1259ad;box-sizing:border-box}.file-picker-btn:hover,.folder-picker-btn:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(18,89,173,.12)}.file-picker-btn input{display:none}.folder-picker-btn{background:#0b63c7;color:#fff;border-color:#0b63c7}.folder-drop-zone{margin-top:12px;border:2px dashed #b9d9f5;border-radius:14px;padding:16px;text-align:center;background:#f5fbff;color:#24598d;transition:.18s}.folder-drop-zone.dragover{border-color:#0b63c7;background:#eaf5ff;transform:scale(1.01)}.folder-drop-zone strong{display:block;font-size:16px;margin-bottom:5px}.folder-selection-info{margin-top:10px;padding:9px 12px;border-radius:10px;background:#e8f5ff;color:#0b5eb9;font-weight:700}.folder-upload-label{display:none!important}


/* Mở eLearning/tài liệu bằng cách bấm vào toàn bộ thẻ, không cần nút Mở */
.home-lesson-card{cursor:pointer}
.home-lesson-card:focus-visible,.clickable-resource:focus-visible{outline:3px solid #8bc9ff;outline-offset:2px}
.clickable-resource{cursor:pointer;transition:background .15s ease,transform .15s ease}
.clickable-resource:hover{background:#f7fbff;transform:translateY(-1px)}

/* 2026-10-03 final brand + navigation alignment refinement */
.brand-hoanghue.brand-text{
  position:relative!important;
  flex:0 1 auto!important;
  width:auto!important;
  height:auto!important;
  min-height:72px;
  padding:8px 6px!important;
  gap:12px!important;
  justify-content:flex-start!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.brand-hoanghue.brand-text .brand-note{
  font-size:44px!important;line-height:1!important;font-weight:900;
  background:linear-gradient(160deg,#075fc4 5%,#0a77df 48%,#f02c68 72%,#f1a514 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
  filter:drop-shadow(0 2px 2px rgba(7,86,181,.10));
}
.brand-hoanghue.brand-text .brand-name{
  position:relative;font-size:clamp(24px,2.2vw,34px)!important;font-weight:850!important;
  font-style:italic;letter-spacing:-.8px!important;color:#14549c;line-height:1.05;
  text-shadow:0 1px 0 #fff;white-space:nowrap;
}
.brand-hoanghue.brand-text .brand-name strong{color:#ed2c65;font-weight:900}
.brand-hoanghue.brand-text .brand-name:after{
  content:"";position:absolute;left:3px;right:4px;bottom:-9px;height:3px;border-radius:100%;
  background:linear-gradient(90deg,#ed2c65 0 18%,#1265bc 18% 82%,#f0a719 82% 100%);
  transform:skewX(-24deg);opacity:.85;
}
.nav-item{line-height:1!important;align-items:center!important}
.nav-item>span{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:34px!important;height:34px!important;line-height:1!important;flex:0 0 34px!important;vertical-align:middle!important}
.nav-item.active{align-items:center!important}
.footer-brand-name{font-style:italic;color:#14549c}
.footer-brand-mark{background:transparent;border:0;box-shadow:none;color:#0b65c8}


/* =========================================================
   FINAL RESPONSIVE / BRAND CONSISTENCY PATCH
   Giữ nguyên cấu trúc HTML + chức năng, chỉ sửa giao diện.
   ========================================================= */
.site-header{height:138px!important;overflow:visible!important;background:linear-gradient(180deg,#f4fbff 0%,#eaf6ff 72%,#dff1fc 100%)!important;border-bottom:1px solid #c9e2f5!important}
.header-inner{height:100%!important;max-width:1500px!important;margin:0 auto!important;padding:10px 28px!important;display:flex!important;align-items:center!important;gap:24px!important}
.brand-hoanghue.brand-text{flex:0 0 auto!important;width:auto!important;max-width:none!important;min-height:0!important;height:auto!important;margin:0!important;padding:4px 2px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important;text-decoration:none!important}
.brand-hoanghue.brand-text .brand-note{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:42px!important;height:42px!important;font-size:43px!important;line-height:1!important}
.brand-hoanghue.brand-text .brand-name{font-size:clamp(25px,2.25vw,35px)!important;line-height:1!important;font-weight:850!important;font-style:italic!important;letter-spacing:-.8px!important;white-space:nowrap!important;color:#174f91!important;text-shadow:none!important}
.brand-hoanghue.brand-text .brand-name strong{color:#ed2c65!important;font-weight:900!important}
.brand-hoanghue.brand-text .brand-name:after{display:none!important}
.desktop-title{display:none!important}
.desktop-actions{margin-left:auto!important;display:flex!important;align-items:center!important;gap:12px!important}
.school-illustration{display:none!important}

.main-nav{height:64px!important;position:relative!important;top:auto!important;left:auto!important;right:auto!important;width:100%!important;background:#f8fcff!important;border-bottom:1px solid #d7ebf9!important;box-shadow:0 2px 7px rgba(42,104,153,.08)!important;z-index:10!important}
.nav-inner{height:100%!important;max-width:1500px!important;margin:0 auto!important;padding:0 28px!important;display:flex!important;align-items:stretch!important;justify-content:space-between!important;gap:4px!important;overflow:visible!important}
.nav-item{height:100%!important;min-width:0!important;padding:0 18px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;line-height:1!important;font-size:16px!important;border-radius:12px!important}
.nav-item>span{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:32px!important;height:32px!important;flex:0 0 32px!important;font-size:25px!important;line-height:1!important}
.nav-item.active{background:#0861c9!important;color:#fff!important}

.page{max-width:1500px!important;margin:10px auto 0!important;padding:0 28px!important}
.site-footer{max-width:1500px!important;margin:30px auto 0!important;border-radius:20px 20px 0 0!important;padding:0 28px!important;background:linear-gradient(180deg,#f3faff 0%,#eaf6ff 100%)!important;border:1px solid #d2e8f8!important;overflow:hidden!important;color:#42628d!important}
.footer-main{max-width:1380px!important;margin:0 auto!important}
.footer-brand-name{display:flex!important;align-items:center!important;gap:10px!important;color:#174f91!important;font-style:italic!important;font-weight:850!important;font-size:24px!important;line-height:1!important}
.footer-brand-name strong{color:#ed2c65!important;font-size:28px!important;font-weight:900!important}
.footer-brand-mark{width:42px!important;height:42px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#0861c9!important;font-size:34px!important}
.footer-brand p{color:#5d7899!important}

/* Tablet */


/* Mobile: header -> logo + account/menu, search below; navigation becomes slide menu. */



/* =========================================================
   2026-10-03 MOBILE RESPONSIVE HOTFIX
   Không thay đổi cấu trúc HTML/chức năng. Chỉ khóa chiều rộng
   theo viewport để không bị co/cắt nội dung trên điện thoại.
   ========================================================= */
html,body{width:100%;max-width:100%;min-width:0;overflow-x:hidden!important}
.site-header,.main-nav,.page,.site-footer{width:100%;max-width:none}
.header-inner,.nav-inner,.page,.footer-main{box-sizing:border-box;min-width:0}





/* =========================================================
   FINAL RESPONSIVE REPAIR — 2026-10-03
   Giữ nguyên HTML/cấu trúc/chức năng. Chỉ sửa kích thước,
   vị trí và cách co giãn để giao diện luôn nằm gọn trong viewport.
   ========================================================= */
html,body{width:100%;max-width:100%;min-width:0;overflow-x:hidden!important}
*,*::before,*::after{box-sizing:border-box}





/* =========================================================
   LOGO CHUẨN HOÀNG HUỆ_MUSIC — dùng cùng một nhận diện ở HEADER + FOOTER
   Không thay đổi cấu trúc/chức năng; chỉ thay logo hiển thị.
   ========================================================= */
.brand-logo-image{
  flex:0 1 560px!important;
  width:min(560px,46vw)!important;
  height:116px!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
.brand-logo-image img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:left center!important;
}
.footer-logo-image{
  display:block!important;
  width:min(430px,100%)!important;
  height:auto!important;
  margin:0 0 12px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  text-decoration:none!important;
  line-height:0!important;
}
.footer-logo-image img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-height:112px!important;
  object-fit:contain!important;
  object-position:left center!important;
}







/* =========================================================
   NAV HOME ICON + FLOATING TOOLS + AI CHATBOX
   Giữ nguyên cấu trúc hiện có; các tiện ích này độc lập với layout chính.
   ========================================================= */
.nav-item .home-nav-icon{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:32px!important;height:32px!important;flex:0 0 32px!important;line-height:0!important;font-size:0!important;vertical-align:middle!important}
.nav-item .home-nav-icon svg{display:block!important;width:24px!important;height:24px!important}
.nav-item{line-height:1!important}

.floating-tools{position:fixed;right:22px;bottom:18px;z-index:10020;display:flex;flex-direction:column;align-items:center;gap:7px;pointer-events:none}
.floating-btn{pointer-events:auto;width:52px;height:52px;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;font:800 20px/1 inherit;box-shadow:0 8px 22px rgba(22,82,145,.22);transition:transform .2s ease,opacity .2s ease,box-shadow .2s ease}
.floating-btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(22,82,145,.28)}
.ai-float-btn{width:76px;height:82px;border:0;border-radius:0;background:transparent;color:inherit;padding:0;overflow:visible;box-shadow:none;order:1;filter:drop-shadow(0 7px 13px rgba(15,92,165,.20))}.ai-float-btn:hover{box-shadow:none;filter:drop-shadow(0 10px 17px rgba(15,92,165,.27))}.ai-float-image{display:block;width:72px;height:auto;max-width:none;object-fit:contain;pointer-events:none;user-select:none}.ai-float-icon,.ai-float-label{display:none}
.back-top-btn{background:#fff;color:#0b61c7;border:1px solid #c8e0f5;font-size:26px;opacity:0;visibility:hidden;transform:translateY(10px);pointer-events:none}
.back-top-btn.is-visible{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.back-top-btn[hidden]{display:grid!important}
.back-top-btn{order:2}

.ai-chatbox{position:fixed;right:22px;bottom:86px;width:min(390px,calc(100vw - 28px));height:min(590px,calc(100vh - 120px));min-height:390px;background:#fff;border:1px solid #cfe5f8;border-radius:20px;box-shadow:0 18px 50px rgba(31,86,135,.22);z-index:10030;overflow:hidden;display:flex;flex-direction:column}
.ai-chatbox[hidden],.ai-settings-panel[hidden]{display:none!important}
.ai-chat-header{min-height:62px;padding:11px 13px 11px 16px;background:linear-gradient(135deg,#eef8ff,#dcefff);display:flex;align-items:center;justify-content:space-between;color:#154d8f;border-bottom:1px solid #d0e6f7}
.ai-chat-header strong{display:block;font-size:16px}.ai-chat-header small{display:block;margin-top:2px;font-size:11px;color:#6682a2}
.ai-chat-head-actions{display:flex;gap:5px}.ai-chat-head-actions button,.ai-settings-title button{width:34px;height:34px;border:0;background:transparent;border-radius:10px;color:#15579c;font-size:19px;cursor:pointer}.ai-chat-head-actions button:hover,.ai-settings-title button:hover{background:rgba(21,87,156,.08)}
.ai-chat-messages{flex:1;min-height:0;overflow:auto;padding:14px;background:#f8fcff;display:flex;flex-direction:column;gap:10px}
.ai-msg{max-width:88%;padding:10px 12px;border-radius:14px;font-size:14px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}.ai-msg-bot{align-self:flex-start;background:#e8f4ff;color:#234f7d;border-bottom-left-radius:5px}.ai-msg-user{align-self:flex-end;background:#0d62c9;color:#fff;border-bottom-right-radius:5px}.ai-msg-error{align-self:flex-start;background:#fff1f1;color:#a23535}
.ai-chat-form{display:flex;align-items:flex-end;gap:8px;padding:10px;border-top:1px solid #d9eaf7;background:#fff}.ai-chat-form textarea{flex:1;min-width:0;max-height:110px;resize:none;border:1px solid #c8dff2;border-radius:13px;padding:10px 11px;font:14px/1.4 inherit;outline:none}.ai-chat-form textarea:focus{border-color:#2776cb;box-shadow:0 0 0 3px rgba(39,118,203,.08)}.ai-chat-form>button{width:42px;height:42px;flex:0 0 42px;border:0;border-radius:12px;background:#0b63c8;color:#fff;font-size:20px;cursor:pointer}.ai-chat-form>button:disabled{opacity:.55;cursor:wait}
.ai-chat-form{align-items:flex-end}.ai-compose-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}.ai-image-btn{width:42px;height:42px;flex:0 0 42px;border:1px solid #c8dff2;border-radius:12px;background:#f7fbff;color:#15579c;font-size:18px;cursor:pointer}.ai-image-btn:hover{background:#eef7ff}.ai-image-preview{position:relative;display:flex;align-items:center;gap:7px;width:100%;min-width:0;height:46px;padding:3px 34px 3px 4px;border:1px solid #c8dff2;border-radius:10px;background:#f7fbff;overflow:hidden}.ai-image-preview img{display:block;width:40px;height:38px;min-width:40px;object-fit:cover;border-radius:6px}.ai-image-preview span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#24598d;font-size:12px;font-weight:700}.ai-image-remove{position:absolute;top:50%;right:5px;transform:translateY(-50%);width:24px;height:24px;border:1px solid #c8dff2;border-radius:50%;background:#fff;color:#15579c;font-size:18px;line-height:20px;padding:0;cursor:pointer;z-index:3}.ai-msg-with-image{display:flex;flex-direction:column;gap:7px}.ai-msg-with-image img{display:block;width:auto;max-width:220px;max-height:180px;object-fit:contain;border-radius:9px;background:rgba(255,255,255,.18)}

.ai-settings-panel{position:fixed;inset:0;background:rgba(19,53,83,.28);z-index:10040;display:grid;place-items:center;padding:18px}.ai-settings-card{width:min(450px,100%);background:#fff;border:1px solid #d2e7f7;border-radius:18px;box-shadow:0 18px 55px rgba(22,70,110,.25);padding:18px}.ai-settings-title{display:flex;align-items:center;justify-content:space-between;color:#154d8f;font-size:17px}.ai-settings-note{font-size:12px;line-height:1.5;color:#6a819b;margin:7px 0 14px}.ai-settings-card label{display:block;font-size:12px;font-weight:700;color:#355b82;margin-top:10px}.ai-settings-card input{display:block;width:100%;box-sizing:border-box;margin-top:5px;height:40px;border:1px solid #c9dfef;border-radius:10px;padding:0 10px;font:13px inherit;outline:none}.ai-settings-card input:focus{border-color:#2776cb}.ai-settings-actions{display:flex;gap:8px;margin-top:15px}.ai-settings-actions .btn,.ai-settings-actions .light-btn{min-height:40px}.ai-key-link{display:inline-block;margin-top:12px;color:#1265bf;font-size:12px;text-decoration:none}.ai-key-link:hover{text-decoration:underline}




/* =========================================================
   FLOATING TOOLS — PROFESSIONAL ALIGNMENT
   Back-to-top và trợ lý AI dùng cùng một trục giữa,
   nằm cố định ở góc phải màn hình và không chạy theo nội dung.
   Khi Back-to-top hiện: ↑ nằm trên, AI nằm dưới.
   ========================================================= */
.floating-tools{
  position:fixed!important;
  right:22px!important;
  bottom:18px!important;
  z-index:10020!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:12px!important;
  width:76px!important;
  pointer-events:none!important;
}
.floating-btn{
  pointer-events:auto!important;
}
.ai-float-btn{
  position:relative!important;
  z-index:2!important;
  order:2!important;
  width:76px!important;
  height:82px!important;
  margin:0!important;
}
.ai-float-image{
  display:block!important;
  width:72px!important;
  max-width:72px!important;
  height:auto!important;
  margin:0 auto!important;
}
.back-top-btn{
  position:relative!important;
  right:auto!important;
  bottom:auto!important;
  z-index:3!important;
  order:1!important;
  flex:0 0 52px!important;
  width:52px!important;
  height:52px!important;
  margin:0 auto!important;
}
.back-top-btn[hidden]{
  display:none!important;
}
@media (max-width:600px){
  .floating-tools{
    right:14px!important;
    bottom:14px!important;
    width:72px!important;
    gap:10px!important;
  }
  .ai-float-btn{width:72px!important;height:78px!important;}
  .ai-float-image{width:68px!important;max-width:68px!important;}
  .back-top-btn{width:50px!important;height:50px!important;flex-basis:50px!important;}
}







/* =========================================================
   FINAL SEARCH + MOBILE HEADER
   Một bộ style duy nhất, không chồng các bản responsive cũ.
   ========================================================= */
.searchbox{position:relative;overflow:visible;z-index:100}
.search-suggestions{position:absolute;top:calc(100% + 7px);left:0;right:0;margin:0;padding:6px;background:#fff;border:1px solid #cfe3f4;border-radius:14px;box-shadow:0 12px 28px rgba(25,83,135,.18);max-height:300px;overflow-y:auto;overflow-x:hidden;z-index:999999;box-sizing:border-box}
.search-suggestions[hidden]{display:none!important}
.search-suggestion{appearance:none;-webkit-appearance:none;width:100%;min-height:50px;margin:0;padding:7px 9px;border:0;border-radius:10px;background:#fff;display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;column-gap:10px;text-align:left;cursor:pointer;box-sizing:border-box;overflow:hidden;color:#0758b8!important}
.search-suggestion:hover,.search-suggestion:focus{background:#edf7ff;outline:none}
.search-suggestion-icon{width:32px;height:32px;min-width:32px;display:grid;place-items:center;border-radius:9px;background:#e8f4ff;font-size:17px;line-height:1}
.search-suggestion-content{display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:flex-start!important;min-width:0!important;width:100%!important;overflow:hidden!important}
.search-suggestion-title{display:block!important;width:100%!important;min-width:0!important;margin:0!important;padding:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:#0758b8!important;-webkit-text-fill-color:#0758b8!important;font:700 15px/19px Arial,"Be Vietnam Pro",sans-serif!important;visibility:visible!important;opacity:1!important}
.search-suggestion-meta{display:block!important;width:100%!important;min-width:0!important;margin:0!important;padding:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:#5f7fa4!important;-webkit-text-fill-color:#5f7fa4!important;font:500 11px/14px Arial,"Be Vietnam Pro",sans-serif!important;visibility:visible!important;opacity:1!important}
.search-suggestion-empty{padding:12px;color:#5f7fa4;font-size:13px;text-align:center}




/* =========================================================
   RESPONSIVE SYSTEM REBUILD — TABLET + MOBILE
   2026-10-03
   Mục tiêu: 761–1100px (iPad/Tablet) không dùng layout desktop.
   Desktop >1100px giữ nguyên. Mobile <=760px giữ nguyên cấu trúc.
   ========================================================= */





/* Small-screen final balance: keep cards readable and never squeeze text vertically. */



/* =========================================================
   FINAL RESPONSIVE AUTH + MENU LAYER
   Keep this block last so older responsive rules cannot
   push the auth modal below the navigation or hide its close control.
   ========================================================= */
.modal-backdrop{z-index:12000!important}
.modal{z-index:12001!important}

.mobile-menu-close{display:none}









/* The auth dialog always wins over the mobile drawer. */
body.menu-open .modal-backdrop:not([hidden]){z-index:12000!important}

/* =========================================================
   MENU FINAL STABILITY FIX
   The menu button itself becomes the X when the drawer is open.
   This avoids a fixed close button being trapped by the drawer's
   transform containing block on Safari/Chrome responsive modes.
   ========================================================= */




/* Auth dialogs always sit above navigation/drawer */
.modal-backdrop{position:fixed!important;inset:0!important;z-index:14000!important}
.modal{position:relative!important;z-index:14001!important}

/* Final alignment pass: keep all shortcut icons on the same vertical axis as their text. */
.quick-card{align-items:center!important;}
.quick-card>.quick-icon{align-self:center!important;display:grid!important;place-items:center!important;flex:0 0 63px!important;width:63px!important;height:63px!important;margin:0!important;line-height:1!important;}
.quick-card>span:last-child{display:flex!important;flex-direction:column!important;justify-content:center!important;align-self:stretch!important;min-width:0!important;}
.quick-card strong,.quick-card small{line-height:1.3!important;}



/* ===== FINAL RESPONSIVE CARD ALIGNMENT ===== */




/* Keep the header controls on one exact horizontal axis. */


/* ==========================================================
   RESPONSIVE REBUILD — FINAL CLEAN LAYER
   This block intentionally overrides the older accumulated
   responsive rules. Desktop layout is left untouched.
   ========================================================== */






/* ==========================================================
   COMPACT MOBILE SEARCH — FINAL ISOLATED OVERRIDE
   <=760px only.  Keep the existing responsive structure intact.
   The search starts as a small icon in the header controls row.
   When opened, the full search bar drops into the header area,
   above the page/hero, with suggestions below it.
   ========================================================== */




/* ==========================================================
   SEARCH UX — TABLET + MOBILE FINAL
   <=1100px (iPad and smaller): compact search icon in header.
   Full search opens inside the header, ABOVE the page/hero.
   This block is intentionally last and does not alter desktop.
   ========================================================== */


/* Smaller tablets / phones: keep the same 42px control system. */




/* ==========================================================
   HOANG HUE MUSIC — HEADER FINAL STABLE OVERRIDE
   Scope: iPad/tablet/mobile only (<=1100px).
   Purpose: compact header + three perfectly aligned round
   controls: Search / User / Menu. Does not alter desktop.
   ========================================================== */






/* FINAL MICRO-FIX: center the search magnifier optically inside its round button.
   Do not alter header geometry, menu, user button, or search behavior. */


/* ==========================================================
   HEADER MOBILE/TABLET — FINAL ALIGNMENT ONLY
   Chỉ chỉnh vị trí/kích thước HEADER trên màn hình <=1100px.
   Không thay đổi hero, card, menu content hay các phần khác.
   ========================================================== */




/* FINAL HEADER ICON VISIBILITY FIX — keep existing responsive structure intact */



/* ==========================================================
   MENU HEADER POSITION FIX — ONLY THE MENU BUTTON
   The menu button lives outside .site-header in the HTML,
   so position it against the viewport header center instead
   of using top:50% of the whole page.
   Do not change Search/User or any content layout.
   ========================================================== */




/* FINAL SEARCH OPEN FIX — keep header/logo/account absolutely stable.
   Only the compact search behavior is changed. */



/* ==========================================================
   SEARCH ALIGNMENT — ISOLATED PATCH
   Chỉ sửa vị trí thanh Search khi mở trên tablet/mobile.
   Không thay đổi logo, User, Menu, Hero hoặc layout nội dung.
   ========================================================== */




/* ==========================================================
   SEARCH FINAL STABILIZATION — 2026-10-03
   ONLY fixes compact Search on <=1100px.
   Logo / User / Menu keep their existing geometry.
   ========================================================== */



/* ==========================================================
   HOÀNG HUỆ MUSIC — RESPONSIVE ONLY
   Desktop > 1100px: giữ nguyên hoàn toàn.
   Tablet/iPad <= 1100px: Search thu thành icon.
   Mobile <= 760px: header gọn, 3 icon cùng hàng.
   Search mở dạng overlay, tuyệt đối không đẩy layout.
   ========================================================== */

@media (max-width:1100px){
  html,body{overflow-x:hidden!important}

  .site-header{
    height:116px!important;
    min-height:116px!important;
    position:relative!important;
    overflow:visible!important;
    z-index:1000!important;
  }
  .header-inner{
    height:116px!important;
    min-height:116px!important;
    padding:10px 16px!important;
    display:flex!important;
    align-items:center!important;
    gap:0!important;
    position:relative!important;
    z-index:1001!important;
  }
  .brand-logo-image{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    flex:0 1 auto!important;
    width:min(330px,calc(100% - 170px))!important;
    height:76px!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    position:relative!important;
    z-index:1002!important;
  }
  .brand-logo-image img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    object-fit:contain!important;
    object-position:left center!important;
  }

  /* User: chỉ giữ nút tròn, không tham gia co giãn layout. */
  .desktop-actions{
    display:flex!important;
    position:absolute!important;
    top:50%!important;
    right:62px!important;
    transform:translateY(-50%)!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    margin:0!important;
    padding:0!important;
    align-items:center!important;
    justify-content:center!important;
    z-index:1005!important;
  }
  .desktop-actions>.searchbox{display:none!important}
  .desktop-actions .auth-entry,
  .desktop-actions .account-button:not(.hidden){
    display:grid!important;
    place-items:center!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    margin:0!important;
    padding:0!important;
    border-radius:50%!important;
    border:2px solid #fff!important;
    background:#0861c9!important;
    color:#fff!important;
    box-shadow:0 3px 9px rgba(7,86,181,.24)!important;
    box-sizing:border-box!important;
    flex:none!important;
  }
  .desktop-actions .auth-entry-text{display:none!important}
  .desktop-actions .auth-entry-icon{display:flex!important;align-items:center!important;justify-content:center!important}
  .desktop-actions .auth-entry-icon svg{display:block!important;width:21px!important;height:21px!important;fill:#fff!important}
  .desktop-actions .account-button:not(.hidden){font-size:0!important}
  .desktop-actions .account-button:not(.hidden)::before{content:'●'!important;font-size:17px!important;color:#fff!important}

  /* Search control: cố định cùng hàng với User/Menu. */
  .mobile-search{
    display:block!important;
    position:absolute!important;
    top:50%!important;
    right:114px!important;
    left:auto!important;
    transform:translateY(-50%)!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    z-index:1006!important;
  }
  .mobile-search-toggle{
    display:grid!important;
    place-items:center!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    margin:0!important;
    padding:0!important;
    border:2px solid #fff!important;
    border-radius:50%!important;
    background:#0861c9!important;
    color:#fff!important;
    box-shadow:0 3px 9px rgba(7,86,181,.24)!important;
    font-size:28px!important;
    line-height:1!important;
    cursor:pointer!important;
    box-sizing:border-box!important;
  }
  .mobile-search:not(.is-open) .searchbox{display:none!important}

  /* Khi mở: search nằm đè lên trang, không làm header/logo/icon nhảy. */
  .mobile-search.is-open{
    top:50%!important;
    right:114px!important;
    width:42px!important;
    height:42px!important;
    transform:translateY(-50%)!important;
    overflow:visible!important;
  }
  .mobile-search.is-open .searchbox{
    display:flex!important;
    position:fixed!important;
    top:126px!important;
    left:14px!important;
    right:14px!important;
    width:auto!important;
    max-width:none!important;
    height:48px!important;
    min-height:48px!important;
    margin:0!important;
    padding:0 9px 0 16px!important;
    border:1.5px solid #9fcdf1!important;
    border-radius:25px!important;
    background:#fff!important;
    box-shadow:0 4px 12px rgba(25,83,135,.15)!important;
    box-sizing:border-box!important;
    transform:none!important;
    z-index:11000!important;
  }
  .mobile-search.is-open .searchbox input{
    display:block!important;
    flex:1 1 auto!important;
    min-width:0!important;
    width:auto!important;
    height:46px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    outline:0!important;
    background:transparent!important;
    color:#174f91!important;
    font:400 15px/46px Arial,"Be Vietnam Pro",sans-serif!important;
  }
  .mobile-search.is-open .searchbox .global-search-btn{
    display:grid!important;
    place-items:center!important;
    flex:0 0 38px!important;
    width:38px!important;
    height:38px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    color:#0758b8!important;
    font-size:25px!important;
    line-height:1!important;
  }
  .mobile-search.is-open .search-suggestions{
    position:absolute!important;
    top:55px!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:none!important;
    z-index:11001!important;
  }

  /* Menu luôn ở đúng vị trí Header, không bị kéo theo Search. */
  .mobile-menu{
    display:flex!important;
    position:fixed!important;
    top:calc(58px - 21px)!important;
    right:14px!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    margin:0!important;
    padding:0!important;
    border:2px solid #fff!important;
    border-radius:50%!important;
    background:#0861c9!important;
    box-shadow:0 3px 9px rgba(7,86,181,.24)!important;
    z-index:12005!important;
    align-items:center!important;
    justify-content:center!important;
    flex-direction:column!important;
    gap:4px!important;
    box-sizing:border-box!important;
  }
  .mobile-menu span{
    display:block!important;
    position:static!important;
    width:21px!important;
    height:3px!important;
    margin:0!important;
    background:#fff!important;
    border-radius:4px!important;
    transform:none!important;
  }
  .mobile-menu[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)!important}
  .mobile-menu[aria-expanded="true"] span:nth-child(2){opacity:0!important}
  .mobile-menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)!important}

  /* Nav drawer — giữ nguyên chức năng, chỉ responsive. */
  .menu-backdrop{
    display:block!important;
    position:fixed!important;
    inset:0!important;
    z-index:11990!important;
    background:rgba(18,43,70,.28)!important;
    backdrop-filter:blur(5px)!important;
    -webkit-backdrop-filter:blur(5px)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
  body.menu-open{overflow:hidden!important}
  body.menu-open .menu-backdrop{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
  .main-nav{
    display:block!important;
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100vh!important;
    height:100dvh!important;
    max-height:none!important;
    margin:0!important;
    padding:82px 18px 24px!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    background:#f7fcff!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    z-index:12000!important;
    transform:translateX(100%)!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:transform .28s cubic-bezier(.22,.75,.25,1),visibility 0s linear .28s!important;
  }
  .main-nav.open{
    transform:translateX(0)!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transition:transform .28s cubic-bezier(.22,.75,.25,1),visibility 0s!important;
  }
  .nav-inner{
    height:auto!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:7px!important;
  }
  .nav-item{
    width:100%!important;
    height:54px!important;
    min-height:54px!important;
    padding:0 18px!important;
    border-radius:12px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:13px!important;
    font-size:17px!important;
  }
  .nav-item span{font-size:25px!important;line-height:1!important}
  .nav-item.active{border-radius:12px!important}

  .page{max-width:none!important;margin:0 auto!important;padding:0 16px!important}
  .hero{margin:0!important}
}

@media (max-width:760px){
  .site-header{
    height:112px!important;
    min-height:112px!important;
  }
  .header-inner{
    height:112px!important;
    min-height:112px!important;
    padding:8px 12px!important;
  }
  .brand-logo-image{
    width:calc(100% - 156px)!important;
    max-width:300px!important;
    height:70px!important;
    min-height:70px!important;
  }
  .desktop-actions{
    right:61px!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
  }
  .desktop-actions .auth-entry,
  .desktop-actions .account-button:not(.hidden){
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    max-width:40px!important;
  }
  .mobile-search,
  .mobile-search.is-open{
    right:109px!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
  }
  .mobile-search-toggle{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
    font-size:27px!important;
  }
  .mobile-search.is-open .searchbox{
    top:122px!important;
    left:10px!important;
    right:10px!important;
    height:46px!important;
    min-height:46px!important;
  }
  .mobile-search.is-open .searchbox input{
    height:44px!important;
    line-height:44px!important;
    font-size:14px!important;
  }
  .mobile-search.is-open .search-suggestions{top:53px!important}
  .mobile-menu{
    top:35px!important;
    right:10px!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
  }
  .mobile-menu span{width:20px!important;height:3px!important}

  /* Nội dung giữ cấu trúc, chỉ co theo màn hình. */
  .quick-links{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin:10px 0!important}
  .quick-card{height:118px!important;padding:14px!important;gap:12px!important}
  .quick-icon{width:58px!important;height:58px!important;font-size:30px!important}
  .quick-card strong{font-size:16px!important}
  .quick-card small{font-size:13px!important}
  .content-layout{display:block!important}
  .sidebar{display:none!important}
  .song-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .song-thumb{height:118px!important}
  .section-heading h2{font-size:23px!important}
}

@media (max-width:420px){
  .brand-logo-image{width:calc(100% - 148px)!important;height:64px!important;min-height:64px!important}
  .desktop-actions{right:56px!important;width:38px!important;height:38px!important;min-width:38px!important}
  .desktop-actions .auth-entry,
  .desktop-actions .account-button:not(.hidden){width:38px!important;height:38px!important;min-width:38px!important;max-width:38px!important}
  .mobile-search,.mobile-search.is-open{right:100px!important;width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important}
  .mobile-search-toggle{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;font-size:25px!important}
  .mobile-menu{top:37px!important;right:7px!important;width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important}
  .mobile-menu span{width:19px!important}
  .mobile-search.is-open .searchbox{top:118px!important}
}


/* ==========================================================
   SEARCH OPEN FIX — CHỈ SỬA THANH SEARCH RESPONSIVE
   Không thay đổi Logo / User / Menu / Hero / nội dung.
   Quan trọng: .mobile-search có transform nên fixed con bị
   khóa theo parent. Khi mở, bỏ transform của parent để
   searchbox fixed bám viewport và không bị thu thành ô nhỏ.
   ========================================================== */
@media (max-width:1100px){
  .mobile-search.is-open{
    transform:none!important;
    overflow:visible!important;
  }

  .mobile-search.is-open .searchbox{
    position:fixed!important;
    top:calc(50% - 24px)!important;
    left:16px!important;
    right:16px!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    height:48px!important;
    min-height:48px!important;
    display:flex!important;
    box-sizing:border-box!important;
    z-index:13000!important;
  }

  .mobile-search.is-open .searchbox input{
    flex:1 1 auto!important;
    width:100%!important;
    min-width:0!important;
    height:46px!important;
    min-height:46px!important;
    box-sizing:border-box!important;
  }

  .mobile-search.is-open .searchbox .global-search-btn{
    flex:0 0 40px!important;
    width:40px!important;
    height:40px!important;
  }

  .mobile-search.is-open .search-suggestions{
    left:0!important;
    right:0!important;
    width:100%!important;
  }
}

/* Trên điện thoại: thanh search nằm ngay dưới Header,
   nhưng vẫn là overlay và không làm nội dung nhảy. */
@media (max-width:760px){
  .mobile-search.is-open .searchbox{
    top:calc(112px + 8px)!important;
    left:10px!important;
    right:10px!important;
    width:auto!important;
    height:46px!important;
    min-height:46px!important;
  }

  .mobile-search.is-open .searchbox input{
    height:44px!important;
    min-height:44px!important;
    line-height:44px!important;
  }
}

@media (max-width:420px){
  .mobile-search.is-open .searchbox{
    top:calc(112px + 6px)!important;
    left:8px!important;
    right:8px!important;
    height:44px!important;
    min-height:44px!important;
  }

  .mobile-search.is-open .searchbox input{
    height:42px!important;
    min-height:42px!important;
    line-height:42px!important;
  }
}


/* ==========================================================
   SEARCH — FINAL POSITION FIX (RESPONSIVE ONLY)
   Giữ nguyên vị trí icon kính lúp. Khi mở, chỉ thanh Search
   xuất hiện ở mép trên Header, không trôi xuống giữa trang.
   Không thay đổi Logo / User / Menu / Hero / nội dung.
   ========================================================== */
@media (max-width:1100px){
  .mobile-search{
    top:50%!important;
    transform:translateY(-50%)!important;
    overflow:visible!important;
  }
  .mobile-search.is-open{
    top:50%!important;
    transform:translateY(-50%)!important;
    width:42px!important;
    height:42px!important;
  }
  .mobile-search.is-open .searchbox{
    position:absolute!important;
    top:calc(50% + 8px)!important;
    left:auto!important;
    right:calc(42px - 100vw + 16px)!important;
    width:calc(100vw - 32px)!important;
    max-width:none!important;
    height:48px!important;
    min-height:48px!important;
    margin:0!important;
    transform:none!important;
    z-index:13000!important;
  }
  .mobile-search.is-open .searchbox input{
    height:46px!important;
    line-height:46px!important;
  }
}

@media (max-width:760px){
  .mobile-search{
    top:50%!important;
    transform:translateY(-50%)!important;
  }
  .mobile-search.is-open{
    top:50%!important;
    transform:translateY(-50%)!important;
    width:40px!important;
    height:40px!important;
  }
  .mobile-search.is-open .searchbox{
    top:calc(50% + 6px)!important;
    right:calc(40px - 100vw + 10px)!important;
    width:calc(100vw - 20px)!important;
    height:46px!important;
    min-height:46px!important;
  }
  .mobile-search.is-open .searchbox input{
    height:44px!important;
    line-height:44px!important;
  }
}

@media (max-width:420px){
  .mobile-search.is-open .searchbox{
    top:calc(50% + 5px)!important;
    right:calc(38px - 100vw + 8px)!important;
    width:calc(100vw - 16px)!important;
    height:44px!important;
    min-height:44px!important;
  }
  .mobile-search.is-open .searchbox input{
    height:42px!important;
    line-height:42px!important;
  }
}

/* ==========================================================
   SEARCH FINAL CLEAN FIX
   Chỉ sửa thanh tìm kiếm khi mở trên responsive.
   Icon kính lúp KHÔNG di chuyển. Search nằm chính giữa,
   ngay dưới Header, không che logo / User / Menu và không
   làm thay đổi chiều cao hay vị trí bất kỳ thành phần nào.
   ========================================================== */
@media (max-width:1100px){
  .mobile-search.is-open{
    position:absolute!important;
    top:50%!important;
    right:114px!important;
    left:auto!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    transform:translateY(-50%)!important;
    overflow:visible!important;
  }

  .mobile-search.is-open .searchbox{
    position:fixed!important;
    top:124px!important;
    left:50%!important;
    right:auto!important;
    width:calc(100vw - 32px)!important;
    max-width:900px!important;
    height:48px!important;
    min-height:48px!important;
    margin:0!important;
    padding:0 10px 0 16px!important;
    transform:translateX(-50%)!important;
    display:flex!important;
    align-items:center!important;
    box-sizing:border-box!important;
    z-index:11000!important;
  }
}

@media (max-width:760px){
  .mobile-search.is-open{
    top:50%!important;
    right:109px!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
    transform:translateY(-50%)!important;
  }

  .mobile-search.is-open .searchbox{
    top:120px!important;
    left:50%!important;
    right:auto!important;
    width:calc(100vw - 20px)!important;
    max-width:none!important;
    height:46px!important;
    min-height:46px!important;
    transform:translateX(-50%)!important;
  }
}

@media (max-width:420px){
  .mobile-search.is-open{
    right:100px!important;
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
  }

  .mobile-search.is-open .searchbox{
    top:116px!important;
    width:calc(100vw - 16px)!important;
    height:44px!important;
    min-height:44px!important;
  }
}

/* SEARCH ONLY — FINAL CENTERED BAR FIX
   Keep the magnifier button fixed in the header. The opened search
   bar uses viewport edges directly so no inherited right/left rule
   can shift it horizontally. */
@media (max-width:1100px){
  .mobile-search.is-open .searchbox{
    position:fixed!important;
    left:16px!important;
    right:16px!important;
    top:124px!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    transform:none!important;
    box-sizing:border-box!important;
    z-index:20000!important;
  }
}
@media (max-width:760px){
  .mobile-search.is-open .searchbox{
    left:10px!important;
    right:10px!important;
    top:120px!important;
    width:auto!important;
  }
}
@media (max-width:420px){
  .mobile-search.is-open .searchbox{
    left:8px!important;
    right:8px!important;
    top:116px!important;
    width:auto!important;
  }
}

/* ==========================================================
   SEARCH BAR — CLEAN FINAL FIX
   Chỉ sửa thanh Search responsive khi mở.
   - Nút kính lúp giữ nguyên đúng vị trí.
   - Bỏ transform khỏi parent khi mở để fixed searchbox
     bám viewport thật, không bị thu thành ô nhỏ.
   - Thanh Search căn giữa tuyệt đối theo viewport.
   - Không đẩy Logo / User / Menu / Hero.
   ========================================================== */
@media (max-width:1100px){
  .mobile-search.is-open{
    /* 42px button: top của nút = tâm viewport - 21px */
    top:calc(50% - 21px)!important;
    right:114px!important;
    left:auto!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    transform:none!important;
    overflow:visible!important;
  }

  .mobile-search.is-open .searchbox{
    position:fixed!important;
    top:124px!important;
    left:50%!important;
    right:auto!important;
    width:calc(100vw - 32px)!important;
    max-width:900px!important;
    min-width:0!important;
    height:48px!important;
    min-height:48px!important;
    margin:0!important;
    padding:0 10px 0 16px!important;
    display:flex!important;
    align-items:center!important;
    box-sizing:border-box!important;
    transform:translateX(-50%)!important;
    z-index:13000!important;
  }

  .mobile-search.is-open .searchbox input{
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    height:46px!important;
    min-height:46px!important;
    line-height:46px!important;
    margin:0!important;
    padding:0!important;
  }

  .mobile-search.is-open .searchbox .global-search-btn{
    flex:0 0 40px!important;
    width:40px!important;
    height:40px!important;
    margin:0!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
  }
}

@media (max-width:760px){
  .mobile-search.is-open{
    top:calc(50% - 20px)!important;
    right:109px!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
    transform:none!important;
  }

  .mobile-search.is-open .searchbox{
    top:120px!important;
    left:50%!important;
    right:auto!important;
    width:calc(100vw - 20px)!important;
    max-width:none!important;
    height:46px!important;
    min-height:46px!important;
    transform:translateX(-50%)!important;
  }

  .mobile-search.is-open .searchbox input{
    height:44px!important;
    min-height:44px!important;
    line-height:44px!important;
  }
}

@media (max-width:420px){
  .mobile-search.is-open{
    top:calc(50% - 19px)!important;
    right:100px!important;
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    transform:none!important;
  }

  .mobile-search.is-open .searchbox{
    top:116px!important;
    left:50%!important;
    right:auto!important;
    width:calc(100vw - 16px)!important;
    height:44px!important;
    min-height:44px!important;
    transform:translateX(-50%)!important;
  }

  .mobile-search.is-open .searchbox input{
    height:42px!important;
    min-height:42px!important;
    line-height:42px!important;
  }
}
\n\n/* SEARCH OPEN VISUAL LAYER — only when the compact Search is open.\n   Keeps the search bar crisp and prominent while the interface behind it\n   becomes softly blurred/dimmed. Does not change layout or component sizes. */\n@media (max-width:1100px){\n  body.search-open .page,\n  body.search-open .main-nav{\n    filter:blur(4px);\n    opacity:.78;\n    transition:filter .16s ease, opacity .16s ease;\n  }\n\n  body.search-open .site-header{\n    box-shadow:0 2px 14px rgba(30,80,130,.08);\n  }\n\n  body.search-open .mobile-search .searchbox{\n    filter:none!important;\n    opacity:1!important;\n    z-index:11010!important;\n    box-shadow:0 8px 28px rgba(9,73,145,.24), 0 0 0 2px rgba(255,255,255,.72);\n  }\n\n  body.search-open .mobile-search-toggle{\n    filter:none!important;\n    opacity:1!important;\n    position:relative;\n    z-index:11011!important;\n  }\n\n  /* Soft veil makes the opened search visually stand out without\n     changing the underlying page geometry. */\n  body.search-open::before{\n    content:"";\n    position:fixed;\n    inset:0;\n    background:rgba(236,246,255,.08);\n    backdrop-filter:blur(1px);\n    -webkit-backdrop-filter:blur(1px);\n    pointer-events:none;\n    z-index:10990;\n  }\n\n  body.search-open .mobile-search{\n    z-index:11020!important;\n  }\n}\n
/* ==========================================================
   SEARCH OVERLAY — CLEAN FINAL UI
   Desktop + responsive.  Only Search is affected.
   When opened, the page becomes softly blurred/dimmed and the
   search bar rises above it like a focused dialog. The header
   icons/logo never move.
   ========================================================== */

/* Shared dim/blur layer. It sits below the active search box. */
body.search-open::before{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(35,67,100,.28);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  pointer-events:auto;
  z-index:11900;
}

/* Keep the active search box crisp and above the veil. */
body.search-open .searchbox.search-active,
body.search-open .mobile-search .searchbox{
  filter:none!important;
  opacity:1!important;
  z-index:12000!important;
}

/* Desktop: normal search remains in the header until focused. */
@media (min-width:1101px){
  #desktopSearchBox.search-active{
    position:fixed!important;
    left:50%!important;
    top:28vh!important;
    transform:translateX(-50%)!important;
    width:min(760px,calc(100vw - 48px))!important;
    height:58px!important;
    min-height:58px!important;
    margin:0!important;
    padding:0 14px 0 22px!important;
    display:flex!important;
    align-items:center!important;
    box-sizing:border-box!important;
    background:#fff!important;
    border:2px solid #9dcef4!important;
    border-radius:30px!important;
    box-shadow:0 12px 36px rgba(7,76,145,.28),0 0 0 5px rgba(255,255,255,.34)!important;
    z-index:12000!important;
  }

  #desktopSearchBox.search-active .global-search{
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    height:54px!important;
    line-height:54px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    outline:0!important;
    background:transparent!important;
    font-size:18px!important;
    color:#174f91!important;
  }

  #desktopSearchBox.search-active .global-search-btn{
    flex:0 0 42px!important;
    width:42px!important;
    height:42px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    color:#0758b8!important;
    display:grid!important;
    place-items:center!important;
    font-size:27px!important;
  }

  #desktopSearchBox.search-active .search-suggestions{
    position:absolute!important;
    top:64px!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:none!important;
    z-index:12001!important;
  }

  /* Keep all header controls in place behind the overlay. */
  body.search-open .brand,
  body.search-open .desktop-actions .auth-entry,
  body.search-open .desktop-actions .account-button{
    filter:blur(4px);
    opacity:.72;
  }
}

/* Tablet / mobile: keep the existing magnifier button exactly where it is;
   only the opened search bar changes its presentation. */
@media (max-width:1100px){
  body.search-open .page,
  body.search-open .main-nav,
  body.search-open .site-header .brand,
  body.search-open .desktop-actions,
  body.search-open .mobile-menu{
    filter:blur(5px);
    opacity:.72;
  }

  body.search-open .mobile-search-toggle{
    position:relative!important;
    z-index:12010!important;
    filter:none!important;
    opacity:1!important;
  }

  .mobile-search.is-open .searchbox{
    position:fixed!important;
    left:50%!important;
    right:auto!important;
    top:23vh!important;
    width:min(760px,calc(100vw - 28px))!important;
    max-width:none!important;
    height:56px!important;
    min-height:56px!important;
    margin:0!important;
    padding:0 12px 0 20px!important;
    transform:translateX(-50%)!important;
    display:flex!important;
    align-items:center!important;
    box-sizing:border-box!important;
    background:#fff!important;
    border:2px solid #9dcef4!important;
    border-radius:29px!important;
    box-shadow:0 12px 36px rgba(7,76,145,.28),0 0 0 5px rgba(255,255,255,.34)!important;
    z-index:12000!important;
  }

  .mobile-search.is-open .searchbox input{
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    height:52px!important;
    line-height:52px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    outline:0!important;
    background:transparent!important;
    color:#174f91!important;
    font-size:16px!important;
  }

  .mobile-search.is-open .searchbox .global-search-btn{
    flex:0 0 42px!important;
    width:42px!important;
    height:42px!important;
    margin:0!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border:0!important;
    background:transparent!important;
    color:#0758b8!important;
    font-size:27px!important;
  }

  .mobile-search.is-open .search-suggestions{
    position:absolute!important;
    top:64px!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    z-index:12001!important;
  }
}

@media (max-width:760px){
  .mobile-search.is-open .searchbox{
    top:18vh!important;
    width:calc(100vw - 24px)!important;
    height:52px!important;
    min-height:52px!important;
    border-radius:27px!important;
    padding-left:17px!important;
  }
  .mobile-search.is-open .searchbox input{
    height:48px!important;
    line-height:48px!important;
    font-size:15px!important;
  }
}

@media (max-width:420px){
  .mobile-search.is-open .searchbox{
    top:15vh!important;
    width:calc(100vw - 18px)!important;
    height:50px!important;
    min-height:50px!important;
    border-radius:26px!important;
  }
  .mobile-search.is-open .searchbox input{
    height:46px!important;
    line-height:46px!important;
    font-size:15px!important;
  }
}

/* ==========================================================
   SEARCH FINAL POSITION + CLOSE BEHAVIOR
   Chỉ chỉnh Search. Khi mở: nổi bật + nền blur, nhưng thanh
   Search nằm ở vùng header phía trên, không nằm giữa màn hình.
   Logo/User/Menu và nút kính lúp không bị di chuyển.
   ========================================================== */
@media (min-width:1101px){
  #desktopSearchBox.search-active{
    position:fixed!important;
    top:22px!important;
    right:190px!important;
    left:auto!important;
    transform:none!important;
    width:min(520px,calc(100vw - 420px))!important;
    height:52px!important;
    min-height:52px!important;
    margin:0!important;
    padding:0 12px 0 18px!important;
    display:flex!important;
    align-items:center!important;
    box-sizing:border-box!important;
    z-index:12000!important;
  }

  #desktopSearchBox.search-active .global-search{
    height:48px!important;
    line-height:48px!important;
    font-size:16px!important;
  }
}

@media (max-width:1100px){
  .mobile-search.is-open .searchbox{
    position:fixed!important;
    top:84px!important;
    left:14px!important;
    right:14px!important;
    width:auto!important;
    max-width:none!important;
    height:52px!important;
    min-height:52px!important;
    margin:0!important;
    transform:none!important;
    padding:0 12px 0 17px!important;
    box-sizing:border-box!important;
    z-index:12000!important;
  }

  .mobile-search.is-open .searchbox input{
    height:48px!important;
    line-height:48px!important;
    font-size:15px!important;
  }
}

@media (max-width:600px){
  .mobile-search.is-open .searchbox{
    top:78px!important;
    left:10px!important;
    right:10px!important;
    height:50px!important;
    min-height:50px!important;
  }
}

/* ==========================================================
   FINAL USER REQUEST — MENU SCROLL + TOPIC RESPONSIVE
   Chỉ sửa 2 phần được yêu cầu.
   1) Menu chạy theo trang khi cuộn, không cố định viewport.
   2) Chủ đề nổi bật responsive, không ép chữ thành từng ký tự.
   ========================================================== */
@media (max-width:1100px){
  /* Menu nằm theo header/document nên sẽ cuộn cùng trang. */
  .mobile-menu{
    position:absolute!important;
    top:37px!important;
    right:14px!important;
    transform:none!important;
    z-index:12005!important;
  }

  /* Tablet/iPad: 2 cột, đủ rộng cho icon + nội dung. */
  .topic-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
    width:100%!important;
  }
  .topic-card{
    width:100%!important;
    min-width:0!important;
    min-height:96px!important;
    height:auto!important;
    padding:12px 14px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:12px!important;
    overflow:hidden!important;
  }
  .topic-card .topic-icon{
    flex:0 0 52px!important;
    width:52px!important;
    height:52px!important;
    min-width:52px!important;
    min-height:52px!important;
  }
  .topic-card>span:last-child{
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
  }
  .topic-card strong,
  .topic-card small{
    width:auto!important;
    max-width:100%!important;
    min-width:0!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
    white-space:normal!important;
    writing-mode:horizontal-tb!important;
    text-orientation:mixed!important;
  }
  .topic-card strong{
    font-size:14px!important;
    line-height:1.3!important;
    margin-bottom:4px!important;
  }
  .topic-card small{
    font-size:12px!important;
    line-height:1.4!important;
  }
}

@media (max-width:600px){
  .mobile-menu{
    top:35px!important;
    right:10px!important;
  }
  .topic-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .topic-card{
    min-height:92px!important;
    padding:10px 11px!important;
    gap:9px!important;
  }
  .topic-card .topic-icon{
    flex-basis:46px!important;
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
    font-size:25px!important;
  }
  .topic-card strong{font-size:13px!important;line-height:1.28!important}
  .topic-card small{font-size:11px!important;line-height:1.35!important}
}

@media (max-width:380px){
  .topic-grid{gap:8px!important}
  .topic-card{padding:9px 8px!important;gap:7px!important;min-height:88px!important}
  .topic-card .topic-icon{
    flex-basis:42px!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    font-size:23px!important;
  }
  .topic-card strong{font-size:12px!important}
  .topic-card small{font-size:10px!important}
}

/* FINAL SMALL-SCREEN GRID FIX
   Keep quick category cards horizontal and readable on tablet/mobile.
   Only changes responsive columns for the category row. */
@media (max-width:1100px){
  .quick-links{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
  }
  .quick-card{
    width:100%!important;
    min-width:0!important;
    height:104px!important;
    min-height:104px!important;
    padding:12px 14px!important;
    gap:12px!important;
    flex-direction:row!important;
    align-items:center!important;
    overflow:hidden!important;
  }
  .quick-card>.quick-icon{
    flex:0 0 58px!important;
    width:58px!important;
    height:58px!important;
    min-width:58px!important;
    min-height:58px!important;
    font-size:29px!important;
  }
  .quick-card>span:last-child{
    flex:1 1 auto!important;
    min-width:0!important;
    width:auto!important;
    max-width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
  }
  .quick-card strong,
  .quick-card small{
    display:block!important;
    width:auto!important;
    max-width:100%!important;
    min-width:0!important;
    white-space:normal!important;
    writing-mode:horizontal-tb!important;
    text-orientation:mixed!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
    hyphens:none!important;
  }
  .quick-card strong{font-size:15px!important;line-height:1.3!important;margin-bottom:4px!important}
  .quick-card small{font-size:12px!important;line-height:1.4!important}
}

@media (max-width:600px){
  .quick-links{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }
  .quick-card{
    height:96px!important;
    min-height:96px!important;
    padding:9px 9px!important;
    gap:8px!important;
  }
  .quick-card>.quick-icon{
    flex:0 0 46px!important;
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
    font-size:24px!important;
  }
  .quick-card strong{font-size:13px!important;line-height:1.28!important}
  .quick-card small{font-size:10.5px!important;line-height:1.35!important}
}

@media (max-width:380px){
  .quick-links{gap:8px!important}
  .quick-card{height:90px!important;min-height:90px!important;padding:8px!important;gap:7px!important}
  .quick-card>.quick-icon{flex-basis:42px!important;width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;font-size:22px!important}
  .quick-card strong{font-size:12px!important}
  .quick-card small{font-size:10px!important}
}

/* =========================================================
   FOOTER RESPONSIVE REPAIR — 2026-10-03
   Chỉ áp dụng cho màn hình nhỏ; giữ nguyên footer desktop.
   ========================================================= */
@media (max-width: 900px){
  .site-footer{
    width:100%!important;
    max-width:none!important;
    margin:28px auto 0!important;
    padding:0 18px!important;
    border-radius:18px 18px 0 0!important;
  }
  .footer-main{
    width:100%!important;
    max-width:none!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:28px 24px!important;
    padding:28px 4px 24px!important;
  }
  .footer-brand,
  .footer-column{
    min-width:0!important;
    width:100%!important;
  }
  .footer-logo-image{
    width:min(100%,320px)!important;
    max-width:100%!important;
    height:auto!important;
  }
  .footer-logo-image img{
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    max-height:none!important;
  }
  .footer-brand p,
  .footer-column a,
  .footer-column p{
    max-width:100%!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
    white-space:normal!important;
  }
  .footer-column h3{
    max-width:100%!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    line-height:1.25!important;
  }
  .footer-social{flex-wrap:wrap!important;}
  .footer-bottom{
    padding:14px 4px 18px!important;
    line-height:1.5!important;
  }
}

@media (max-width: 600px){
  .site-footer{
    margin-top:24px!important;
    padding:0 16px!important;
    border-radius:16px 16px 0 0!important;
  }
  .footer-main{
    grid-template-columns:minmax(0,1fr)!important;
    gap:24px!important;
    padding:26px 2px 22px!important;
  }
  .footer-brand,
  .footer-column,
  .footer-contact{
    width:100%!important;
    min-width:0!important;
  }
  .footer-logo-image{
    width:min(100%,300px)!important;
  }
  .footer-brand p{
    max-width:100%!important;
    font-size:14px!important;
    line-height:1.55!important;
  }
  .footer-column h3{
    font-size:18px!important;
    line-height:1.3!important;
    margin-bottom:6px!important;
  }
  .footer-column a,
  .footer-column p{
    font-size:14px!important;
    line-height:1.55!important;
  }
  .footer-social{margin-top:12px!important;}
}


/* DESKTOP SEARCH — keep the original inline header search.  Opening/focusing it
   must not blur the page or move the header controls.  Responsive search below
   1100px keeps its existing focused/blur treatment. */
@media (min-width:1101px){
  #desktopSearchBox.search-active{
    position:relative!important;
    top:auto!important;
    right:auto!important;
    left:auto!important;
    transform:none!important;
    width:305px!important;
    height:42px!important;
    min-height:42px!important;
    margin:0!important;
    padding:0 10px 0 17px!important;
    display:flex!important;
    align-items:center!important;
    box-sizing:border-box!important;
    background:#fff!important;
    border:1px solid #0d62bd!important;
    border-radius:24px!important;
    box-shadow:none!important;
    z-index:auto!important;
  }
  #desktopSearchBox.search-active .global-search{
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    height:auto!important;
    line-height:normal!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    outline:0!important;
    background:transparent!important;
    font-size:13px!important;
    color:#1b4b88!important;
  }
  #desktopSearchBox.search-active .global-search-btn{
    flex:0 0 auto!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    color:#064eaa!important;
    display:block!important;
    font-size:28px!important;
  }
  body.search-open::before{display:none!important;}
  body.search-open .page,
  body.search-open .main-nav,
  body.search-open .site-header,
  body.search-open .site-header .brand,
  body.search-open .desktop-actions,
  body.search-open .desktop-actions .auth-entry,
  body.search-open .desktop-actions .account-button{
    filter:none!important;
    opacity:1!important;
  }
}

/* ==========================================================
   DESKTOP SEARCH SUGGESTIONS — FINAL LAYER
   Chỉ áp dụng màn hình lớn (>1100px).
   Cho danh sách gợi ý nổi lên trên NAV/Hero, không bị header
   cắt mất. Không thay đổi vị trí hay kích thước Search.
   ========================================================== */
@media (min-width:1101px){
  .site-header{
    overflow:visible!important;
    position:relative!important;
    z-index:20!important;
  }
  .desktop-actions{
    position:relative!important;
    z-index:1000!important;
  }
  .desktop-actions .searchbox{
    position:relative!important;
    z-index:1001!important;
    overflow:visible!important;
  }
  .desktop-actions .search-suggestions{
    position:absolute!important;
    top:calc(100% + 7px)!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    max-height:300px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    z-index:10000!important;
  }
  .main-nav{
    position:relative!important;
    z-index:10!important;
  }
}

/* ==========================================================
   FINAL PAGE SCROLL LOCK — SEARCH + ACCOUNT MODALS
   Giữ nguyên vị trí trang nền khi Search/User mở.
   Không dùng overflow:hidden đơn thuần vì Safari/Chrome mobile
   có thể làm trang nhảy ngang hoặc mất vị trí cuộn.
   ========================================================== */
body.page-scroll-locked{
  position:fixed!important;
  left:0!important;
  right:0!important;
  top:var(--page-scroll-lock-y, 0px)!important;
  width:100%!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
html:has(body.page-scroll-locked),
body.page-scroll-locked{
  overscroll-behavior:none!important;
}

/* ==========================================================
   AI CHAT MODAL LAYER
   Khi mở trợ lý AI: khóa cuộn trang nền và làm mờ toàn bộ giao diện,
   trong khi khung AI vẫn sắc nét, nổi bật và thao tác bình thường.
   ========================================================== */
body.ai-open::before{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(35,67,100,.28);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  pointer-events:auto;
  z-index:11900;
}
body.ai-open .site-header,
body.ai-open .main-nav,
body.ai-open .page,
body.ai-open .menu-backdrop,
body.ai-open .mobile-menu{
  filter:blur(4px);
  opacity:.72;
}
body.ai-open .floating-tools{
  z-index:12010!important;
}
body.ai-open .back-top-btn{
  filter:blur(4px);
  opacity:.35;
  pointer-events:none!important;
}
body.ai-open .ai-float-btn{
  filter:drop-shadow(0 7px 13px rgba(15,92,165,.25));
}
.ai-chatbox{
  z-index:12020!important;
}
.ai-settings-panel{
  z-index:12030!important;
}
@media (max-width:600px){
  body.ai-open .site-header,
  body.ai-open .main-nav,
  body.ai-open .page{
    filter:blur(4px);
    opacity:.72;
  }
  .ai-chatbox{
    right:14px!important;
    bottom:86px!important;
    width:calc(100vw - 28px)!important;
    height:min(590px,calc(100vh - 105px))!important;
    min-height:360px!important;
  }
}


/* === User banner replacement: soft, web-style slider === */
.banner-slider{touch-action:pan-y;isolation:isolate;background:#dff4ff}
.banner-track{height:100%;width:100%;display:flex;will-change:transform;transform:translate3d(0,0,0);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.banner-slide{position:relative;flex:0 0 100%;width:100%;height:100%;overflow:hidden;background:linear-gradient(135deg,#e8f7ff,#d9f0ff)}
.banner-slide img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center;user-select:none;-webkit-user-drag:none;pointer-events:none}
.banner-slider .slide-arrow{z-index:5}
.banner-slider .slide-dots{z-index:6}
.banner-slider .dot{transition:transform .18s ease,background .18s ease}
.banner-slider .dot.selected{transform:scale(1.12)}
@media (max-width:900px){
  .banner-slide img{object-position:center center}
}
@media (max-width:600px){
  .banner-slide img{object-position:center center}
}


/* Banner artwork: purpose-built 1800x374 ratio, preserving all text and artwork. */
.banner-slide{background:linear-gradient(135deg,#e9f7ff,#dff3ff);}
.banner-slide img{object-fit:fill;object-position:center center;width:100%;height:100%;}
@media (max-width:900px){
  .hero{height:260px;}
}
@media (max-width:600px){
  .hero{height:235px;}
}
@media (max-width:420px){
  .hero{height:220px;}
}

/* ==========================================================
   FINAL IMAGE RESPONSIVE / ANTI-DISTORTION PATCH
   Chỉ xử lý cách ảnh co giãn; không đổi nội dung hay bố cục khác.
   ========================================================== */

/* Ảnh nói chung: luôn co theo khung, không bị kéo méo. */
img{
  max-width:100%;
  image-rendering:auto;
}

/* Logo: giữ nguyên tỷ lệ ở mọi kích thước màn hình. */
.brand-logo-image img,
.footer-logo-image img,
.modal-logo img{
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:contain;
  object-position:center;
}

/* AI/chat image: không kéo giãn chiều cao. */
.ai-float-image{
  width:72px;
  height:auto!important;
  max-width:100%;
  object-fit:contain!important;
}

/* ----------------------------------------------------------
   BANNER: giữ nguyên toàn bộ ảnh, không stretch/crop.
   Tỷ lệ bộ banner mới = 1600 / 356.
   ---------------------------------------------------------- */
.banner-slider.hero{
  height:auto!important;
  min-height:0!important;
  aspect-ratio:1600 / 356!important;
}
.banner-track,
.banner-slide{
  height:100%!important;
  min-height:0!important;
}
.banner-slide img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:#dff4ff;
  transform:none!important;
}

/* Ảnh cover của bài hát: giữ đúng tỷ lệ ảnh, không kéo méo.
   object-fit: cover chỉ cắt phần dư khi tỷ lệ ảnh khác khung,
   tuyệt đối không làm biến dạng ảnh. */
.song-thumb img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  image-rendering:auto!important;
}

/* Thumbnail nhỏ ở danh sách mới nhất cũng giữ tỷ lệ. */
.mini-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  image-rendering:auto;
}

/* Các ảnh nằm trong nội dung tài liệu/lesson nếu có. */
.simple-tile img,
.lesson-upload-list img,
.user-song img,
.simple-page img,
.management-page img{
  max-width:100%;
  height:auto;
  object-fit:contain;
}

/* Tablet/mobile: banner tự tính chiều cao theo đúng tỷ lệ ảnh,
   không dùng các chiều cao cố định cũ gây méo ảnh. */
@media (max-width:1100px){
  .banner-slider.hero{
    width:100%!important;
    height:auto!important;
    aspect-ratio:1600 / 356!important;
  }
  .banner-slide img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
  }
}

@media (max-width:760px){
  .banner-slider.hero{
    aspect-ratio:1600 / 356!important;
  }
}

@media (max-width:420px){
  .banner-slider.hero{
    aspect-ratio:1600 / 356!important;
  }
}

/* ==========================================================
   REVIEW / STAR RATING — GIAO DIỆN SAO VÀNG
   ========================================================== */
.review-summary{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.review-summary strong{font-size:24px;color:#123f7c}
.review-summary small{font-size:16px;color:#315b8e}
.stars-static{
  color:#f7b500!important;
  letter-spacing:2px;
  white-space:nowrap;
  font-size:24px;
  text-shadow:0 1px 0 #d59600;
}
.star-picker{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin:10px 0 16px;
}
.star-picker button{
  appearance:none;
  -webkit-appearance:none;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  width:44px;
  height:44px;
  padding:0!important;
  margin:0;
  border-radius:50%;
  color:#c8d4df;
  font-size:39px;
  line-height:44px;
  font-family:Arial,sans-serif;
  cursor:pointer;
  transition:transform .15s ease,color .15s ease,filter .15s ease;
}
.star-picker button:hover,
.star-picker button:focus-visible{
  color:#ffc107!important;
  transform:scale(1.12);
  filter:drop-shadow(0 2px 3px rgba(247,181,0,.35));
}
.star-picker button.selected{
  color:#ffc107!important;
  text-shadow:0 1px 0 #d79600,0 2px 5px rgba(247,181,0,.28);
}
.star-picker button.selected:hover{color:#ffb300!important}
@media (max-width:600px){
  .star-picker{gap:3px}
  .star-picker button{width:40px;height:40px;font-size:35px;line-height:40px}
  .stars-static{font-size:21px}
}

/* ==========================================================
   FINAL HEADER USER-ICON FIX — 2026-10-04
   Trên tablet/mobile, tài khoản đăng nhập chỉ hiển thị biểu
   tượng người trong nút tròn. Ẩn hoàn toàn tên/chào/chevron
   để không bị chữ "Xin chào / tên user" chồng lên icon.
   Không thay đổi giao diện desktop.
   ========================================================== */
@media (max-width:1100px){
  .desktop-actions .account-button:not(.hidden){
    position:relative!important;
    overflow:hidden!important;
    font-size:0!important;
    line-height:0!important;
    text-indent:-9999px!important;
  }
  .desktop-actions .account-button:not(.hidden) .account-greeting,
  .desktop-actions .account-button:not(.hidden) .account-name,
  .desktop-actions .account-button:not(.hidden) .account-chevron{
    display:none!important;
    visibility:hidden!important;
    width:0!important;
    height:0!important;
    margin:0!important;
    padding:0!important;
  }
  .desktop-actions .account-button:not(.hidden)::before{
    content:""!important;
    display:block!important;
    width:19px!important;
    height:19px!important;
    margin:0!important;
    padding:0!important;
    background:
      radial-gradient(circle at 50% 30%,#fff 0 4px,transparent 4.5px),
      radial-gradient(ellipse at 50% 100%,#fff 0 7px,transparent 7.5px)!important;
    border-radius:50%!important;
    text-indent:0!important;
  }
}

/* FINAL HEADER ICON SPACING FIX — 2026-10-04
   Fix trường hợp auth-entry bị CSS responsive !important làm hiện
   đồng thời với account-button, gây chồng 2 icon người.
   Đồng thời tạo khoảng cách cố định giữa Search / User / Menu.
*/
@media (max-width:1200px){
  .desktop-actions .auth-entry.hidden,
  .desktop-actions .account-button.hidden{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  .desktop-actions{
    right:60px!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    gap:0!important;
  }

  .mobile-search,
  .mobile-search.is-open{
    right:116px!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
  }

  .mobile-menu{
    right:10px!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
  }
}

@media (max-width:420px){
  .desktop-actions{
    right:55px!important;
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    max-width:38px!important;
  }
  .mobile-search,
  .mobile-search.is-open{
    right:103px!important;
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
  }
  .mobile-menu{
    right:7px!important;
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
  }
}

/* USER NAME UNDER ICON — 2026-10-04
   Trên tablet/mobile: icon người + tên tài khoản nằm ngay bên dưới,
   không chồng lên Search/Menu. Desktop giữ nguyên kiểu tài khoản hiện tại.
*/
@media (max-width:1200px){
  .desktop-actions{
    right:52px!important;
    width:60px!important;
    height:68px!important;
    min-width:60px!important;
    max-width:60px!important;
    overflow:visible!important;
  }
  .desktop-actions .account-button:not(.hidden){
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:3px!important;
    width:60px!important;
    height:68px!important;
    min-width:60px!important;
    max-width:60px!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
    font-size:11px!important;
    line-height:1.1!important;
    text-indent:0!important;
    color:#0756b4!important;
  }
  .desktop-actions .account-button:not(.hidden)::before{
    content:""!important;
    display:block!important;
    flex:0 0 42px!important;
    width:42px!important;
    height:42px!important;
    margin:0!important;
    border:2px solid #fff!important;
    border-radius:50%!important;
    background-color:#0861c9!important;
    background-image:
      radial-gradient(circle at 50% 31%,#fff 0 4.5px,transparent 5px),
      radial-gradient(ellipse at 50% 100%,#fff 0 8px,transparent 8.5px)!important;
    box-shadow:0 3px 9px rgba(7,86,181,.24)!important;
    text-indent:0!important;
  }
  .desktop-actions .account-button:not(.hidden) .account-greeting,
  .desktop-actions .account-button:not(.hidden) .account-chevron{
    display:none!important;
  }
  .desktop-actions .account-button:not(.hidden) .account-name{
    display:block!important;
    width:60px!important;
    max-width:60px!important;
    height:17px!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    text-align:center!important;
    color:#0756b4!important;
    font-size:11px!important;
    line-height:17px!important;
    font-weight:800!important;
    text-indent:0!important;
  }
}

@media (max-width:420px){
  .desktop-actions{
    right:53px!important;
    width:48px!important;
    height:61px!important;
    min-width:48px!important;
    max-width:48px!important;
  }
  .desktop-actions .account-button:not(.hidden){
    width:48px!important;
    height:61px!important;
    min-width:48px!important;
    max-width:48px!important;
  }
  .desktop-actions .account-button:not(.hidden)::before{
    flex-basis:38px!important;
    width:38px!important;
    height:38px!important;
    background-image:
      radial-gradient(circle at 50% 31%,#fff 0 4px,transparent 4.5px),
      radial-gradient(ellipse at 50% 100%,#fff 0 7px,transparent 7.5px)!important;
  }
  .desktop-actions .account-button:not(.hidden) .account-name{
    width:48px!important;
    max-width:48px!important;
    font-size:10px!important;
  }
}

/* ==========================================================
   FINAL USER LABEL + HEADER ALIGNMENT FIX — 2026-10-04
   User: icon ở trên, tên user nằm ngay dưới icon.
   Không để auth/user/menu chồng nhau trên tablet/mobile.
   ========================================================== */
@media (max-width:1200px){
  .site-header{overflow:visible!important;}
  .header-inner{position:relative!important;overflow:visible!important;}

  /* User control: cố định giữa Search và Menu */
  .desktop-actions{
    position:absolute!important;
    top:18px!important;
    right:58px!important;
    width:58px!important;
    height:72px!important;
    min-width:58px!important;
    max-width:58px!important;
    margin:0!important;
    padding:0!important;
    display:block!important;
    overflow:visible!important;
    z-index:10020!important;
  }
  .desktop-actions>.searchbox{display:none!important;}
  .desktop-actions>.auth-entry.hidden{display:none!important;}

  .desktop-actions .account-button:not(.hidden){
    position:absolute!important;
    inset:0 auto auto 0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:2px!important;
    width:58px!important;
    height:72px!important;
    min-width:58px!important;
    max-width:58px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
    font-size:11px!important;
    line-height:1!important;
    text-indent:0!important;
    white-space:nowrap!important;
    color:#0756b4!important;
  }

  .desktop-actions .account-button:not(.hidden)::before{
    content:""!important;
    display:block!important;
    flex:0 0 48px!important;
    width:48px!important;
    height:48px!important;
    margin:0!important;
    border:2px solid #fff!important;
    border-radius:50%!important;
    background-color:#0861c9!important;
    background-image:
      radial-gradient(circle at 50% 31%,#fff 0 5px,transparent 5.5px),
      radial-gradient(ellipse at 50% 100%,#fff 0 9px,transparent 9.5px)!important;
    box-shadow:0 3px 10px rgba(7,86,181,.25)!important;
  }

  .desktop-actions .account-button:not(.hidden) .account-greeting,
  .desktop-actions .account-button:not(.hidden) .account-chevron{
    display:none!important;
  }

  .desktop-actions .account-button:not(.hidden) .account-name{
    display:block!important;
    width:58px!important;
    max-width:58px!important;
    height:18px!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    text-align:center!important;
    color:#0756b4!important;
    font-size:11px!important;
    line-height:18px!important;
    font-weight:800!important;
    text-indent:0!important;
  }

  /* Search + User + Menu cùng một trục */
  .mobile-search,
  .mobile-search.is-open{
    right:122px!important;
    z-index:10021!important;
  }
  .mobile-menu{
    right:10px!important;
    z-index:10022!important;
  }
}

@media (max-width:420px){
  .desktop-actions{
    top:16px!important;
    right:51px!important;
    width:50px!important;
    height:64px!important;
    min-width:50px!important;
    max-width:50px!important;
  }
  .desktop-actions .account-button:not(.hidden){
    width:50px!important;
    height:64px!important;
    min-width:50px!important;
    max-width:50px!important;
  }
  .desktop-actions .account-button:not(.hidden)::before{
    flex-basis:40px!important;
    width:40px!important;
    height:40px!important;
    background-image:
      radial-gradient(circle at 50% 31%,#fff 0 4px,transparent 4.5px),
      radial-gradient(ellipse at 50% 100%,#fff 0 7.5px,transparent 8px)!important;
  }
  .desktop-actions .account-button:not(.hidden) .account-name{
    width:50px!important;
    max-width:50px!important;
    font-size:10px!important;
    line-height:17px!important;
  }
  .mobile-search,
  .mobile-search.is-open{right:106px!important;}
  .mobile-menu{right:7px!important;}
}


/* ==========================================================
   MOBILE / YOUTUBE-LIKE RESPONSIVE LAYOUT — FINAL
   Chỉ áp dụng cho màn hình nhỏ. Desktop/tablet lớn giữ nguyên.
   - Search ở header phía trên
   - User + Menu chuyển xuống thanh điều hướng cố định phía dưới
   - Có thêm khoảng thở cho nội dung, không che card/footer
   ========================================================== */
.mobile-bottom-nav{display:none}

@media (max-width:760px){
  body{padding-bottom:72px!important;}
  .site-header{position:relative!important;z-index:100!important;}

  /* Header gọn: logo trái, chỉ giữ kính lúp ở trên. */
  .desktop-actions{display:none!important;}
  .mobile-search{display:block!important;right:12px!important;top:24px!important;z-index:10030!important;}
  .mobile-search .mobile-search-toggle{box-shadow:0 3px 10px rgba(7,86,181,.22)!important;}
  .mobile-search.is-open .searchbox{z-index:12040!important;}

  /* Thanh dưới kiểu app/mobile: Home — User — Menu. */
  .mobile-bottom-nav{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    height:66px!important;
    min-height:66px!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    align-items:stretch!important;
    padding:6px 10px calc(6px + env(safe-area-inset-bottom))!important;
    background:rgba(255,255,255,.97)!important;
    border-top:1px solid #d7e8f7!important;
    box-shadow:0 -5px 18px rgba(21,76,125,.12)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
    z-index:12050!important;
  }
  .mobile-bottom-item{
    appearance:none!important;
    border:0!important;
    background:transparent!important;
    color:#245a91!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    min-width:0!important;
    padding:2px 5px!important;
    font:700 11px/1.15 inherit!important;
    cursor:pointer!important;
    -webkit-tap-highlight-color:transparent!important;
  }
  .mobile-bottom-item:active{transform:scale(.96)!important;}
  .mobile-bottom-item.active{color:#0861c9!important;}
  .mobile-bottom-icon{
    position:relative!important;
    display:grid!important;
    place-items:center!important;
    width:30px!important;
    height:30px!important;
    color:#0861c9!important;
    font-size:25px!important;
    line-height:1!important;
  }
  .home-icon{font-family:Arial,sans-serif!important;font-weight:800!important;transform:translateY(-1px)!important;}
  .user-icon{
    width:28px!important;height:28px!important;border-radius:50%!important;
    background:#0861c9!important;border:2px solid #fff!important;
    box-shadow:0 2px 7px rgba(7,86,181,.24)!important;
  }
  .user-icon:before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;position:absolute;top:5px;left:50%;transform:translateX(-50%);}
  .user-icon:after{content:"";width:13px;height:8px;border-radius:9px 9px 4px 4px;background:#fff;position:absolute;bottom:4px;left:50%;transform:translateX(-50%);}
  .menu-icon{display:flex!important;flex-direction:column!important;gap:4px!important;width:30px!important;height:30px!important;border-radius:50%!important;background:#0861c9!important;border:2px solid #fff!important;box-shadow:0 2px 7px rgba(7,86,181,.24)!important;padding:0!important;}
  .menu-icon i{display:block!important;width:16px!important;height:2px!important;background:#fff!important;border-radius:3px!important;}
  .mobile-bottom-label{max-width:100px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}

  /* Hamburger cũ không còn nổi ở góc phải trên. Chức năng vẫn giữ nguyên qua nút Menu dưới. */
  .mobile-menu{display:none!important;}

  /* Khi mở menu, bottom bar nằm sau drawer. */
  body.menu-open .mobile-bottom-nav{z-index:11950!important;filter:blur(4px)!important;opacity:.55!important;pointer-events:none!important;}

  /* Search mở: thanh search nổi phía trên, không đẩy nội dung. */
  body.search-open .mobile-bottom-nav{filter:blur(4px)!important;opacity:.65!important;pointer-events:none!important;}

  /* Không để player cố định đè thanh điều hướng dưới. */
  .inline-audio-player{bottom:78px!important;}

  /* Các card/section có thêm khoảng thở cuối trang. */
  .page{padding-bottom:18px!important;}
  .site-footer{margin-bottom:4px!important;}
}

@media (max-width:420px){
  body{padding-bottom:70px!important;}
  .mobile-bottom-nav{height:64px!important;min-height:64px!important;padding-left:6px!important;padding-right:6px!important;}
  .mobile-bottom-item{font-size:10px!important;}
  .mobile-bottom-icon{width:28px!important;height:28px!important;}
  .user-icon{width:26px!important;height:26px!important;}
  .menu-icon{width:28px!important;height:28px!important;}
  .menu-icon i{width:15px!important;}
  .inline-audio-player{bottom:74px!important;}
}

/* ==========================================================
   FINAL TABLET / MOBILE APP LAYOUT FIX — 2026-10-04
   - iPad/tablet <= 1100px dùng layout kiểu mobile giống app.
   - Search chỉ nằm trên header.
   - User + Menu nằm thanh điều hướng dưới.
   - Menu drawer luôn có nút X đóng ở góc phải trên.
   - Khóa cuộn nền khi Search/Menu đang mở.
   - Không thay đổi desktop > 1100px.
   ========================================================== */
@media (max-width:1100px){
  body{padding-bottom:76px!important;}
  .site-header{position:relative!important;z-index:100!important;overflow:visible!important;}
  .header-inner{position:relative!important;overflow:visible!important;}

  /* Desktop account/search area trên tablet/mobile không chiếm chỗ nữa. */
  .desktop-actions{display:none!important;}

  /* Search: cố định gọn ở góc phải phía trên, không lệch theo logo. */
  .mobile-search{
    display:block!important;
    position:absolute!important;
    top:22px!important;
    right:18px!important;
    left:auto!important;
    width:46px!important;
    height:46px!important;
    z-index:10030!important;
  }
  .mobile-search .mobile-search-toggle{
    display:grid!important;
    place-items:center!important;
    width:46px!important;
    height:46px!important;
    margin:0!important;
    padding:0!important;
    border:2px solid #fff!important;
    border-radius:50%!important;
    background:#0861c9!important;
    color:#fff!important;
    box-shadow:0 3px 10px rgba(7,86,181,.25)!important;
    font-size:25px!important;
    line-height:1!important;
  }
  .mobile-search.is-open{width:auto!important;left:16px!important;right:16px!important;top:22px!important;height:52px!important;}
  .mobile-search.is-open .mobile-search-toggle{
    position:absolute!important;
    right:4px!important;
    top:4px!important;
    width:44px!important;
    height:44px!important;
    border:0!important;
    background:transparent!important;
    color:#0758b8!important;
    box-shadow:none!important;
    font-size:30px!important;
    z-index:12041!important;
  }
  .mobile-search.is-open .searchbox{
    position:fixed!important;
    top:22px!important;
    left:16px!important;
    right:16px!important;
    width:auto!important;
    height:52px!important;
    min-height:52px!important;
    transform:none!important;
    margin:0!important;
    padding:0 50px 0 18px!important;
    display:flex!important;
    align-items:center!important;
    border:2px solid #9dcef4!important;
    border-radius:28px!important;
    background:#fff!important;
    box-shadow:0 12px 32px rgba(7,76,145,.28)!important;
    z-index:12040!important;
  }
  .mobile-search.is-open .searchbox input{
    flex:1 1 auto!important;
    width:auto!important;
    height:48px!important;
    line-height:48px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    outline:0!important;
    font-size:16px!important;
    background:transparent!important;
  }
  .mobile-search.is-open .searchbox .global-search-btn{display:none!important;}

  /* Main nav is a drawer. Closed = hidden, open = full screen. */
  .main-nav{display:block!important;}

  /* The old top hamburger is used as the actual close X while drawer is open. */
  .mobile-menu{
    display:none!important;
    position:fixed!important;
    top:18px!important;
    right:18px!important;
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
    padding:0!important;
    border:2px solid #fff!important;
    border-radius:50%!important;
    background:#0861c9!important;
    box-shadow:0 3px 10px rgba(7,86,181,.28)!important;
    z-index:12060!important;
    align-items:center!important;
    justify-content:center!important;
    flex-direction:column!important;
    gap:4px!important;
  }
  body.menu-open .mobile-menu{display:flex!important;}
  body.menu-open .mobile-menu span{width:21px!important;height:3px!important;background:#fff!important;border-radius:4px!important;}
  body.menu-open .mobile-menu span:nth-child(1){transform:translateY(7px) rotate(45deg)!important;}
  body.menu-open .mobile-menu span:nth-child(2){opacity:0!important;}
  body.menu-open .mobile-menu span:nth-child(3){transform:translateY(-7px) rotate(-45deg)!important;}

  /* Drawer has room below the close button. */
  .main-nav.open{transform:translateX(0)!important;visibility:visible!important;pointer-events:auto!important;}

  /* Fixed bottom app bar for phone + iPad/tablet. */
  .mobile-bottom-nav{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    height:74px!important;
    min-height:74px!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    align-items:stretch!important;
    padding:6px 12px calc(6px + env(safe-area-inset-bottom))!important;
    background:rgba(255,255,255,.98)!important;
    border-top:1px solid #d7e8f7!important;
    box-shadow:0 -5px 18px rgba(21,76,125,.13)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
    z-index:12050!important;
  }
  .mobile-bottom-item{font-size:12px!important;}
  .mobile-bottom-icon{width:32px!important;height:32px!important;}
  .user-icon{width:30px!important;height:30px!important;}
  .menu-icon{width:30px!important;height:30px!important;}

  /* Never leave the bottom bar above an opened drawer. */
  body.menu-open .mobile-bottom-nav,
  body.search-open .mobile-bottom-nav{filter:blur(4px)!important;opacity:.55!important;pointer-events:none!important;}

  /* Lock background while overlays are open. */
  body.menu-open, body.search-open{overflow:hidden!important;}

  .inline-audio-player{bottom:84px!important;}
}

@media (max-width:600px){
  .mobile-search{top:18px!important;right:12px!important;width:42px!important;height:42px!important;}
  .mobile-search .mobile-search-toggle{width:42px!important;height:42px!important;font-size:23px!important;}
  .mobile-search.is-open{top:14px!important;left:10px!important;right:10px!important;}
  .mobile-search.is-open .searchbox{top:14px!important;left:10px!important;right:10px!important;height:50px!important;min-height:50px!important;}
  .mobile-search.is-open .mobile-search-toggle{top:3px!important;right:3px!important;width:42px!important;height:42px!important;font-size:29px!important;}
  .mobile-menu{top:14px!important;right:12px!important;width:44px!important;height:44px!important;}
  .mobile-bottom-nav{height:68px!important;min-height:68px!important;padding-left:6px!important;padding-right:6px!important;}
  .inline-audio-player{bottom:78px!important;}
}

@media (max-width:420px){
  .mobile-bottom-nav{height:66px!important;min-height:66px!important;}
  .mobile-bottom-item{font-size:10px!important;}
  .mobile-bottom-icon{width:28px!important;height:28px!important;}
  .user-icon{width:27px!important;height:27px!important;}
  .menu-icon{width:28px!important;height:28px!important;}
}

/* FINAL ICON ALIGNMENT FIX — mobile/tablet
   Search is vertically centered in the header; bottom menu icon always
   renders three visible white bars independent of inherited icon styles.
*/
@media (max-width:1100px){
  .mobile-search{
    top:50%!important;
    transform:translateY(-50%)!important;
    margin:0!important;
  }
  .mobile-search.is-open{
    top:22px!important;
    transform:none!important;
  }
  .mobile-search.is-open .searchbox{top:0!important;}

  .mobile-bottom-nav .menu-icon{
    position:relative!important;
    display:block!important;
    flex:none!important;
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    min-height:32px!important;
    padding:0!important;
    border-radius:50%!important;
    background-color:#0861c9!important;
    background-image:
      linear-gradient(#fff,#fff),
      linear-gradient(#fff,#fff),
      linear-gradient(#fff,#fff)!important;
    background-repeat:no-repeat!important;
    background-size:17px 2.5px!important;
    background-position:center 8px, center 14.5px, center 21px!important;
    border:2px solid #fff!important;
    box-shadow:0 2px 7px rgba(7,86,181,.24)!important;
  }
  .mobile-bottom-nav .menu-icon i{display:none!important;}
}

@media (max-width:600px){
  .mobile-search{top:50%!important;transform:translateY(-50%)!important;}
  .mobile-search.is-open{top:14px!important;transform:none!important;}
  .mobile-bottom-nav .menu-icon{
    width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;
    background-size:15px 2px!important;
    background-position:center 6.5px, center 13px, center 19.5px!important;
  }
}

/* FINAL MOBILE OVERLAY FIX — 2026-10-04
   1) Hide Safari/Chrome native search-clear X so the single custom close X remains.
   2) Keep the floating AI/back-to-top tools safely above the fixed bottom app bar.
*/
@media (max-width:1100px){
  .mobile-search .global-search::-webkit-search-cancel-button,
  .mobile-search .global-search::-webkit-search-decoration{
    -webkit-appearance:none!important;
    appearance:none!important;
    display:none!important;
  }
  .mobile-search .global-search{
    -webkit-appearance:none!important;
    appearance:none!important;
  }
  .floating-tools{
    right:14px!important;
    bottom:calc(76px + env(safe-area-inset-bottom) + 14px)!important;
    z-index:12100!important;
  }
  .ai-chatbox{
    z-index:12110!important;
    bottom:calc(76px + env(safe-area-inset-bottom) + 14px)!important;
  }
}
@media (max-width:600px){
  .floating-tools{
    right:12px!important;
    bottom:calc(68px + env(safe-area-inset-bottom) + 12px)!important;
  }
  .ai-chatbox{
    right:12px!important;
    width:calc(100vw - 24px)!important;
    bottom:calc(68px + env(safe-area-inset-bottom) + 12px)!important;
  }
}

/* FINAL SEARCH POSITION — hạ thanh tìm kiếm xuống một chút trên mobile/tablet.
   Không thay đổi vị trí icon kính lúp khi đóng. */
@media (max-width:1100px){
  .mobile-search.is-open .searchbox{
    top:32px!important;
  }
}
@media (max-width:760px){
  .mobile-search.is-open .searchbox{
    top:28px!important;
  }
}
@media (max-width:600px){
  .mobile-search.is-open .searchbox{
    top:28px!important;
  }
}
@media (max-width:420px){
  .mobile-search.is-open .searchbox{
    top:28px!important;
  }
}


/* FINAL SEARCH CLOSE-X POSITION — 2026-10-04
   Khi Search mở trên tablet/mobile: đưa X ra phía trên mép phải của ô Search,
   không chồng vào đường viền hoặc nằm bên trong ô nhập. */
@media (max-width:1100px){
  .mobile-search.is-open .searchbox{top:40px!important;}
  .mobile-search.is-open .mobile-search-toggle{position:fixed!important;top:clamp(0px,0.5vh,4px)!important;right:18px!important;width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;color:#0758b8!important;box-shadow:none!important;font-size:31px!important;line-height:30px!important;z-index:12060!important;}
}
@media (max-width:600px){
  .mobile-search.is-open .searchbox{top:40px!important;}
  .mobile-search.is-open .mobile-search-toggle{right:12px!important;}
}


/* ==========================================================
   FINAL AUDIO PLAYER RESPONSIVE FIX — 2026-10-04
   - Player luôn co giãn theo viewport, không tràn ngang.
   - Trên màn hình nhỏ bố cục tự thu gọn, không kéo lệch các nút.
   - Khi player mở, cụm AI + Back-to-top được nâng lên tránh bị che.
   - Thanh điều hướng dưới dùng nền opacity 1 để nội dung dễ đọc.
   ========================================================== */
.inline-audio-player{
  box-sizing:border-box!important;
  width:min(980px,calc(100vw - 28px))!important;
  max-width:calc(100vw - 28px)!important;
  overflow:hidden!important;
}

@media (max-width:1100px){
  .mobile-bottom-nav{
    background:rgba(255,255,255,1)!important;
    opacity:1!important;
  }
  .inline-audio-player{
    left:14px!important;
    right:14px!important;
    width:auto!important;
    max-width:none!important;
    transform:none!important;
    bottom:84px!important;
    grid-template-columns:minmax(0,1fr) auto minmax(90px,.8fr) 28px!important;
    gap:9px!important;
    padding:10px 12px!important;
  }
  .inline-track{min-width:0!important;overflow:hidden!important;}
  .inline-track-meta{min-width:0!important;overflow:hidden!important;}
  .inline-track-meta strong{max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
  .inline-controls{gap:3px!important;white-space:nowrap!important;}
  .inline-controls button{padding:4px!important;font-size:16px!important;}
  .inline-controls .inline-toggle{width:38px!important;height:38px!important;}
  .inline-wave-wrap{min-width:0!important;overflow:hidden!important;}
  .inline-volume{display:none!important;}
  .inline-close{font-size:22px!important;padding:2px!important;}

  /* Player-open state lifts floating utilities above the player. */
  body.audio-player-open .floating-tools{
    bottom:calc(84px + 92px + env(safe-area-inset-bottom) + 12px)!important;
  }
  body.audio-player-open .ai-chatbox{
    bottom:calc(84px + 92px + env(safe-area-inset-bottom) + 12px)!important;
  }
  /* AI sits above Back-to-top while the player is visible. */
  body.audio-player-open .ai-float-btn{order:1!important;}
  body.audio-player-open .back-top-btn{order:2!important;}
}

@media (max-width:600px){
  .inline-audio-player{
    left:8px!important;
    right:8px!important;
    bottom:78px!important;
    width:auto!important;
    max-width:none!important;
    grid-template-columns:minmax(0,1fr) auto minmax(72px,.55fr) 22px!important;
    gap:5px!important;
    padding:8px 8px!important;
    border-radius:15px!important;
  }
  .inline-note{width:40px!important;height:40px!important;font-size:24px!important;}
  .inline-track{gap:7px!important;}
  .inline-track-meta strong{font-size:13px!important;}
  .inline-track-meta small{font-size:10px!important;}
  .inline-controls button{font-size:14px!important;padding:3px!important;}
  .inline-controls .inline-toggle{width:36px!important;height:36px!important;font-size:14px!important;}
  .inline-wave{gap:2px!important;}
  .inline-wave i{width:2px!important;}
  .inline-times{font-size:9px!important;}
  .inline-close{font-size:20px!important;}

  body.audio-player-open .floating-tools{
    bottom:calc(78px + 82px + env(safe-area-inset-bottom) + 10px)!important;
  }
  body.audio-player-open .ai-chatbox{
    bottom:calc(78px + 82px + env(safe-area-inset-bottom) + 10px)!important;
  }
}

@media (max-width:420px){
  .inline-audio-player{
    left:6px!important;
    right:6px!important;
    grid-template-columns:minmax(0,1fr) auto 58px 20px!important;
    gap:3px!important;
    padding:7px 6px!important;
  }
  .inline-note{width:36px!important;height:36px!important;font-size:21px!important;}
  .inline-controls .inline-prev,.inline-controls .inline-next{display:none!important;}
  .inline-controls .inline-toggle{width:34px!important;height:34px!important;}
  body.audio-player-open .floating-tools{bottom:calc(78px + 78px + env(safe-area-inset-bottom) + 10px)!important;}
  body.audio-player-open .ai-chatbox{bottom:calc(78px + 78px + env(safe-area-inset-bottom) + 10px)!important;}
}

/* Audio player volume + mobile navigation alignment */
.inline-volume{display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;min-width:0!important;white-space:nowrap!important;}
.inline-volume-btn{border:0!important;background:transparent!important;color:#0861c9!important;font-size:20px!important;line-height:1!important;padding:2px!important;cursor:pointer!important;display:grid!important;place-items:center!important;width:25px!important;height:25px!important;}
.inline-volume input{width:72px!important;min-width:45px!important;accent-color:#0861c9!important;cursor:pointer!important;}
.home-icon svg{display:block!important;width:24px!important;height:24px!important;}
.home-icon{color:#0861c9!important;font-size:0!important;}
@media (max-width:700px){
  .inline-audio-player{width:calc(100% - 28px)!important;grid-template-columns:minmax(125px,1.45fr) auto minmax(115px,1.25fr) 66px 22px!important;gap:6px!important;padding:9px 10px!important;border-radius:17px!important;}
  .inline-track{gap:7px!important;}
  .inline-note{width:40px!important;height:40px!important;font-size:24px!important;}
  .inline-track-meta strong{font-size:13px!important;}
  .inline-controls{gap:2px!important;}
  .inline-controls button{font-size:16px!important;padding:4px!important;}
  .inline-controls .inline-toggle{width:38px!important;height:38px!important;font-size:14px!important;}
  .inline-wave{gap:2px!important;height:25px!important;}
  .inline-wave i{width:2px!important;max-height:22px!important;}
  .inline-volume{gap:3px!important;}
  .inline-volume-btn{font-size:18px!important;width:23px!important;height:23px!important;}
  .inline-volume input{width:40px!important;min-width:38px!important;}
  .inline-close{font-size:21px!important;padding:3px!important;}
}
@media (max-width:430px){
  .inline-audio-player{width:calc(100% - 20px)!important;grid-template-columns:minmax(105px,1.25fr) auto minmax(90px,1fr) 58px 20px!important;gap:4px!important;padding:8px!important;}
  .inline-note{width:36px!important;height:36px!important;font-size:22px!important;}
  .inline-track-meta strong{font-size:12px!important;}
  .inline-track-meta small,.inline-times{font-size:9px!important;}
  .inline-controls .inline-toggle{width:36px!important;height:36px!important;}
  .inline-controls button{font-size:14px!important;padding:3px!important;}
  .inline-volume-btn{font-size:17px!important;}
  .inline-volume input{width:32px!important;min-width:30px!important;}
}

/* AUDIO PLAYER + BOTTOM NAV REFINEMENT — 2026-10-04
   Volume control gọn hơn trên màn hình nhỏ; Home đồng bộ kiểu nút tròn xanh.
*/
@media (max-width:1100px){
  .inline-volume{gap:4px!important;font-size:14px!important;min-width:0!important;}
  .inline-volume input{width:52px!important;height:3px!important;min-width:52px!important;max-width:52px!important;}
  .inline-volume-btn{font-size:17px!important;padding:3px!important;width:26px!important;height:26px!important;display:grid!important;place-items:center!important;}
  .mobile-bottom-icon.home-icon{
    width:32px!important;height:32px!important;
    border-radius:50%!important;
    background:#0861c9!important;
    color:#fff!important;
    border:2px solid #fff!important;
    box-shadow:0 2px 7px rgba(7,86,181,.24)!important;
    font-size:0!important;
    transform:none!important;
  }
  .mobile-bottom-icon.home-icon svg{width:20px!important;height:20px!important;display:block!important;}
  .mobile-bottom-icon.home-icon svg path{stroke:#fff!important;stroke-width:2.25!important;fill:none!important;}
}
@media (max-width:600px){
  .inline-volume input{width:46px!important;min-width:46px!important;max-width:46px!important;height:3px!important;}
  .inline-volume-btn{width:24px!important;height:24px!important;font-size:16px!important;}
  .mobile-bottom-icon.home-icon{width:29px!important;height:29px!important;}
  .mobile-bottom-icon.home-icon svg{width:18px!important;height:18px!important;}
}
@media (max-width:420px){
  .inline-volume{gap:3px!important;}
  .inline-volume input{width:42px!important;min-width:42px!important;max-width:42px!important;}
  .mobile-bottom-icon.home-icon{width:28px!important;height:28px!important;}
  .mobile-bottom-icon.home-icon svg{width:17px!important;height:17px!important;}
}


/* === Final responsive audio-player layout === */
.inline-audio-player{
  position:fixed!important;
  z-index:120!important;
  grid-template-columns:minmax(145px,1.15fr) auto minmax(210px,1.55fr) 30px!important;
  align-items:center!important;
  gap:12px!important;
  min-height:92px!important;
  padding:12px 42px 12px 14px!important;
}
.inline-wave-wrap{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:auto auto auto auto!important;
  align-items:center!important;
}
.inline-volume{
  grid-row:4!important;
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:7px!important;
  margin-top:2px!important;
}
.inline-volume-btn{
  flex:0 0 26px!important;
  width:26px!important;
  height:26px!important;
  padding:0!important;
  font-size:17px!important;
}
.inline-volume input{
  flex:1 1 auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:150px!important;
  height:3px!important;
  margin:0!important;
}
.inline-close{
  position:absolute!important;
  top:8px!important;
  right:8px!important;
  width:30px!important;
  height:30px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  font-size:24px!important;
  line-height:1!important;
  border-radius:50%!important;
}
@media (max-width:700px){
  .inline-audio-player{
    width:calc(100% - 28px)!important;
    grid-template-columns:minmax(115px,1.25fr) auto minmax(125px,1.45fr) 26px!important;
    gap:7px!important;
    min-height:98px!important;
    padding:10px 34px 10px 10px!important;
    border-radius:18px!important;
  }
  .inline-track{gap:8px!important}
  .inline-note{width:42px!important;height:42px!important;font-size:25px!important}
  .inline-track-meta strong{font-size:14px!important}
  .inline-controls{gap:4px!important}
  .inline-controls button{padding:4px!important;font-size:16px!important}
  .inline-controls .inline-toggle{width:38px!important;height:38px!important}
  .inline-wave{height:24px!important;gap:2px!important}
  .inline-wave i{width:2px!important;max-height:21px!important}
  .inline-volume input{max-width:105px!important}
}
@media (max-width:430px){
  .inline-audio-player{
    width:calc(100% - 20px)!important;
    grid-template-columns:minmax(105px,1.2fr) auto minmax(100px,1.15fr) 24px!important;
    gap:4px!important;
    min-height:94px!important;
    padding:9px 31px 9px 8px!important;
  }
  .inline-note{width:38px!important;height:38px!important;font-size:22px!important}
  .inline-track-meta strong{font-size:13px!important}
  .inline-track-meta small{font-size:10px!important}
  .inline-controls button{font-size:14px!important;padding:3px!important}
  .inline-controls .inline-toggle{width:35px!important;height:35px!important;font-size:14px!important}
  .inline-wave i{width:2px!important}
  .inline-times{font-size:10px!important}
  .inline-volume{gap:5px!important}
  .inline-volume-btn{width:23px!important;height:23px!important;font-size:16px!important;flex-basis:23px!important}
  .inline-volume input{max-width:76px!important;height:3px!important}
  .inline-close{top:6px!important;right:5px!important;font-size:22px!important}
}

/* FINAL PLAYER / BACK-TO-TOP ALIGNMENT — 2026-10-04
   Căn trình phát đều hai bên và tạo khoảng cách rõ ràng với nút Back to top. */
@media (max-width:1100px){
  .inline-audio-player{
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%)!important;
    width:calc(100vw - 32px)!important;
    max-width:980px!important;
  }

  /* Back-to-top nằm thẳng hàng với mép phải player và luôn có khoảng hở. */
  body.audio-player-open .floating-tools{
    right:16px!important;
    bottom:calc(84px + 98px + env(safe-area-inset-bottom) + 24px)!important;
  }
}

@media (max-width:600px){
  .inline-audio-player{
    width:calc(100vw - 24px)!important;
  }
  body.audio-player-open .floating-tools{
    right:12px!important;
    bottom:calc(78px + 94px + env(safe-area-inset-bottom) + 24px)!important;
  }
}

@media (max-width:420px){
  .inline-audio-player{
    width:calc(100vw - 16px)!important;
  }
  body.audio-player-open .floating-tools{
    right:8px!important;
    bottom:calc(78px + 94px + env(safe-area-inset-bottom) + 22px)!important;
  }
}

/* ==========================================================
   FLOATING TOOLS — PLAYER AWARE POSITIONING
   Bình thường: AI + Back to top nằm sát góc phải phía dưới.
   Khi trình phát mở: cả cụm tự nâng lên, không che player.
   ========================================================== */
.floating-tools{
  right:14px!important;
  bottom:14px!important;
  gap:8px!important;
}

/* Không có player: giữ cụm công cụ sát góc phải phía dưới. */
body:not(.audio-player-open) .floating-tools{
  right:14px!important;
  bottom:14px!important;
}

/* Khi player xuất hiện: nâng nguyên cụm lên trên player + nav. */
body.audio-player-open .floating-tools{
  right:14px!important;
  bottom:calc(78px + 112px + env(safe-area-inset-bottom) + 14px)!important;
}

@media (max-width:600px){
  .floating-tools,
  body:not(.audio-player-open) .floating-tools{
    right:12px!important;
    bottom:12px!important;
    gap:7px!important;
  }
  body.audio-player-open .floating-tools{
    right:12px!important;
    bottom:calc(78px + 108px + env(safe-area-inset-bottom) + 12px)!important;
  }
}

@media (max-width:420px){
  .floating-tools,
  body:not(.audio-player-open) .floating-tools{
    right:8px!important;
    bottom:10px!important;
  }
  body.audio-player-open .floating-tools{
    right:8px!important;
    bottom:calc(78px + 106px + env(safe-area-inset-bottom) + 10px)!important;
  }
}

/* FINAL FLOATING TOOLS / BOTTOM NAV CLEARANCE — 2026-10-04
   Keep AI + Back-to-top above the fixed mobile bottom navigation.
   When audio player opens, lift them further above the player. */
@media (max-width:1100px){
  .floating-tools,
  body:not(.audio-player-open) .floating-tools{
    right:14px!important;
    bottom:calc(68px + env(safe-area-inset-bottom) + 10px)!important;
    z-index:12100!important;
  }
}
@media (max-width:600px){
  .floating-tools,
  body:not(.audio-player-open) .floating-tools{
    right:12px!important;
    bottom:calc(68px + env(safe-area-inset-bottom) + 10px)!important;
  }
}
@media (max-width:420px){
  .floating-tools,
  body:not(.audio-player-open) .floating-tools{
    right:10px!important;
    bottom:calc(66px + env(safe-area-inset-bottom) + 8px)!important;
  }
}

/* ==========================================================
   IPAD / LARGE TABLET BOTTOM NAV — APP STYLE
   761px–1100px: dùng đúng giao diện Nav 3 nút như mobile,
   không để Safari/iPad hiển thị kiểu button mặc định.
   ========================================================== */
@media (min-width:761px) and (max-width:1100px){
  .mobile-bottom-nav{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100vw!important;
    max-width:none!important;
    height:78px!important;
    min-height:78px!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    align-items:stretch!important;
    padding:7px 18px calc(7px + env(safe-area-inset-bottom))!important;
    background:#fff!important;
    border:0!important;
    border-top:1px solid #d7e8f7!important;
    box-shadow:0 -5px 18px rgba(21,76,125,.12)!important;
    opacity:1!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    z-index:12050!important;
  }

  .mobile-bottom-nav .mobile-bottom-item,
  .mobile-bottom-nav .mobile-bottom-item:focus,
  .mobile-bottom-nav .mobile-bottom-item:hover{
    -webkit-appearance:none!important;
    appearance:none!important;
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
    background:transparent!important;
    color:#0758b8!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    margin:0!important;
    padding:3px 8px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    font-family:"Be Vietnam Pro",Arial,sans-serif!important;
    font-size:14px!important;
    font-weight:600!important;
    line-height:1.15!important;
    text-align:center!important;
    cursor:pointer!important;
    -webkit-tap-highlight-color:transparent!important;
  }

  .mobile-bottom-nav .mobile-bottom-item.active{
    color:#0758b8!important;
  }

  .mobile-bottom-nav .mobile-bottom-icon{
    flex:0 0 auto!important;
    display:grid!important;
    place-items:center!important;
    width:36px!important;
    height:36px!important;
    margin:0!important;
    color:#0758b8!important;
    line-height:1!important;
  }

  .mobile-bottom-nav .home-icon{
    width:36px!important;
    height:36px!important;
    border-radius:50%!important;
    background:#0861c9!important;
    color:#fff!important;
    border:2px solid #fff!important;
    box-shadow:0 2px 8px rgba(7,86,181,.25)!important;
  }
  .mobile-bottom-nav .home-icon svg{
    width:22px!important;
    height:22px!important;
    display:block!important;
  }
  .mobile-bottom-nav .home-icon svg path{
    stroke:#fff!important;
    stroke-width:2.2!important;
    fill:none!important;
  }

  .mobile-bottom-nav .user-icon{
    width:36px!important;
    height:36px!important;
    border-radius:50%!important;
    background:#0861c9!important;
    border:2px solid #fff!important;
    box-shadow:0 2px 8px rgba(7,86,181,.25)!important;
  }
  .mobile-bottom-nav .user-icon:before{
    width:8px!important;
    height:8px!important;
    top:6px!important;
    background:#fff!important;
  }
  .mobile-bottom-nav .user-icon:after{
    width:16px!important;
    height:10px!important;
    bottom:4px!important;
    background:#fff!important;
  }

  .mobile-bottom-nav .menu-icon{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    min-height:36px!important;
    border-radius:50%!important;
    border:2px solid #fff!important;
    background-color:#0861c9!important;
    background-image:
      linear-gradient(#fff,#fff),
      linear-gradient(#fff,#fff),
      linear-gradient(#fff,#fff)!important;
    background-repeat:no-repeat!important;
    background-size:19px 2.5px!important;
    background-position:center 9px,center 16px,center 23px!important;
    box-shadow:0 2px 8px rgba(7,86,181,.25)!important;
    display:block!important;
  }
  .mobile-bottom-nav .menu-icon i{display:none!important;}

  .mobile-bottom-nav .mobile-bottom-label{
    display:block!important;
    max-width:180px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    color:inherit!important;
  }

  /* Player và floating tools chừa đúng khoảng Nav iPad. */
  .inline-audio-player{bottom:90px!important;}
  .floating-tools,
  body:not(.audio-player-open) .floating-tools{
    bottom:calc(78px + env(safe-area-inset-bottom) + 12px)!important;
  }
  body.audio-player-open .floating-tools{
    bottom:calc(78px + 112px + env(safe-area-inset-bottom) + 18px)!important;
  }
}

/* FINAL USER ICON VISIBILITY FIX — mobile/tablet bottom nav */
@media (max-width:1100px){
  .mobile-bottom-nav .user-icon{
    position:relative!important;
    display:grid!important;
    place-items:center!important;
    overflow:hidden!important;
  }
  .mobile-bottom-nav .user-icon svg{
    display:block!important;
    width:22px!important;
    height:22px!important;
    color:#fff!important;
    fill:#fff!important;
    flex:0 0 auto!important;
  }
  .mobile-bottom-nav .user-icon:before,
  .mobile-bottom-nav .user-icon:after{
    display:none!important;
    content:none!important;
  }
}
@media (max-width:600px){
  .mobile-bottom-nav .user-icon svg{width:20px!important;height:20px!important;}
}

/* UX: every close/X control uses a hand cursor when hovered. */
button[aria-label*="Đóng"],
button[aria-label*="đóng"],
button[id*="Close"],
button[id*="close"],
.modal-close,
.inline-close {
  cursor: pointer !important;
}

/* FINAL VIDEO MODAL RESPONSIVE ALIGNMENT — 2026-10-04
   Video/embed window stays centered with equal left/right spacing. */
.embed-modal{
  box-sizing:border-box!important;
  width:min(1100px, calc(100vw - 32px))!important;
  max-width:none!important;
  margin:0 auto!important;
  padding:28px clamp(16px, 3vw, 34px)!important;
}
.embed-modal .embed-stage{
  width:100%!important;
  max-width:100%!important;
  margin:0 auto!important;
  box-sizing:border-box!important;
}
.embed-modal .embed-stage iframe,
.embed-modal .embed-stage video{
  width:100%!important;
  max-width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}
.embed-modal h2,
.embed-modal > p,
.embed-modal .embed-external{
  max-width:100%!important;
}
@media (max-width:700px){
  .modal-backdrop{padding:12px!important;}
  .embed-modal{
    width:calc(100vw - 24px)!important;
    padding:22px 12px 18px!important;
    border-radius:18px!important;
  }
  .embed-modal .embed-stage{
    min-height:0!important;
    aspect-ratio:16/9!important;
    border-radius:12px!important;
  }
}
@media (max-width:420px){
  .embed-modal{
    width:calc(100vw - 16px)!important;
    padding:20px 9px 16px!important;
  }
}

/* ================= Admin Website Editor ================= */
.admin-site-panel{max-width:1100px}
.admin-editor-intro{padding:15px 17px;margin:-4px 0 18px;border:1px solid #cfe7fb;border-radius:14px;background:linear-gradient(135deg,#f3fbff,#e9f6ff);color:#24537f}
.admin-editor-intro strong{display:block;color:#0757b4;font-size:18px;margin-bottom:5px}
.admin-editor-intro p{margin:0;color:#64809f;font-size:13px;line-height:1.55}
.admin-editor-section{border-top:1px solid #e2eef8;padding-top:20px;margin-top:22px}
.admin-editor-section:first-of-type{border-top:0;padding-top:0;margin-top:0}
.admin-editor-section h2{margin:0 0 7px;color:#084f9f;font-size:20px}
.admin-subtitle{margin:14px 0 8px;color:#174e8c;font-size:15px}
.compact-form{gap:11px}
.inline-check{display:flex!important;flex-direction:row!important;align-items:center;gap:9px!important;font-weight:600!important}
.inline-check input{width:18px!important;height:18px!important;accent-color:#0861c9}
.admin-banner-list{display:grid;gap:10px;margin-top:15px}
.admin-banner-item{display:grid;grid-template-columns:180px minmax(0,1fr);gap:14px;padding:12px;border:1px solid #d9eafa;border-radius:14px;background:#fbfdff;align-items:center}
.admin-banner-preview{width:180px;height:65px;border-radius:9px;overflow:hidden;background:#eaf7ff;border:1px solid #d9eafa}
.admin-banner-preview img{width:100%;height:100%;object-fit:cover;display:block}
.admin-banner-meta{min-width:0}
.admin-banner-meta strong{display:block;color:#0b4f99;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-banner-meta small{display:block;color:#6a86a4;margin:4px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-banner-actions{display:flex;gap:6px;flex-wrap:wrap}
.admin-banner-actions button:disabled{opacity:.45;cursor:not-allowed}
.menu-editor-rows,.quick-editor-rows{display:grid;gap:9px}
.menu-editor-row{display:grid;grid-template-columns:130px minmax(0,1fr);gap:9px;padding:9px;border:1px solid #e1edf7;border-radius:11px;background:#fbfdff}
.quick-editor-row{display:grid;grid-template-columns:100px 1fr 1.35fr;gap:9px;padding:9px;border:1px solid #e1edf7;border-radius:11px;background:#fbfdff}
.menu-editor-row label,.quick-editor-row label{font-size:12px!important;color:#5b7898!important}
.menu-editor-row input,.quick-editor-row input{padding:9px 10px!important;font-size:13px}
.content-editor-list{display:grid;gap:2px;margin-top:10px}
.content-editor-item{background:#fbfdff;border:1px solid #e4eff8;border-radius:10px;padding:10px 11px;margin-bottom:5px}
.folder-assignment-row{align-items:stretch}
.folder-sync-note{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:10px 12px;border:1px dashed #c8e0f5;border-radius:10px;background:#f7fbff;color:#52749a}
.folder-sync-note strong{color:#155897;font-size:13px}
.folder-sync-note small{font-size:11px;line-height:1.4}
.admin-folder-list{display:grid;gap:8px;margin-top:12px}
.admin-folder-item{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid #dbeaf7;border-radius:12px;background:#fbfdff}
.admin-folder-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:#e8f5ff;font-size:22px}
.admin-folder-meta{min-width:0}
.admin-folder-meta strong{display:block;color:#0b4f99;font-size:14px}
.admin-folder-meta small{display:block;color:#6a86a4;font-size:12px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-folder-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.admin-folder-form-actions{display:flex;gap:8px;flex-wrap:wrap}
.public-folder-group{border:1px solid #dcecf8;border-radius:14px;padding:12px;margin:10px 0;background:#fbfdff}
.public-folder-group h3{margin:0;color:#12569e;font-size:16px}
.public-folder-group>p{margin:4px 0 8px;color:#6b87a3;font-size:12px}
.admin-backup-actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.file-import-btn{display:inline-flex!important;flex-direction:row!important;align-items:center;justify-content:center;cursor:pointer}
.file-import-btn input{display:none}
.admin-site-panel .btn-light{border:1px solid #cfe2f3;background:#f7fbff;color:#1a528d}
.admin-site-panel .danger-btn{cursor:pointer}
.banner-empty-state{height:100%;display:grid;place-items:center;color:#4d7399;font-weight:700;background:#eaf7ff}
@media (max-width:700px){
  .admin-folder-item{grid-template-columns:38px minmax(0,1fr)}
  .admin-folder-actions{grid-column:1/-1;justify-content:flex-start}
  .folder-sync-note{min-height:48px}
  .admin-banner-item{grid-template-columns:1fr}
  .admin-banner-preview{width:100%;height:105px}
  .menu-editor-row{grid-template-columns:1fr 2fr}
  .quick-editor-row{grid-template-columns:1fr}
  .admin-backup-actions>*{width:100%}
}
/* Universal document editor / Office workspace */
.document-toolbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:8px 10px;margin:0 0 10px;border:1px solid #cfe4f7;border-radius:12px;background:#f5fbff;position:sticky;top:0;z-index:5}
.doc-tool-btn{border:1px solid #b9d7f1;background:#fff;color:#0b5db6;border-radius:9px;padding:7px 11px;font-weight:700;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.doc-tool-btn:hover{background:#eaf5ff;transform:translateY(-1px)}
.doc-workspace{width:100%;min-height:55vh;max-height:78vh;overflow:auto;background:#e8f1f8;border-radius:12px;padding:18px;box-sizing:border-box}
.doc-paper{width:min(900px,100%);min-height:700px;margin:0 auto;padding:48px;background:#fff;box-shadow:0 5px 24px rgba(20,80,130,.15);transform-origin:top center;box-sizing:border-box;color:#222;line-height:1.6;outline:none}
.doc-line{min-height:1.45em;outline:none;padding:2px 0}.doc-line:focus{background:#f5fbff;box-shadow:0 0 0 2px #b7dcfb inset}
.doc-pptx-workspace{display:grid;gap:18px}.ppt-slide-editor{background:#fff;border:1px solid #cfe4f7;border-radius:14px;padding:16px;box-shadow:0 3px 14px rgba(20,80,130,.08)}.ppt-slide-editor h3{margin:0 0 10px;color:#0b559f}.ppt-text-edit{display:block;width:100%;min-height:52px;box-sizing:border-box;margin:8px 0;padding:10px;border:1px solid #c9def0;border-radius:9px;font:inherit;color:#123f72;resize:vertical}
.doc-xlsx-workspace{background:#fff}.xlsx-editor-table{border-collapse:collapse;min-width:max-content;background:#fff}.xlsx-editor-table th,.xlsx-editor-table td{border:1px solid #d5e3ef;padding:0}.xlsx-editor-table th{background:#edf7ff;color:#20598f;padding:6px 8px;position:sticky;top:0;z-index:2}.xlsx-editor-table td input{width:110px;min-width:110px;border:0;padding:7px 8px;font:14px inherit;color:#173f6c;outline:none;box-sizing:border-box}.xlsx-editor-table td input:focus{box-shadow:inset 0 0 0 2px #1b70cc;background:#f5fbff}
.image-editor-workspace{display:grid;place-items:center}.image-editor-canvas{max-width:100%;height:auto;background:repeating-conic-gradient(#f2f2f2 0 25%,#fff 0 50%) 50%/20px 20px;box-shadow:0 4px 18px rgba(0,0,0,.16);transform-origin:center center}
.admin-custom-icon{width:1.7em;height:1.7em;object-fit:contain;vertical-align:middle;display:inline-block}.nav-custom-icon{width:1.4em;height:1.4em}.quick-custom-icon{width:1.35em;height:1.35em}.admin-icon-preview{display:inline-flex;align-items:center;justify-content:center;min-height:28px;margin-top:5px;color:#0d57a6;font-size:22px}.admin-icon-preview img{width:30px;height:30px;object-fit:contain}
.menu-editor-row,.quick-editor-row{grid-template-columns:1fr 1fr 1fr!important}.menu-editor-row label:nth-of-type(2),.quick-editor-row label:nth-of-type(2){min-width:0}.quick-editor-row label:nth-of-type(3),.quick-editor-row label:nth-of-type(4){min-width:0}
.content-edit-modal{width:min(820px,calc(100vw - 28px));max-height:90vh;overflow:auto}
@media(max-width:760px){.document-toolbar{position:sticky;top:0}.doc-workspace{padding:9px;max-height:72vh}.doc-paper{padding:24px;min-height:520px}.menu-editor-row,.quick-editor-row{grid-template-columns:1fr!important}.xlsx-editor-table td input{width:90px;min-width:90px}}
/* Ngày giờ đăng nội dung - hiển thị đồng bộ trên thẻ, danh sách và Admin */
.posted-at{display:block;margin-top:5px;color:#6a86a4;font-size:10px;line-height:1.35;font-weight:600}
.song-info>.posted-at{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-lesson-info>.posted-at{margin-top:4px}
.content-editor-item .user-song-meta small{line-height:1.45}
.latest-title small{line-height:1.35}
@media (max-width:700px){.posted-at{font-size:9.5px}.song-info>.posted-at{white-space:normal}.home-lesson-info>.posted-at{font-size:9px}}

/* 2026-10-04 — Password visibility + desktop topic icons only. */
.password-field{position:relative}
.password-input-wrap{position:relative;width:100%}
.password-input-wrap input{width:100%;padding-right:46px!important}
.password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;border-radius:50%;padding:6px;background:transparent;color:#5d7da0;display:grid;place-items:center;cursor:pointer;z-index:2}
.password-toggle:hover{background:#edf7ff;color:#0756b4}
.password-toggle:focus-visible{outline:2px solid #68aee8;outline-offset:1px}
.password-toggle svg{display:block;width:21px;height:21px}

/* Keep the four topic icons visible and centered on desktop without changing layout. */
@media (min-width:761px){
  .topic-card .topic-icon{display:grid!important;visibility:visible!important;opacity:1!important;flex:0 0 54px!important;width:54px!important;height:54px!important;align-items:center!important;justify-content:center!important;font-size:30px!important;line-height:1!important}
  .topic-card .topic-icon::before{content:none!important}
}

/* 2026-10-04 — Keep the Trang chủ home icon visible on desktop after site settings are applied. */
@media (min-width:761px){
  .main-nav .nav-item .home-nav-icon{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:32px!important;
    height:32px!important;
    flex:0 0 32px!important;
    line-height:0!important;
    font-size:0!important;
    visibility:visible!important;
    opacity:1!important;
  }
  .main-nav .nav-item .home-nav-icon svg{
    display:block!important;
    width:25px!important;
    height:25px!important;
    visibility:visible!important;
    opacity:1!important;
    stroke:currentColor!important;
  }
}

/* Dark mode — added as an isolated theme layer; layout and component geometry stay unchanged. */
.theme-toggle{width:42px;height:42px;flex:0 0 42px;border:2px solid #fff;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#174f91;cursor:pointer;box-shadow:0 2px 8px rgba(28,82,132,.10);transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease}
.theme-toggle:hover{transform:translateY(-1px);background:#eaf6ff}
.theme-toggle .theme-icon{width:21px;height:21px;display:block}
.theme-toggle .theme-icon-sun{display:none}
.mobile-theme-toggle{display:none}
body.dark-mode{background:#101722;color:#dbe8f7}
body.dark-mode .site-header{background:linear-gradient(180deg,#111a27 0%,#162233 76%,#1a293b 100%)!important;border-bottom-color:#2e4258!important}
body.dark-mode .main-nav{background:#111b28!important;border-bottom-color:#2a4057!important;box-shadow:0 2px 7px rgba(0,0,0,.28)!important}
body.dark-mode .nav-item{color:#d9e8f8!important}
body.dark-mode .nav-item span{color:#75b7ff!important}
body.dark-mode .nav-item.active{background:#1467c7!important;color:#fff!important}
body.dark-mode .nav-item.active span{color:#fff!important}
body.dark-mode .theme-toggle{background:#1c2b3d;color:#ffd36a;border-color:#fff;box-shadow:0 2px 9px rgba(0,0,0,.28)}
body.dark-mode .theme-toggle:hover{background:#263b53}
body.dark-mode .theme-toggle .theme-icon-moon{display:none}
body.dark-mode .theme-toggle .theme-icon-sun{display:block}
body.dark-mode .searchbox{background:#182536!important;border-color:#3d5c7b!important}
body.dark-mode .searchbox input{color:#e3eef9!important}
body.dark-mode .searchbox input::placeholder{color:#8fa7bf!important}
body.dark-mode .searchbox button{color:#82bdff!important}
body.dark-mode .page{color:#dbe8f7}
body.dark-mode .hero{box-shadow:0 3px 12px rgba(0,0,0,.28)}
body.dark-mode .quick-card,body.dark-mode .topic-card,body.dark-mode .song-card,body.dark-mode .latest-card,body.dark-mode .featured-empty,body.dark-mode .latest-empty{background:#182536!important;border-color:#2e465f!important;color:#dbe8f7!important;box-shadow:0 3px 12px rgba(0,0,0,.24)}
body.dark-mode .quick-card strong,body.dark-mode .topic-card strong,body.dark-mode .song-info h3,body.dark-mode .section-heading h2,body.dark-mode .side-heading,body.dark-mode .page-title h1{color:#8ec5ff!important}
body.dark-mode .quick-card small,body.dark-mode .topic-card small,body.dark-mode .song-info,.dark-mode .stats,body.dark-mode .latest-item,body.dark-mode .latest-item small,body.dark-mode .view-all,body.dark-mode .side-heading a{color:#9eb5cd!important}
body.dark-mode .section-heading h2,.dark-mode .heading-note{color:#8ec5ff!important}
body.dark-mode .page-title p,body.dark-mode .breadcrumb,body.dark-mode .form-hint{color:#9eb5cd!important}
body.dark-mode .footer{background:#0d141e!important;border-top-color:#26394e!important}
body.dark-mode .site-footer{background:#0d141e!important;border-top-color:#26394e!important;color:#c7d7e9!important}
body.dark-mode .footer-column h3,body.dark-mode .footer-brand-name,body.dark-mode .footer-brand-name strong{color:#dcecff!important}
body.dark-mode .footer-column a,body.dark-mode .footer-column p,body.dark-mode .footer-brand p,body.dark-mode .footer-bottom{color:#91a8c0!important}
body.dark-mode .footer-bottom{border-top-color:#273b51!important}
body.dark-mode input,body.dark-mode textarea,body.dark-mode select{background:#142131!important;color:#e0ecf8!important;border-color:#39536d!important}
body.dark-mode input::placeholder,body.dark-mode textarea::placeholder{color:#839bb3!important}
body.dark-mode .filter,body.dark-mode .tab,body.dark-mode .light-btn,body.dark-mode .folder-picker-btn,body.dark-mode .file-picker-btn{background:#1a2a3d!important;color:#cfe1f4!important;border-color:#38536d!important}
body.dark-mode .filter.active,body.dark-mode .tab.active{background:#1769c7!important;color:#fff!important;border-color:#1769c7!important}
body.dark-mode .modal,.dark-mode .modal-content,body.dark-mode .auth-modal,body.dark-mode .profile-edit-modal{background:#162333!important;color:#dce9f6!important;border-color:#31485f!important}
body.dark-mode .modal h1,body.dark-mode .modal h2,body.dark-mode .modal h3,body.dark-mode .auth-modal h2,body.dark-mode .profile-password-heading{color:#8ec5ff!important}
body.dark-mode .modal p,body.dark-mode .modal label,body.dark-mode .auth-modal p{color:#a9bed3!important}
body.dark-mode .auth-switch,body.dark-mode .auth-options{color:#c7d9eb!important}
body.dark-mode .auth-switch button{color:#bdd3e8!important;background:#1a2b3f!important}
body.dark-mode .auth-switch button.active{background:#1e6ac7!important;color:#fff!important}
body.dark-mode .auth-admin-link{border-top-color:#2d4359!important;color:#8ea6bf!important}
body.dark-mode .auth-admin-link button,body.dark-mode .auth-options button{color:#82bdff!important}
body.dark-mode .search-suggestions{background:#182536!important;border-color:#3a5773!important;color:#dceafa!important;box-shadow:0 12px 28px rgba(0,0,0,.35)!important}
body.dark-mode .search-suggestions button,body.dark-mode .search-suggestions .suggestion-item{color:#dceafa!important;background:transparent!important}
body.dark-mode .account-button{background:linear-gradient(135deg,#1d2e42,#243a52)!important;border-color:#3a5670!important;color:#9dceff!important}
body.dark-mode .account-greeting{color:#91a9c1!important}.dark-mode .account-name{color:#ff7297!important}
body.dark-mode .management-page,body.dark-mode .songs-page,body.dark-mode .teachers-page,body.dark-mode .students-page,body.dark-mode .skills-page,body.dark-mode .games-page,body.dark-mode .instruments-page{color:#dbe8f7}
body.dark-mode .notice-empty{color:#91a9c1!important}
body.dark-mode .admin-error{background:#351d28!important;border-color:#703348!important;color:#ff9bb5!important}
body.dark-mode .embed-divider:before,body.dark-mode .embed-divider:after{background:#334b63!important}
body.dark-mode .song-player,body.dark-mode .player-bar{background:#142131!important;border-color:#304962!important;color:#dceafa!important}
body.dark-mode .floating-tools button{background:#1a2b3d!important;color:#dceafa!important;border-color:#3b5872!important}
body.dark-mode .ai-chatbox,body.dark-mode .ai-settings-panel{background:#162536!important;color:#dceafa!important;border-color:#334d67!important}
body.dark-mode .ai-msg-bot{background:#203349!important;color:#dceafa!important}
body.dark-mode .ai-msg-user{background:#1769c7!important;color:#fff!important}
body.dark-mode .ai-image-btn,body.dark-mode .ai-image-preview{background:#1b2d40!important;border-color:#3b5872!important;color:#dceafa!important}
body.dark-mode .ai-image-remove{background:#162536!important;border-color:#3b5872!important;color:#dceafa!important}
body.dark-mode .mobile-bottom-nav{background:#111b28!important;border-top-color:#2d435a!important}
body.dark-mode .mobile-bottom-item{color:#9db4ca!important}
body.dark-mode .mobile-bottom-item.active{color:#7fc0ff!important}
body.dark-mode .mobile-menu span{background:#cfe3f8!important}
@media (max-width:1100px){
  .mobile-theme-toggle{display:inline-flex;position:absolute;left:-52px;top:2px;z-index:11012;margin:0}
  .mobile-search.is-open .mobile-theme-toggle{display:none!important}
  body.dark-mode .mobile-search .theme-toggle{background:#1c2b3d!important;color:#ffd36a!important;border-color:#fff!important}
}
@media (min-width:1101px){.desktop-actions .theme-toggle{display:inline-flex}}

/* 2026-10-04 — CHỈ SỬA LOGO + ICON DARK MODE THEO YÊU CẦU */
/* Logo: dùng ảnh đã khử viền sáng/halo để chữ và đường nét rõ trên nền tối. */
.brand-logo-image img,
.footer-logo-image img{
  filter:none!important;
  opacity:1!important;
  image-rendering:auto!important;
}

/* Dark Mode icon: đồng bộ hoàn toàn với nút Search — cùng hình tròn, viền trắng, nền xanh, icon trắng. */
.theme-toggle{
  border:2px solid #fff!important;
  background:#0861c9!important;
  color:#fff!important;
  box-shadow:0 3px 10px rgba(7,86,181,.25)!important;
}
.theme-toggle:hover{
  background:#0758b8!important;
  color:#fff!important;
}
.theme-toggle .theme-icon{
  width:23px!important;
  height:23px!important;
}
body.dark-mode .theme-toggle,
body.dark-mode .mobile-theme-toggle{
  border:2px solid #fff!important;
  background:#0861c9!important;
  color:#fff!important;
  box-shadow:0 3px 10px rgba(7,86,181,.25)!important;
}
body.dark-mode .theme-toggle:hover,
body.dark-mode .mobile-theme-toggle:hover{
  background:#0758b8!important;
  color:#fff!important;
}

@media (max-width:760px){
  .mobile-theme-toggle{
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
    border:2px solid #fff!important;
    border-radius:50%!important;
    padding:0!important;
    margin:0!important;
    background:#0861c9!important;
    color:#fff!important;
    box-shadow:0 3px 10px rgba(7,86,181,.25)!important;
  }
  .mobile-theme-toggle .theme-icon{
    width:23px!important;
    height:23px!important;
  }
}
@media (max-width:600px){
  .mobile-theme-toggle{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
  }
  .mobile-theme-toggle .theme-icon{
    width:21px!important;
    height:21px!important;
  }
}

/* 2026-10-04 — CĂN ĐỒNG TRỤC DARK MODE VỚI SEARCH
   Chỉ chỉnh vị trí/kích thước nút Dark Mode, không thay đổi thành phần khác. */
@media (max-width:1100px){
  .mobile-theme-toggle{
    top:0!important;
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
    padding:0!important;
    margin:0!important;
    border:2px solid #fff!important;
    border-radius:50%!important;
    background:#0861c9!important;
    color:#fff!important;
    box-shadow:0 3px 10px rgba(7,86,181,.25)!important;
    display:grid!important;
    place-items:center!important;
  }
  .mobile-theme-toggle .theme-icon{
    width:23px!important;
    height:23px!important;
  }
}
@media (max-width:600px){
  .mobile-theme-toggle{
    top:0!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
  }
  .mobile-theme-toggle .theme-icon{
    width:21px!important;
    height:21px!important;
  }
}

/* 2026-10-04 — DARK MODE: tăng độ rõ logo, chỉ áp dụng khi nền tối. */
body.dark-mode .brand-logo-image img,
body.dark-mode .footer-logo-image img{
  filter: brightness(1.14) contrast(1.16) saturate(1.08) drop-shadow(0 0 0.7px rgba(255,255,255,.28))!important;
}

/* 2026-10-04 — giữ hai nút Dark Mode và Search compact cùng kích thước theo breakpoint. */
@media (max-width:1100px){
  .mobile-theme-toggle,
  .mobile-search .mobile-search-toggle{
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
  }
}
@media (max-width:600px){
  .mobile-theme-toggle,
  .mobile-search .mobile-search-toggle{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
  }
}

/* 2026-10-04 — CHỈ SỬA NỀN ICON AI KHI DARK MODE
   Giữ ảnh AI trong suốt, không để nền nút Dark Mode phủ thành ô đen. */
body.dark-mode .floating-tools .ai-float-btn{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:inherit!important;
}
body.dark-mode .floating-tools .ai-float-btn:hover{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* 2026-10-04 — DARK MODE LOGO RIÊNG
   Chỉ thay logo khi Dark Mode; Light Mode giữ nguyên logo hiện tại. */
body.dark-mode .brand-logo-image img{
  content:url('../images/logo-hoang-hue-dark.png')!important;
  filter:none!important;
  opacity:1!important;
}
body.dark-mode .footer-logo-image img{
  content:url('../images/logo-hoang-hue-dark.png')!important;
  filter:none!important;
  opacity:1!important;
}

/* 2026-10-04 — CHỈ ĐỒNG BỘ KÍCH THƯỚC LOGO LIGHT/DARK */
.brand-logo-image img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:left center!important;}
body.dark-mode .brand-logo-image img{filter:none!important;}
body.dark-mode .footer-logo-image img{filter:none!important;}

/* SEARCH ONLY — FINAL NO-JUMP FIX
   Opening/focusing Search must not change its geometry or the magnifier
   position. The Search overlay is intentionally not scroll-locked. */
@media (max-width:1100px){
  .mobile-search.is-open .searchbox{
    box-sizing:border-box!important;
  }
  .mobile-search.is-open .searchbox input,
  .mobile-search.is-open .searchbox .global-search-btn{
    box-sizing:border-box!important;
    transform:none!important;
  }
}
@media (min-width:1101px){
  #desktopSearchBox,
  #desktopSearchBox.search-active,
  #desktopSearchBox .global-search,
  #desktopSearchBox .global-search-btn{
    box-sizing:border-box!important;
  }
}

/* FINAL SEARCH NO-JUMP — 2026-10-05
   Search alone must never hide the page scrollbar. Removing the scrollbar
   changes the viewport width and makes the search field + magnifier shift.
   Keep menu/modal scroll locking unchanged. */
@media (max-width:1100px){
  body.search-open{
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
}

/* ==========================================================
   SEARCH — HARD STABILITY FIX
   Chỉ sửa Search responsive. Không thay đổi các modal/menu khác.
   Khi mở/focus Search, cả vùng điều khiển được cố định theo viewport;
   thanh Search và nút kính lúp dùng cùng một hệ tọa độ nên không thể
   nhảy ngang khi input nhận focus.
   ========================================================== */
@media (max-width:1100px){
  .mobile-search.is-open{
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100vh!important;
    min-width:100vw!important;
    min-height:100vh!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    overflow:visible!important;
    z-index:12050!important;
    pointer-events:none!important;
  }
  .mobile-search.is-open .searchbox{
    position:fixed!important;
    top:40px!important;
    left:16px!important;
    right:16px!important;
    bottom:auto!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    height:52px!important;
    min-height:52px!important;
    margin:0!important;
    padding:0 50px 0 18px!important;
    transform:none!important;
    box-sizing:border-box!important;
    pointer-events:auto!important;
  }
  .mobile-search.is-open .searchbox input{
    position:static!important;
    flex:1 1 auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:48px!important;
    min-height:48px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    outline:0!important;
    transform:none!important;
    box-sizing:border-box!important;
    -webkit-appearance:none!important;
    appearance:none!important;
  }
  .mobile-search.is-open .searchbox .global-search-btn{
    display:none!important;
  }
  .mobile-search.is-open .mobile-search-toggle{
    position:fixed!important;
    top:6px!important;
    right:18px!important;
    left:auto!important;
    bottom:auto!important;
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    min-height:32px!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    box-sizing:border-box!important;
    pointer-events:auto!important;
    z-index:12060!important;
  }
}
@media (max-width:760px){
  .mobile-search.is-open .searchbox{
    top:28px!important;
    left:10px!important;
    right:10px!important;
    width:auto!important;
    height:52px!important;
    min-height:52px!important;
  }
}
@media (max-width:600px){
  .mobile-search.is-open .searchbox{
    top:28px!important;
    left:10px!important;
    right:10px!important;
    height:50px!important;
    min-height:50px!important;
  }
}
@media (max-width:420px){
  .mobile-search.is-open .searchbox{
    top:28px!important;
    left:8px!important;
    right:8px!important;
    height:50px!important;
    min-height:50px!important;
  }
}

/* SEARCH ONLY — desktop stable wide bar
   Keep Search inline in the header. Do not turn it into a fixed/centered
   overlay on focus; that changes the header geometry and makes the bar/icon jump. */
@media (min-width:1101px){
  .desktop-actions > .searchbox{
    width:430px!important;
    min-width:430px!important;
    flex:0 0 430px!important;
  }

  #desktopSearchBox.search-active{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    transform:none!important;
    width:430px!important;
    min-width:430px!important;
    max-width:430px!important;
    height:42px!important;
    min-height:42px!important;
    margin:0!important;
    padding:0 10px 0 17px!important;
    display:flex!important;
    align-items:center!important;
    box-sizing:border-box!important;
    background:#fff!important;
    border:1px solid #0d62bd!important;
    border-radius:24px!important;
    box-shadow:none!important;
    z-index:100!important;
  }

  #desktopSearchBox.search-active .global-search{
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    height:40px!important;
    line-height:40px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    outline:0!important;
    background:transparent!important;
    font-size:13px!important;
    color:#1b4b88!important;
  }

  #desktopSearchBox.search-active .global-search-btn{
    flex:0 0 auto!important;
    width:auto!important;
    height:40px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    color:#064eaa!important;
    display:grid!important;
    place-items:center!important;
    font-size:28px!important;
  }

  /* Search focus must not dim/blur or reflow the desktop header. */
  body.search-open::before{display:none!important;}
  body.search-open .brand,
  body.search-open .desktop-actions .auth-entry,
  body.search-open .desktop-actions .account-button{
    filter:none!important;
    opacity:1!important;
  }
}

/* FINAL DESKTOP SEARCH STABILITY FIX — ONLY SEARCH
   Keep desktop Search in its original header flow when focused.
   Never promote it to position:fixed, never move it to the viewport center,
   and never add the search overlay on desktop. */
@media (min-width:1101px){
  #desktopSearchBox,
  #desktopSearchBox.search-active{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    width:430px!important;
    min-width:430px!important;
    max-width:430px!important;
    height:42px!important;
    min-height:42px!important;
    margin:0!important;
    padding:0 10px 0 17px!important;
    display:flex!important;
    align-items:center!important;
    box-sizing:border-box!important;
    border:1px solid #0d62bd!important;
    border-radius:24px!important;
    background:#fff!important;
    box-shadow:none!important;
    z-index:4!important;
  }
  #desktopSearchBox.search-active .global-search{
    height:auto!important;
    line-height:normal!important;
    font-size:13px!important;
    margin:0!important;
    padding:0!important;
  }
  #desktopSearchBox.search-active .global-search-btn{
    flex:0 0 auto!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    font-size:28px!important;
    display:block!important;
  }
  body.search-open::before{display:none!important}
  body.search-open .desktop-actions .searchbox{filter:none!important;opacity:1!important}
}


/* DESKTOP SEARCH ICON MODE — only Search is changed here.
   The icon keeps its flex slot. The search field expands absolutely from that
   slot, so the header never reflows and the icon/other controls never jump. */
@media (min-width:1101px){
  .desktop-actions{position:relative!important;}
  .desktop-actions > #desktopSearchToggle,
  #desktopSearchToggle{
    display:grid!important;
    place-items:center!important;
    width:42px!important;
    min-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:50%!important;
    background:transparent!important;
    color:#064eaa!important;
    cursor:pointer!important;
    font-size:34px!important;
    line-height:1!important;
    flex:0 0 42px!important;
    box-sizing:border-box!important;
    z-index:120!important;
  }
  #desktopSearchToggle span{
    display:block!important;
    line-height:1!important;
    transform:translateY(-1px)!important;
  }
  .desktop-actions > #desktopSearchBox,
  #desktopSearchBox,
  #desktopSearchBox.search-active{
    position:absolute!important;
    right:0!important;
    top:50%!important;
    left:auto!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
    width:430px!important;
    min-width:430px!important;
    max-width:430px!important;
    height:42px!important;
    min-height:42px!important;
    margin:0!important;
    display:none!important;
    box-sizing:border-box!important;
    z-index:130!important;
  }
  .desktop-actions.desktop-search-expanded > #desktopSearchBox,
  #desktopSearchBox.search-active{
    display:flex!important;
  }
  .desktop-actions.desktop-search-expanded > #desktopSearchToggle{
    visibility:visible!important;
    position:relative!important;
    z-index:131!important;
  }
  body.search-open{overflow:auto!important;}
}

@media (max-width:1100px){
  #desktopSearchToggle{display:none!important;}
}

/* SEARCH DESKTOP — keep the original magnifier appearance and position.
   Only the trigger presentation is restored; the new click-to-expand behavior stays. */
@media (min-width:1101px){
  .desktop-actions > #desktopSearchToggle,
  #desktopSearchToggle{
    order:2!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:34px!important;
    min-width:34px!important;
    height:42px!important;
    min-height:42px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#064eaa!important;
    box-shadow:none!important;
    font-family:inherit!important;
    font-size:28px!important;
    line-height:1!important;
    flex:0 0 34px!important;
    transform:none!important;
  }
  #desktopSearchToggle span{
    display:block!important;
    line-height:1!important;
    transform:none!important;
  }
  .desktop-actions > .theme-toggle{order:3!important}
  .desktop-actions > .auth-entry,
  .desktop-actions > .account-button{order:4!important}
}

/* DESKTOP SEARCH — use the same compact icon style as tablet/mobile.
   Search expands as an overlay so the header never reflows or shifts. */
@media (min-width:1101px){
  .desktop-actions{
    position:relative!important;
  }
  .desktop-actions > #desktopSearchToggle,
  #desktopSearchToggle{
    order:2!important;
    display:grid!important;
    place-items:center!important;
    width:42px!important;
    min-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    margin:0!important;
    padding:0!important;
    border:2px solid #fff!important;
    border-radius:50%!important;
    background:#0861c9!important;
    color:#fff!important;
    box-shadow:0 3px 9px rgba(7,86,181,.24)!important;
    font-family:inherit!important;
    font-size:28px!important;
    line-height:1!important;
    flex:0 0 42px!important;
    transform:none!important;
    box-sizing:border-box!important;
    cursor:pointer!important;
    visibility:visible!important;
  }
  #desktopSearchToggle span{
    display:block!important;
    line-height:1!important;
    transform:translateY(-1px)!important;
  }
  .desktop-actions > #desktopSearchBox,
  #desktopSearchBox,
  #desktopSearchBox.search-active{
    position:absolute!important;
    top:50%!important;
    /* Expand from the Search icon toward the LEFT.
       The icon and the controls to its right keep their own slots. */
    right:calc(100% - 42px)!important;
    left:auto!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
    width:430px!important;
    min-width:430px!important;
    max-width:430px!important;
    height:42px!important;
    min-height:42px!important;
    margin:0!important;
    box-sizing:border-box!important;
    z-index:130!important;
  }
  .desktop-actions:not(.desktop-search-expanded) > #desktopSearchBox{
    display:none!important;
  }
  .desktop-actions.desktop-search-expanded > #desktopSearchBox,
  #desktopSearchBox.search-active{
    display:flex!important;
  }
  .desktop-actions.desktop-search-expanded > #desktopSearchToggle{
    visibility:hidden!important;
  }
  body.search-open{overflow:auto!important;}
}


/* MOBILE/TABLET SEARCH X — ONLY requested refinement
   Keep desktop Search completely unchanged.
   Move the close X slightly upward so it does not touch the Search bar.
   In dark mode, make the X white for clear contrast. */
@media (max-width:1100px){
  /* X nằm hẳn phía trên thanh Search, có khoảng hở rõ ràng.
     Chỉ áp dụng mobile/tablet; desktop không thay đổi. */
  .mobile-search.is-open .mobile-search-toggle{
    top:-2px!important;
    color:#0758b8!important;
  }
  body.dark-mode .mobile-search.is-open .mobile-search-toggle{
    color:#fff!important;
  }
}

/* TABLET ONLY — hạ dấu X Search xuống nhẹ để cân với thanh Search.
   Desktop và điện thoại giữ nguyên vị trí hiện tại. */
@media (min-width:601px) and (max-width:1100px){
  .mobile-search.is-open .mobile-search-toggle{
    top:11px!important;
  }
}
/* 2026-10-05 — Mobile: restore only the Thông báo panel.
   Keep the desktop/tablet layout and all other mobile sections unchanged. */
@media (max-width:760px){
  .content-layout > .sidebar{
    display:block!important;
    margin-top:14px!important;
  }
  .content-layout > .sidebar > .side-panel:first-child{
    display:block!important;
  }
  .content-layout > .sidebar > .side-panel.latest{
    display:none!important;
  }
}


/* AI CHAT — mobile image attachment layout only. */
@media (max-width:600px){
  #aiChatForm{
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr) 42px!important;
    align-items:end!important;
    gap:6px!important;
    padding:7px!important;
    min-height:58px!important;
    position:relative!important;
    z-index:20!important;
    pointer-events:auto!important;
  }
  #aiChatForm .ai-image-btn,#aiChatForm>button[type="submit"]{
    width:42px!important;min-width:42px!important;height:42px!important;min-height:42px!important;
    padding:0!important;position:relative!important;z-index:30!important;pointer-events:auto!important;
  }
  #aiChatForm .ai-compose-main{min-width:0!important;width:100%!important;gap:4px!important;display:flex!important;flex-direction:column!important;}
  #aiChatForm #aiImagePreview{
    display:flex!important;align-items:center!important;position:relative!important;
    width:100%!important;max-width:100%!important;height:44px!important;min-height:44px!important;
    padding:3px 62px 3px 7px!important;box-sizing:border-box!important;overflow:hidden!important;
    border-radius:9px!important;
  }
  #aiChatForm #aiImagePreview[hidden]{display:none!important}
  #aiChatForm #aiImagePreview img{
    position:absolute!important;right:30px!important;top:3px!important;
    width:38px!important;height:36px!important;min-width:38px!important;max-width:38px!important;max-height:36px!important;
    object-fit:cover!important;border-radius:6px!important;
  }
  #aiChatForm #aiImagePreview span{
    display:block!important;min-width:0!important;max-width:calc(100% - 48px)!important;
    overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:11px!important;
  }
  /* X is immediately beside the uploaded thumbnail. */
  #aiChatForm #aiImagePreview .ai-image-remove{
    position:absolute!important;top:50%!important;right:3px!important;transform:translateY(-50%)!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important;
    margin:0!important;border:1px solid #c8dff2!important;border-radius:50%!important;
    background:#fff!important;color:#15579c!important;font-size:18px!important;line-height:1!important;
    padding:0!important;z-index:50!important;pointer-events:auto!important;cursor:pointer!important;
  }
  #aiChatForm #aiChatInput{
    width:100%!important;min-width:0!important;min-height:42px!important;max-height:84px!important;
    padding:9px 10px!important;box-sizing:border-box!important;font-size:16px!important;
    position:relative!important;z-index:10!important;pointer-events:auto!important;
  }
}

/* AI CHAT — compact uploaded-image control: keep filename, thumbnail and remove button on one row. */
.ai-image-preview{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 40px 28px!important;
  align-items:center!important;
  gap:6px!important;
  width:100%!important;
  min-width:0!important;
  height:44px!important;
  min-height:44px!important;
  padding:3px 5px 3px 7px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
.ai-image-preview img{
  grid-column:2!important;
  grid-row:1!important;
  position:static!important;
  width:38px!important;
  height:36px!important;
  min-width:38px!important;
  max-width:38px!important;
  min-height:36px!important;
  max-height:36px!important;
  object-fit:cover!important;
  border-radius:6px!important;
}
.ai-image-preview span{
  grid-column:1!important;
  grid-row:1!important;
  min-width:0!important;
  max-width:none!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:12px!important;
  line-height:1.2!important;
}
.ai-image-preview .ai-image-remove{
  grid-column:3!important;
  grid-row:1!important;
  position:static!important;
  transform:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:26px!important;
  height:26px!important;
  min-width:26px!important;
  min-height:26px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid #c8dff2!important;
  border-radius:50%!important;
  background:#fff!important;
  color:#15579c!important;
  font-size:18px!important;
  line-height:1!important;
  z-index:50!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}

@media (max-width:600px){
  #aiChatForm{
    grid-template-columns:42px minmax(0,1fr) 42px!important;
    gap:6px!important;
    padding:7px!important;
    align-items:end!important;
  }
  #aiChatForm .ai-compose-main{
    min-width:0!important;
    width:100%!important;
    gap:4px!important;
  }
  #aiChatForm #aiImagePreview{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 38px 28px!important;
    height:42px!important;
    min-height:42px!important;
    padding:2px 4px 2px 6px!important;
    gap:5px!important;
    border-radius:9px!important;
  }
  #aiChatForm #aiImagePreview img{
    position:static!important;
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    max-width:36px!important;
    min-height:36px!important;
    max-height:36px!important;
  }
  #aiChatForm #aiImagePreview span{
    font-size:11px!important;
    line-height:1.2!important;
    max-width:none!important;
  }
  #aiChatForm #aiImagePreview .ai-image-remove{
    position:static!important;
    width:26px!important;
    height:26px!important;
    min-width:26px!important;
    min-height:26px!important;
    transform:none!important;
  }
  #aiChatForm #aiChatInput{
    width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    max-height:84px!important;
    font-size:16px!important;
    padding:9px 10px!important;
  }
}

/* 2026-10-05 — AI composer: ChatGPT-style image attachment.
   Only the AI message composer is changed. Image preview stays compact,
   the remove X sits on the thumbnail, and the text box keeps full width. */
.ai-chat-form{
  display:grid!important;
  grid-template-columns:44px minmax(0,1fr) 44px!important;
  align-items:end!important;
  gap:8px!important;
  padding:10px!important;
  background:#fff!important;
  border-top:1px solid #d9eaf7!important;
}
.ai-chat-form .ai-compose-main{
  min-width:0!important;
  width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  gap:6px!important;
}
.ai-chat-form .ai-image-btn,
.ai-chat-form > #aiSendBtn{
  width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;
  margin:0!important;padding:0!important;border-radius:13px!important;
}
.ai-chat-form #aiChatInput{
  width:100%!important;min-width:0!important;min-height:44px!important;height:44px!important;
  max-height:110px!important;box-sizing:border-box!important;
  padding:10px 12px!important;border-radius:13px!important;font-size:15px!important;
}
.ai-chat-form #aiImagePreview{
  display:flex!important;align-items:flex-start!important;position:relative!important;
  width:62px!important;height:62px!important;min-width:62px!important;max-width:62px!important;
  padding:2px!important;margin:0!important;border:0!important;border-radius:11px!important;
  background:transparent!important;overflow:visible!important;box-sizing:border-box!important;
}
.ai-chat-form #aiImagePreview[hidden]{display:none!important}
.ai-chat-form #aiImagePreview img{
  display:block!important;width:58px!important;height:58px!important;min-width:58px!important;
  max-width:58px!important;max-height:58px!important;object-fit:cover!important;
  border-radius:10px!important;border:1px solid #cfe3f4!important;
}
.ai-chat-form #aiImagePreview #aiImageName{display:none!important}
.ai-chat-form #aiImagePreview .ai-image-remove{
  position:absolute!important;top:-6px!important;right:-8px!important;transform:none!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important;
  margin:0!important;padding:0!important;border:1px solid #fff!important;border-radius:50%!important;
  background:#1d1d1d!important;color:#fff!important;font-size:15px!important;line-height:1!important;
  box-shadow:0 1px 5px rgba(0,0,0,.28)!important;z-index:100!important;
  pointer-events:auto!important;touch-action:manipulation!important;cursor:pointer!important;
}
@media (max-width:600px){
  .ai-chat-form{
    grid-template-columns:42px minmax(0,1fr) 42px!important;
    gap:6px!important;padding:8px!important;
  }
  .ai-chat-form .ai-image-btn,
  .ai-chat-form > #aiSendBtn{
    width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;
    border-radius:12px!important;
  }
  .ai-chat-form #aiChatInput{
    min-height:42px!important;height:42px!important;max-height:90px!important;
    padding:9px 10px!important;font-size:16px!important;border-radius:12px!important;
  }
  .ai-chat-form #aiImagePreview{
    width:52px!important;height:52px!important;min-width:52px!important;max-width:52px!important;
  }
  .ai-chat-form #aiImagePreview img{
    width:48px!important;height:48px!important;min-width:48px!important;max-width:48px!important;
    max-height:48px!important;border-radius:9px!important;
  }
  .ai-chat-form #aiImagePreview .ai-image-remove{
    top:-5px!important;right:-7px!important;width:21px!important;height:21px!important;
    min-width:21px!important;min-height:21px!important;font-size:14px!important;
  }
}


/* FINAL AI COMPOSER LAYOUT — attachment preview above input, compact and stable on mobile/desktop. */
#aiChatForm.ai-chat-form{
  display:flex!important;
  flex-direction:column!important;
  gap:7px!important;
  width:100%!important;
  box-sizing:border-box!important;
  padding:8px!important;
  align-items:stretch!important;
}
#aiChatForm .ai-compose-row{
  display:grid!important;
  grid-template-columns:44px minmax(0,1fr) 44px!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
  align-items:end!important;
}
#aiChatForm #aiImagePreview{
  position:relative!important;
  display:block!important;
  width:64px!important;
  height:64px!important;
  min-width:64px!important;
  max-width:64px!important;
  margin:0 0 1px 2px!important;
  padding:0!important;
  overflow:visible!important;
  border:1px solid #cfe3f4!important;
  border-radius:10px!important;
  background:#fff!important;
  box-sizing:border-box!important;
}
#aiChatForm #aiImagePreview[hidden]{display:none!important}
#aiChatForm #aiImagePreview img{
  display:block!important;
  width:62px!important;height:62px!important;
  min-width:62px!important;max-width:62px!important;max-height:62px!important;
  object-fit:cover!important;border-radius:9px!important;
}
#aiChatForm #aiImagePreview #aiImageName{display:none!important}
#aiChatForm #aiImagePreview #aiImageRemove{
  position:absolute!important;
  top:-8px!important;right:-8px!important;
  z-index:1000!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:23px!important;height:23px!important;
  min-width:23px!important;min-height:23px!important;
  margin:0!important;padding:0!important;
  border:2px solid #fff!important;border-radius:50%!important;
  background:#1f1f1f!important;color:#fff!important;
  font-size:15px!important;line-height:19px!important;
  cursor:pointer!important;pointer-events:auto!important;touch-action:manipulation!important;
}
#aiChatForm #aiImageBtn,
#aiChatForm #aiSendBtn{
  width:44px!important;height:44px!important;
  min-width:44px!important;min-height:44px!important;
  margin:0!important;padding:0!important;
  border-radius:13px!important;
}
#aiChatForm #aiChatInput{
  width:100%!important;min-width:0!important;
  min-height:44px!important;height:44px!important;max-height:110px!important;
  box-sizing:border-box!important;padding:10px 12px!important;
  border-radius:13px!important;
}
@media(max-width:600px){
  #aiChatForm.ai-chat-form{gap:6px!important;padding:7px!important}
  #aiChatForm .ai-compose-row{grid-template-columns:42px minmax(0,1fr) 42px!important;gap:6px!important}
  #aiChatForm #aiImagePreview{width:56px!important;height:56px!important;min-width:56px!important;max-width:56px!important;margin-left:1px!important}
  #aiChatForm #aiImagePreview img{width:54px!important;height:54px!important;min-width:54px!important;max-width:54px!important}
  #aiChatForm #aiImagePreview #aiImageRemove{top:-7px!important;right:-7px!important;width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important;font-size:14px!important}
  #aiChatForm #aiImageBtn,#aiChatForm #aiSendBtn{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;border-radius:12px!important}
  #aiChatForm #aiChatInput{height:42px!important;min-height:42px!important;max-height:90px!important;padding:9px 10px!important;font-size:16px!important;border-radius:12px!important}
}

/* FINAL AI CHAT WIDTH + FILE STATUS FIX */
@media (min-width: 601px){
  #aiChatMessages .ai-msg.ai-msg-bot{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
}
#aiChatForm #aiImagePreview:empty{display:none!important}
#aiChatForm #aiImagePreview [id$="Info"],
#aiChatForm [id="aiImageInputInfo"]{display:none!important}

/* FINAL AI FILE STATE FIX: never show legacy "Đã chọn" text in the AI composer. */
#aiChatForm #aiImagePreview [data-ai-file-label],
#aiChatForm #aiImagePreview #aiImageName,
#aiChatForm #aiImagePreview .ai-file-name,
#aiChatForm #aiImagePreview .ai-file-info,
#aiChatForm #aiImagePreview .ai-selected-file,
#aiChatForm #aiImagePreview .file-name,
#aiChatForm #aiImagePreview .file-info{display:none!important}

/* AI SEND BUTTON — keep desktop and mobile synchronized in the same blue tone. */
#aiChatForm #aiSendBtn{
  background:#1769c2!important;
  color:#fff!important;
  border:1px solid #1769c2!important;
  box-shadow:0 2px 5px rgba(23,105,194,.20)!important;
}
#aiChatForm #aiSendBtn:hover{background:#125aa8!important;border-color:#125aa8!important}
#aiChatForm #aiSendBtn:active{background:#0f4d91!important;border-color:#0f4d91!important}

/* iPhone Safari: keep the review field at 16px to prevent automatic page zoom when focused. */
@media(max-width:600px){
  .review-modal textarea[name="reviewText"]{font-size:16px!important;}
}


/* Only the two-word review label changes color on hover. */
.stats button.comment.review-trigger .review-label{transition:color .15s ease;}
.stats button.comment.review-trigger .review-star{color:#ffb500;}
.stats button.comment.review-trigger:hover .review-label{color:#0b63ce !important;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2px;}

/* Detailed notification posts */
.notice-item{cursor:pointer;transition:.16s ease;background:#fff}
.notice-item:hover{background:#f5fbff}
.notice-item:focus-visible{outline:2px solid #1676d2;outline-offset:-2px}
.notice-detail-modal{width:min(900px,calc(100vw - 28px));max-width:900px}
.notice-detail-modal h2{margin-bottom:6px;color:#0753ad}
.notice-detail-date{margin:0 0 14px;color:#6683a5;font-size:13px}
.notice-detail-media{display:grid;gap:14px;margin:0 0 18px}
.notice-detail-media:empty{display:none}
.notice-detail-media img{width:100%;max-height:520px;object-fit:contain;border-radius:14px;background:#f4f9fd;border:1px solid #d9eaf7;display:block}
.notice-detail-media video,.notice-detail-media iframe{width:100%;aspect-ratio:16/9;min-height:260px;border:0;border-radius:14px;background:#101827;display:block}
.notice-detail-body{font-size:16px;line-height:1.75;color:#294f78;white-space:normal;word-break:break-word;margin-bottom:16px}
@media (max-width:700px){.notice-detail-modal{width:calc(100vw - 20px);padding:20px 16px}.notice-detail-media video,.notice-detail-media iframe{min-height:210px}.notice-detail-body{font-size:15px}}



/* V10 — Notice detail fullscreen view
   Only affects the Notice detail viewer/modal. */
.notice-detail-modal,
.notice-detail-overlay,
.notification-detail-modal,
.notification-detail-overlay,
.announcement-detail-modal,
.announcement-detail-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  z-index: 99999 !important;
}

.notice-detail-modal .notice-detail-content,
.notice-detail-overlay .notice-detail-content,
.notification-detail-modal .notification-detail-content,
.notification-detail-overlay .notification-detail-content,
.announcement-detail-modal .announcement-detail-content,
.announcement-detail-overlay .announcement-detail-content {
  width: 100% !important;
  max-width: none !important;
  max-height: calc(100vh - 32px) !important;
  height: calc(100vh - 32px) !important;
  overflow-y: auto !important;
}

.notice-detail-modal img,
.notice-detail-overlay img,
.notification-detail-modal img,
.notification-detail-overlay img,
.announcement-detail-modal img,
.announcement-detail-overlay img {
  max-width: 100% !important;
  height: auto !important;
}

.notice-detail-modal video,
.notice-detail-overlay video,
.notification-detail-modal video,
.notification-detail-overlay video,
.announcement-detail-modal video,
.announcement-detail-overlay video {
  width: 100% !important;
  max-height: 78vh !important;
  object-fit: contain !important;
}

@media (max-width: 768px) {
  .notice-detail-modal,
  .notice-detail-overlay,
  .notification-detail-modal,
  .notification-detail-overlay,
  .announcement-detail-modal,
  .announcement-detail-overlay {
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
  }

  .notice-detail-modal .notice-detail-content,
  .notice-detail-overlay .notice-detail-content,
  .notification-detail-modal .notification-detail-content,
  .notification-detail-overlay .notification-detail-content,
  .announcement-detail-modal .announcement-detail-content,
  .announcement-detail-overlay .announcement-detail-content {
    height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 0 !important;
  }
}




/* V10 — Notice detail: fixed, larger close button */
.notice-detail-modal .close,
.notice-detail-modal .close-btn,
.notice-detail-modal .modal-close,
.notice-detail-overlay .close,
.notice-detail-overlay .close-btn,
.notice-detail-overlay .modal-close,
.notification-detail-modal .close,
.notification-detail-modal .close-btn,
.notification-detail-modal .modal-close,
.notification-detail-overlay .close,
.notification-detail-overlay .close-btn,
.notification-detail-overlay .modal-close,
.announcement-detail-modal .close,
.announcement-detail-modal .close-btn,
.announcement-detail-modal .modal-close,
.announcement-detail-overlay .close,
.announcement-detail-overlay .close-btn,
.announcement-detail-overlay .modal-close {
  position: fixed !important;
  top: 18px !important;
  right: 22px !important;
  z-index: 100000 !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 32px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

@media (max-width: 768px) {
  .notice-detail-modal .close,
  .notice-detail-modal .close-btn,
  .notice-detail-modal .modal-close,
  .notice-detail-overlay .close,
  .notice-detail-overlay .close-btn,
  .notice-detail-overlay .modal-close,
  .notification-detail-modal .close,
  .notification-detail-modal .close-btn,
  .notification-detail-modal .modal-close,
  .notification-detail-overlay .close,
  .notification-detail-overlay .close-btn,
  .notification-detail-overlay .modal-close,
  .announcement-detail-modal .close,
  .announcement-detail-modal .close-btn,
  .announcement-detail-modal .modal-close,
  .announcement-detail-overlay .close,
  .announcement-detail-overlay .close-btn,
  .announcement-detail-overlay .modal-close {
    top: 12px !important;
    right: 12px !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    font-size: 34px !important;
  }
}


/* V10 — Dark mode for Notice detail only
   Keeps article text and close button clearly visible. */
body.dark-mode #noticeDetailModal .notice-detail-body{
  color:#f1f5f9!important;
}
body.dark-mode #noticeDetailModal .notice-detail-date{
  color:#b8c9da!important;
}
body.dark-mode #noticeDetailModal h2{
  color:#eaf4ff!important;
}
body.dark-mode #noticeDetailModal .modal-close{
  color:#ffffff!important;
  background:transparent!important;
  text-shadow:0 1px 4px rgba(0,0,0,.55);
}
body.dark-mode #noticeDetailModal .notice-detail-media img{
  background:#111b27!important;
  border-color:#33495f!important;
}
body.dark-mode #noticeDetailModal .modal{
  background:#101a27!important;
}


/* V10 FINAL — Notice detail close button + balanced dark-mode typography */
#noticeDetailModal .modal-close {
  position: fixed !important;
  top: 18px !important;
  right: 22px !important;
  z-index: 100000 !important;
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  padding: 0 !important;
  border: 1px solid rgba(65,101,141,.18) !important;
  border-radius: 50% !important;
  background: #e8eef5 !important;
  color: #41658d !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 34px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  box-shadow: 0 5px 18px rgba(0,0,0,.16) !important;
  cursor: pointer !important;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease !important;
}

#noticeDetailModal .modal-close:hover {
  background: #dce6f0 !important;
  transform: scale(1.04);
  box-shadow: 0 7px 22px rgba(0,0,0,.20) !important;
}

body.dark-mode #noticeDetailModal .modal-close {
  background: #2a3b4d !important;
  border-color: rgba(255,255,255,.10) !important;
  color: #eef3f7 !important;
  box-shadow: 0 5px 18px rgba(0,0,0,.35) !important;
}

body.dark-mode #noticeDetailModal .modal-close:hover {
  background: #34495d !important;
}

body.dark-mode #noticeDetailModal .notice-detail-body {
  color: #cbd6e0 !important;
}

body.dark-mode #noticeDetailModal .notice-detail-date {
  color: #91a5b8 !important;
}

body.dark-mode #noticeDetailModal h2 {
  color: #d7e2ec !important;
}

body.dark-mode #noticeDetailModal .modal {
  background: #101a27 !important;
}

@media (max-width: 768px) {
  #noticeDetailModal .modal-close {
    top: 12px !important;
    right: 12px !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    font-size: 35px !important;
  }
}


/* V10 FINAL — Notice box dark-mode visual polish
   Harmonize with the existing navy card system; avoid bright white surfaces. */
body.dark-mode .notice-widget,
body.dark-mode .notice-panel,
body.dark-mode .notifications-panel,
body.dark-mode .notice-card {
  background: #172536 !important;
  border-color: #29415a !important;
  color: #c4d1de !important;
}

body.dark-mode .notice-widget .notice-header,
body.dark-mode .notice-panel .notice-header,
body.dark-mode .notifications-panel .notice-header,
body.dark-mode .notice-card .notice-header {
  background: #1d3145 !important;
  border-color: #29415a !important;
  color: #b9d8f5 !important;
}

body.dark-mode .notice-widget .notice-header h3,
body.dark-mode .notice-panel .notice-header h3,
body.dark-mode .notifications-panel .notice-header h3,
body.dark-mode .notice-card .notice-header h3 {
  color: #b9d8f5 !important;
}

body.dark-mode .notice-widget .notice-header a,
body.dark-mode .notice-panel .notice-header a,
body.dark-mode .notifications-panel .notice-header a,
body.dark-mode .notice-card .notice-header a {
  color: #8faec8 !important;
}

body.dark-mode .notice-widget .notice-item,
body.dark-mode .notice-panel .notice-item,
body.dark-mode .notifications-panel .notice-item,
body.dark-mode .notice-card .notice-item {
  background: #172536 !important;
  border-color: #29415a !important;
}

body.dark-mode .notice-widget .notice-item:hover,
body.dark-mode .notice-panel .notice-item:hover,
body.dark-mode .notifications-panel .notice-item:hover,
body.dark-mode .notice-card .notice-item:hover {
  background: #1b2d40 !important;
}

body.dark-mode .notice-widget .notice-item-title,
body.dark-mode .notice-panel .notice-item-title,
body.dark-mode .notifications-panel .notice-item-title,
body.dark-mode .notice-card .notice-item-title {
  color: #b9d0e3 !important;
}

body.dark-mode .notice-widget .notice-item-date,
body.dark-mode .notice-panel .notice-item-date,
body.dark-mode .notifications-panel .notice-item-date,
body.dark-mode .notice-card .notice-item-date {
  color: #8298ad !important;
}

body.dark-mode .notice-widget .notice-item p,
body.dark-mode .notice-panel .notice-item p,
body.dark-mode .notifications-panel .notice-item p,
body.dark-mode .notice-card .notice-item p {
  color: #9eb0c0 !important;
}


/* V10 FINAL — Sidebar cards in Dark Mode */
body.dark-mode .sidebar .side-panel {
  background: #172536 !important;
  border-color: #29415a !important;
  color: #c4d1de !important;
}

body.dark-mode .sidebar .side-heading {
  background: #1d3145 !important;
  border-color: #29415a !important;
}

body.dark-mode .sidebar .side-heading h2 {
  color: #9fc9f2 !important;
}

body.dark-mode .sidebar .side-heading a {
  color: #8faec8 !important;
}

body.dark-mode .sidebar .notice-list li {
  background: #172536 !important;
  border-color: #29415a !important;
  color: #b8c9d9 !important;
}

body.dark-mode .sidebar .notice-list li:hover {
  background: #1b2d40 !important;
}

body.dark-mode .sidebar .notice-list time {
  background: #1b2d40 !important;
  border-color: #36516b !important;
  color: #82b8eb !important;
}

body.dark-mode .sidebar .notice-list time b {
  color: #a9d2f5 !important;
}

body.dark-mode .sidebar .notice-list time small {
  color: #91afca !important;
}

body.dark-mode .sidebar .latest {
  background: #172536 !important;
}

body.dark-mode .sidebar .latest-list {
  background: #172536 !important;
}

body.dark-mode .sidebar .latest-item {
  background: #172536 !important;
  border-color: #29415a !important;
  color: #b8c9d9 !important;
}

body.dark-mode .sidebar .latest-item:hover {
  background: #1b2d40 !important;
}

body.dark-mode .sidebar .latest-list .empty-state,
body.dark-mode .sidebar .latest-list .empty,
body.dark-mode .sidebar .latest-list p {
  background: #172536 !important;
  color: #aebdca !important;
}

/* Close button: same size/fill, thinner X */
#noticeDetailModal .modal-close {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  border-radius: 50% !important;
  background: #2a3b4d !important;
  color: transparent !important;
  font-size: 0 !important;
  font-weight: 400 !important;
  position: fixed !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#noticeDetailModal .modal-close::before,
#noticeDetailModal .modal-close::after {
  content: "" !important;
  position: absolute !important;
  width: 24px !important;
  height: 2.5px !important;
  border-radius: 2px !important;
  background: #eef3f7 !important;
}

#noticeDetailModal .modal-close::before {
  transform: rotate(45deg) !important;
}

#noticeDetailModal .modal-close::after {
  transform: rotate(-45deg) !important;
}

body.dark-mode #noticeDetailModal .modal-close {
  background: #2a3b4d !important;
  color: transparent !important;
}

body.dark-mode #noticeDetailModal .modal-close::before,
body.dark-mode #noticeDetailModal .modal-close::after {
  background: #e3eaf0 !important;
  height: 2.5px !important;
}

@media (max-width: 768px) {
  #noticeDetailModal .modal-close {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
  }
  #noticeDetailModal .modal-close::before,
  #noticeDetailModal .modal-close::after {
    width: 25px !important;
    height: 2.5px !important;
  }
}


/* V10 FINAL FIX 2 — force sidebar notice/latest cards to match dark theme */
body.dark-mode .content-layout .sidebar .side-panel,
body.dark-mode .content-layout aside.sidebar .side-panel,
body.dark-mode aside.sidebar section.side-panel,
body.dark-mode aside.sidebar section.side-panel.latest {
  background-color:#172536 !important;
  background-image:none !important;
  color:#c4d1de !important;
  border:1px solid #29415a !important;
  box-shadow:0 3px 12px rgba(0,0,0,.24) !important;
}

body.dark-mode .content-layout .sidebar .side-panel .side-heading,
body.dark-mode .content-layout aside.sidebar .side-heading {
  background-color:#1d3145 !important;
  background-image:none !important;
  color:#9fc9f2 !important;
  border-bottom:1px solid #29415a !important;
}

body.dark-mode .content-layout .sidebar .side-heading h2 {
  color:#9fc9f2 !important;
}

body.dark-mode .content-layout .sidebar .side-heading a {
  color:#8faec8 !important;
}

body.dark-mode .content-layout .sidebar .notice-list,
body.dark-mode .content-layout .sidebar .latest-list {
  background:#172536 !important;
  color:#b8c9d9 !important;
}

body.dark-mode .content-layout .sidebar .notice-list li,
body.dark-mode .content-layout .sidebar .latest-list > *,
body.dark-mode .content-layout .sidebar .latest-item,
body.dark-mode .content-layout .sidebar .latest-empty {
  background:#172536 !important;
  background-image:none !important;
  color:#b8c9d9 !important;
  border-color:#29415a !important;
}

body.dark-mode .content-layout .sidebar .notice-list li span,
body.dark-mode .content-layout .sidebar .latest-item span,
body.dark-mode .content-layout .sidebar .latest-list p {
  color:#b8c9d9 !important;
}

body.dark-mode .content-layout .sidebar .notice-list time {
  background:#1b2d40 !important;
  border-color:#36516b !important;
  color:#82b8eb !important;
}

body.dark-mode .content-layout .sidebar .notice-list time b {
  color:#a9d2f5 !important;
}

body.dark-mode .content-layout .sidebar .notice-list time small {
  color:#91afca !important;
}

/* Notice detail close: same circle, thinner X */
#noticeDetailModal .modal-close::before,
#noticeDetailModal .modal-close::after {
  width:24px !important;
  height:2px !important;
  border-radius:2px !important;
  background:#e3eaf0 !important;
}


/* V10 FINAL FIX 3 — Light Mode close-button hover */
#noticeDetailModal .modal-close:hover {
  background:#d7e3ef !important;
  color:transparent !important;
  box-shadow:0 7px 22px rgba(0,0,0,.18) !important;
}

#noticeDetailModal .modal-close:hover::before,
#noticeDetailModal .modal-close:hover::after {
  background:#41658d !important;
}

/* Keep Dark Mode hover unchanged and readable */
body.dark-mode #noticeDetailModal .modal-close:hover {
  background:#34495d !important;
}

body.dark-mode #noticeDetailModal .modal-close:hover::before,
body.dark-mode #noticeDetailModal .modal-close:hover::after {
  background:#e3eaf0 !important;
}


/* V10 — Dark Mode mobile/tablet: only requested UI adjustments */

/* Bottom navigation: all three labels use the same readable tone. */
body.dark-mode .mobile-bottom-item,
body.dark-mode .mobile-bottom-item.active {
  color:#9db4ca !important;
}

/* Login dialog close button: brighter and easier to see in dark mode. */
body.dark-mode .auth-modal .modal-close,
body.dark-mode #authModal .modal-close,
body.dark-mode .auth-modal .close,
body.dark-mode #authModal .close {
  color:#dbe8f3 !important;
  background:#263b50 !important;
  border-color:#55718b !important;
  text-shadow:0 1px 3px rgba(0,0,0,.35) !important;
}


/* AI Assistant — larger close X only */
.ai-chatbox .ai-chat-close,
.ai-chatbox .chat-close,
.ai-chatbox .close-btn,
.ai-chatbox .modal-close,
#aiChatbox .ai-chat-close,
#aiChatbox .chat-close,
#aiChatbox .close-btn,
#aiChatbox .modal-close {
  font-size:30px !important;
  font-weight:600 !important;
  line-height:1 !important;
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}


/* Search icon — match Dark Mode button hover lift only */
@media (hover:hover) and (pointer:fine) {
  body.dark-mode .mobile-search-toggle:hover,
  body.dark-mode .search-toggle:hover,
  body.dark-mode .mobile-search button:hover,
  body.dark-mode .searchbox button:hover {
    transform:translateY(-3px) !important;
  }
}


/* Search icon — exact mobile/tablet hover motion, matching theme button */
@media (hover:hover) and (pointer:fine) {
  #mobileSearchToggle:hover {
    transform:translateY(-1px) !important;
  }
}


/* FINAL — Search icon hover: same lift motion as Dark Mode icon */
.mobile-search-toggle {
  transition: transform .18s ease !important;
}

.mobile-search-toggle:hover {
  transform: translateY(-2px) !important;
}


/* FINAL — Keep Dark Mode icon stationary to match Search icon */
.theme-toggle,
.mobile-theme-toggle {
  transform: none !important;
}

.theme-toggle:hover,
body.dark-mode .theme-toggle:hover,
.mobile-theme-toggle:hover,
body.dark-mode .mobile-theme-toggle:hover {
  transform: none !important;
}


/* AI Assistant — make the close X slightly larger only */
.ai-chatbox .ai-chat-close,
.ai-chatbox .chat-close,
.ai-chatbox .close-btn,
.ai-chatbox .modal-close,
#aiChatbox .ai-chat-close,
#aiChatbox .chat-close,
#aiChatbox .close-btn,
#aiChatbox .modal-close {
  font-size:34px !important;
  font-weight:600 !important;
  line-height:1 !important;
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  min-height:44px !important;
}


/* AI Assistant — header controls: larger + perfectly aligned */
.ai-chatbox .ai-chat-settings,
.ai-chatbox .ai-chat-close,
#aiChatbox .ai-chat-settings,
#aiChatbox .ai-chat-close {
  width:46px !important;
  height:46px !important;
  min-width:46px !important;
  min-height:46px !important;
  padding:0 !important;
  margin:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  vertical-align:middle !important;
  line-height:1 !important;
  box-sizing:border-box !important;
}

.ai-chatbox .ai-chat-settings,
#aiChatbox .ai-chat-settings {
  font-size:30px !important;
}

.ai-chatbox .ai-chat-close,
#aiChatbox .ai-chat-close {
  font-size:36px !important;
  font-weight:600 !important;
}


/* AI Assistant — header settings + close: same size, centered and slightly larger */
#aiSettingsBtn,
#aiCloseBtn {
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  min-height:44px !important;
  margin:0 !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  vertical-align:middle !important;
  box-sizing:border-box !important;
  line-height:1 !important;
}

#aiSettingsBtn {
  font-size:27px !important;
}

#aiCloseBtn {
  font-size:34px !important;
  font-weight:600 !important;
}


/* AI Assistant — keep X button size, make the X stroke thinner */
#aiCloseBtn {
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  min-height:44px !important;
  font-size:34px !important;
  font-weight:400 !important;
  line-height:1 !important;
}


/* AI Assistant — X stroke like the reference: thin, while keeping button/icon size */
#aiCloseBtn {
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  min-height:44px !important;
  font-size:34px !important;
  font-weight:300 !important;
  font-family:Arial, Helvetica, sans-serif !important;
  line-height:1 !important;
  -webkit-font-smoothing:antialiased !important;
}


/* AI Assistant — reference-style thin X, keep button size unchanged */
#aiCloseBtn {
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  min-height:44px !important;
  padding:0 !important;
  font-size:0 !important;
  font-weight:400 !important;
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

#aiCloseBtn::before,
#aiCloseBtn::after {
  content:"" !important;
  position:absolute !important;
  width:25px !important;
  height:2px !important;
  border-radius:2px !important;
  background:currentColor !important;
  left:50% !important;
  top:50% !important;
  transform-origin:center !important;
}

#aiCloseBtn::before {
  transform:translate(-50%,-50%) rotate(45deg) !important;
}

#aiCloseBtn::after {
  transform:translate(-50%,-50%) rotate(-45deg) !important;
}


/* AI Assistant — slightly smaller X, same thin stroke */
#aiCloseBtn::before,
#aiCloseBtn::after {
  width:21px !important;
  height:2px !important;
}


/* AI Assistant — X same visual size as Settings icon */
#aiCloseBtn::before,
#aiCloseBtn::after {
  width:19px !important;
  height:2px !important;
}


/* FINAL — Preserve Admin-only visibility of AI API Settings */
#aiSettingsBtn[hidden] {
  display:none !important;
}


/* Notice Detail — optimized responsive close button size only */
#noticeDetailModal .modal-close {
  width:46px !important;
  height:46px !important;
  min-width:46px !important;
  min-height:46px !important;
  font-size:30px !important;
}

@media (max-width: 768px) {
  #noticeDetailModal .modal-close {
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;
    font-size:30px !important;
    top:12px !important;
    right:12px !important;
  }
}

@media (min-width:769px) and (max-width:1200px) {
  #noticeDetailModal .modal-close {
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    min-height:48px !important;
    font-size:31px !important;
  }
}


/* Notice Detail — smaller X only, keep the button structure/colors */
#noticeDetailModal .modal-close {
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  font-size:26px !important;
}

@media (max-width:768px) {
  #noticeDetailModal .modal-close {
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    font-size:26px !important;
    top:12px !important;
    right:12px !important;
  }
}

@media (min-width:769px) and (max-width:1200px) {
  #noticeDetailModal .modal-close {
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    font-size:27px !important;
  }
}


/* 2026-10-06 — MUSIC GAME #01 EMBED
   Chỉ thêm khối trò chơi vào mục Trò chơi âm nhạc; không thay đổi các layout khác. */
.music-game-embed{
  grid-column:1/-1;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
  box-shadow:var(--shadow);
}
.music-game-embed-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 16px;
  border-bottom:1px solid var(--line);
  background:#f5fbff;
}
.music-game-badge{
  flex:none;
  padding:6px 9px;
  border-radius:9px;
  background:#eaf4ff;
  color:#0758b8;
  font-size:11px;
  font-weight:900;
  letter-spacing:.04em;
}
.music-game-embed-head strong{display:block;color:#0753ad;font-size:15px;line-height:1.3}
.music-game-embed-head small{display:block;color:#6b87a7;font-size:12px;margin-top:2px}
.music-game-embed iframe{
  display:block;
  width:100%;
  height:900px;
  border:0;
  background:transparent;
}
body.dark-mode .music-game-embed{background:#162536;border-color:#304a64;box-shadow:0 8px 24px rgba(0,0,0,.18)}
body.dark-mode .music-game-embed-head{background:#142131;border-bottom-color:#304a64}
body.dark-mode .music-game-badge{background:#1c334d;color:#8ec5ff}
body.dark-mode .music-game-embed-head strong{color:#8ec5ff}
body.dark-mode .music-game-embed-head small{color:#9eb5cd}
@media(max-width:700px){
  .music-game-embed{border-radius:17px}
  .music-game-embed-head{padding:11px 12px;align-items:flex-start}
  .music-game-embed-head strong{font-size:14px}
  .music-game-embed iframe{height:980px}
}
@media(max-width:430px){
  .music-game-embed-head{gap:8px}
  .music-game-badge{font-size:10px;padding:5px 7px}
  .music-game-embed iframe{height:1030px}
}

/* 2026-10-06 — Admin editor for Game 01 only */
.admin-game01-section{border-top:1px solid #e2eef8;padding-top:20px;margin-top:22px}
.admin-game01-section h2{margin:0 0 7px;color:#084f9f;font-size:20px}
.game01-question-list{display:grid;gap:16px;margin-top:18px}
.game01-question-editor{border:1px solid #cfe2f3;border-radius:16px;padding:16px;background:#fbfdff}
.game01-q-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px;color:#17558f}
.game01-q-head span{font-size:13px;color:#6b87a7;font-weight:700}
.game01-answer-row{margin-top:4px}
.game01-admin-global{padding-bottom:4px}
@media(max-width:700px){.game01-q-head{align-items:flex-start;flex-direction:column;gap:4px}.game01-question-editor{padding:13px}}
body.dark-mode .admin-game01-section{border-top-color:#304a64}
body.dark-mode .admin-game01-section h2{color:#8ec5ff}
body.dark-mode .game01-question-editor{background:#142131;border-color:#304a64}
body.dark-mode .game01-q-head{color:#dbe8f7}
body.dark-mode .game01-q-head span{color:#9eb5cd}

.admin-media-field{min-width:0}
.admin-media-field .form-hint{display:block;margin-top:5px}
.admin-media-field .inline-check{margin-top:7px}
\n/* 2026-10-06 — Admin custom game uploader */
.admin-game-library-section{border-top:1px solid #e2eef8;padding-top:20px;margin-top:22px}
.admin-game-library-section h2{margin:0 0 7px;color:#084f9f;font-size:20px}
.game-upload-source-box{border:1px solid #cfe2f3;border-radius:16px;background:#f7fbff;padding:15px;margin-top:10px}
.game-upload-source-title{font-weight:800;color:#17558f;margin-bottom:10px}
.game-upload-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.game-upload-drop{border:2px dashed #b9d7f3;border-radius:13px;padding:18px;text-align:center;color:#51779e;background:#fff;cursor:pointer}
.game-upload-drop.dragover{border-color:#1670d2;background:#eef7ff}
.game-upload-drop strong,.game-upload-drop small{display:block}.game-upload-drop small{margin-top:5px}
.game-upload-info{margin-top:10px;padding:10px 12px;border-radius:10px;background:#eaf4ff;color:#285c8f;font-size:13px}.game-upload-info span{display:block;margin-top:3px;word-break:break-word}
.game-upload-progress{margin-top:12px}.game-upload-progress>div{display:flex;justify-content:space-between;gap:10px;font-size:13px;font-weight:700;color:#37668f}.game-upload-progress progress{width:100%;height:10px;margin-top:6px;accent-color:#1670d2}
.game-library-admin-list{display:grid;gap:12px;margin-top:15px}.game-library-admin-item{display:flex;gap:12px;align-items:flex-start;border:1px solid #cfe2f3;border-radius:15px;padding:13px;background:#fbfdff}.game-library-admin-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:12px;background:#eaf4ff;font-size:24px;flex:none}.game-library-admin-meta{min-width:0;flex:1}.game-library-admin-meta strong{display:block;color:#15518b}.game-library-admin-meta small{display:block;color:#6b87a7;margin-top:3px}.game-library-admin-meta p{margin:6px 0;color:#527598;font-size:13px}.game-library-admin-actions{display:flex;flex-wrap:wrap;gap:7px}
.custom-game-embed iframe{height:900px}
body.dark-mode .admin-game-library-section{border-top-color:#304a64}.body.dark-mode .game-upload-source-box{background:#142131}
body.dark-mode .game-upload-source-box{background:#142131;border-color:#304a64}.body.dark-mode .game-upload-drop{background:#101c29}
body.dark-mode .game-upload-drop{background:#101c29;border-color:#405b74;color:#a9c1d8}.body.dark-mode .game-upload-info{background:#1b334b;color:#c8d9ea}.body.dark-mode .game-library-admin-item{background:#142131;border-color:#304a64}.body.dark-mode .game-library-admin-icon{background:#1c334d}.body.dark-mode .game-library-admin-meta strong{color:#dbe8f7}.body.dark-mode .game-library-admin-meta small,.body.dark-mode .game-library-admin-meta p{color:#9eb5cd}
@media(max-width:700px){.game-upload-actions{display:grid;grid-template-columns:1fr}.game-upload-actions>*{width:100%}.game-library-admin-item{align-items:flex-start}.custom-game-embed iframe{height:900px}}
@media(max-width:430px){.game-upload-source-box{padding:12px}.game-upload-drop{padding:15px 10px}.custom-game-embed iframe{height:900px}}

/* 2026-10-06 — Compact Admin accordions / Game editor */
.admin-editor-section > h2{margin:0!important}
.admin-section-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;border:0;background:transparent;color:#084f9f;font:inherit;font-weight:800;font-size:20px;text-align:left;padding:2px 0;cursor:pointer}
.admin-section-title{min-width:0;display:block}
.admin-section-arrow,.admin-block-arrow{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid #cfe2f3;border-radius:10px;background:#f4f9ff;color:#17558f;font-size:22px;line-height:1;flex:none;transition:transform .18s ease}
.admin-section-toggle[aria-expanded="true"] .admin-section-arrow,.admin-block-toggle[aria-expanded="true"] .admin-block-arrow{transform:rotate(180deg)}
.admin-section-collapsed > :not(h2){display:none!important}
.admin-collapsible-block{overflow:hidden}
.admin-block-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #cfe2f3;border-radius:12px;background:#f7fbff;color:#17558f;font-weight:800;font-size:15px;text-align:left;padding:10px 12px;cursor:pointer}
.admin-block-toggle .game01-q-answer{font-size:12px;color:#6b87a7;font-weight:700;white-space:nowrap}
.admin-block-content{padding-top:12px}
.admin-block-collapsed > .admin-block-content{display:none!important}
.game01-question-editor{padding:12px!important}
.game01-question-editor .admin-block-toggle{margin:0}
body.dark-mode .admin-section-toggle{color:#8ec5ff}
body.dark-mode .admin-section-arrow,body.dark-mode .admin-block-arrow{background:#17293b;border-color:#405b74;color:#cfe3f8}
body.dark-mode .admin-block-toggle{background:#17293b;border-color:#405b74;color:#dbe8f7}
body.dark-mode .admin-block-toggle .game01-q-answer{color:#9eb5cd}
@media(max-width:700px){
  .admin-section-toggle{font-size:18px}
  .admin-section-arrow,.admin-block-arrow{width:30px;height:30px}
  .admin-block-toggle{font-size:14px;padding:10px}
  .admin-block-toggle .game01-q-answer{font-size:11px}
}

/* 2026-10-06 — Top-level Admin editor accordions */
.admin-accordion-tip{margin:10px 0 14px;padding:9px 12px;border:1px dashed #cfe2f3;border-radius:10px;background:#f8fbff;color:#58799a;font-size:13px}
.admin-editor-section{border:1px solid #d5e6f5!important;border-radius:14px!important;padding:14px 16px!important;margin:0 0 14px!important;background:#fff}
.admin-editor-section>h2{display:block!important;padding:0!important}
.admin-section-collapsed{padding-bottom:14px!important}
.admin-section-collapsed>h2{margin-bottom:0!important}
body.dark-mode .admin-editor-section{background:#142131;border-color:#304a64!important}
body.dark-mode .admin-accordion-tip{background:#17293b;border-color:#405b74;color:#a9c1d8}

/* 2026-10-06 — Admin top-level groups: Giao diện / Game / Nội dung */
.admin-editor-group{border:1px solid #d5e6f5;border-radius:16px;margin:0 0 14px;padding:14px 16px;background:#fff}
.admin-editor-group>h2{margin:0!important;padding:0!important}
.admin-group-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;border:0;background:transparent;color:#084f9f;font:inherit;font-weight:800;font-size:21px;text-align:left;padding:2px 0;cursor:pointer}
.admin-group-title{min-width:0;display:block}
.admin-group-arrow{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid #cfe2f3;border-radius:11px;background:#f4f9ff;color:#17558f;font-size:23px;line-height:1;flex:none;transition:transform .18s ease}
.admin-group-toggle[aria-expanded="true"] .admin-group-arrow{transform:rotate(180deg)}
.admin-editor-group>.admin-editor-section{margin-top:14px!important}
.admin-editor-group.admin-group-collapsed{padding-bottom:14px}
.admin-editor-group.admin-group-collapsed>.admin-editor-section{display:none!important}
body.dark-mode .admin-editor-group{background:#142131;border-color:#304a64}
body.dark-mode .admin-group-toggle{color:#8ec5ff}
body.dark-mode .admin-group-arrow{background:#17293b;border-color:#405b74;color:#cfe3f8}
@media(max-width:700px){
  .admin-editor-group{padding:12px 13px;border-radius:14px}
  .admin-group-toggle{font-size:18px}
  .admin-group-arrow{width:32px;height:32px;font-size:21px}
}

/* Đăng nội dung: nhóm đăng bài hát + quản lý thông báo */
.post-subtabs[hidden]{display:none!important}
[data-active-tab="profile"] #postSubtabs,[data-active-tab="mine"] #postSubtabs,[data-active-tab="site"] #postSubtabs{display:none!important}

.post-subtab{font-size:14px}
body.dark-mode .post-subtabs{border-color:#294d74}
body.dark-mode .post-subtab{background:#122b4a;color:#d7e8fb;border-color:#315a83}
body.dark-mode .post-subtab.active{background:#0861c9;color:#fff;border-color:#0861c9}
@media (max-width:600px){.post-subtabs{margin:-4px 0 14px}.post-subtab{flex:1;min-height:44px}}

/* 2026-10-06 — Game quản lý chuyển vào mục Đăng nội dung */
.admin-games-post-panel{padding-top:4px}
.admin-games-post-panel .admin-editor-section:first-child{margin-top:0}
body.dark-mode .admin-games-post-panel{color:#dbe8f7}

/* Admin management: hidden panels must remain hidden when switching to All content/Profile. */
.post-subtabs[hidden], .manage-panel[hidden], .post-subpanel[hidden], #allContentAdmin[hidden], #allContentNotices[hidden], #allContentGames[hidden] { display: none !important; }
body.dark-mode .all-content-filters{border-color:#294d74}
body.dark-mode .all-content-filters .post-subtab{background:#122b4a;color:#d7e8fb;border-color:#315a83}
body.dark-mode .all-content-filters .post-subtab.active{background:#0861c9;color:#fff;border-color:#0861c9}
@media (max-width:600px){.all-content-filters{margin-bottom:14px}.all-content-filters .post-subtab{flex:1;min-height:44px}}

/* Admin: compact filters for Tất cả nội dung */
.all-content-panel{display:block}
.all-content-intro{margin-bottom:18px}
.all-content-intro h2{margin:0 0 6px}
.all-content-filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.all-content-filter{border:1px solid #cfe2f8;background:#f7fbff;color:#184f8d;border-radius:14px;padding:11px 18px;font:inherit;font-weight:700;cursor:pointer}
.all-content-filter.active{background:#1769d1;color:#fff;border-color:#1769d1}
.all-content-results{display:grid;gap:10px}
body.dark-mode .all-content-filter{background:#132844;color:#d7e7fb;border-color:#294b70}
body.dark-mode .all-content-filter.active{background:#2b78d4;color:#fff;border-color:#2b78d4}

/* Admin: compact user management */
.admin-users-section{margin-top:22px;border:1px solid var(--border,#cfe3f7);border-radius:22px;padding:18px;background:var(--card,#fff)}
.admin-users-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:14px}.admin-users-head h2{margin:0 0 6px}.admin-users-count{padding:8px 12px;border-radius:999px;background:rgba(31,111,214,.09);color:#16569a;font-weight:700;white-space:nowrap}.admin-users-list{display:grid;gap:10px}.admin-user-item{border:1px solid var(--border,#cfe3f7);border-radius:16px;overflow:hidden;background:var(--card,#fff)}.admin-user-item summary{list-style:none;cursor:pointer;padding:15px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:700}.admin-user-item summary::-webkit-details-marker{display:none}.admin-user-item summary:after{content:'⌄';font-size:22px;line-height:1}.admin-user-item[open] summary:after{content:'⌃'}.admin-user-name{font-size:18px;color:var(--text,#174c86)}.admin-user-role{font-size:13px;padding:5px 9px;border-radius:999px;background:rgba(31,111,214,.08);color:#32679b}.admin-user-detail{padding:0 18px 18px;border-top:1px solid var(--border,#cfe3f7)}.admin-user-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}.admin-user-grid>div{padding:11px 12px;border-radius:12px;background:rgba(31,111,214,.045)}.admin-user-grid span,.admin-user-grid strong{display:block}.admin-user-grid span{font-size:12px;opacity:.72;margin-bottom:4px}.admin-user-actions{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}.admin-user-subsection{margin-top:14px;padding-top:12px;border-top:1px dashed var(--border,#cfe3f7)}.admin-user-subsection h3{font-size:16px;margin:0 0 9px}.admin-activity-row,.admin-review-row{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid rgba(127,157,190,.16)}.admin-activity-row>span{font-size:18px}.admin-activity-row strong,.admin-activity-row small{display:block}.admin-activity-row small,.admin-review-row small{opacity:.72;margin-top:2px}.admin-review-row{flex-wrap:wrap}.admin-review-row>span{flex:1 1 100%;line-height:1.5}.admin-review-row .danger-btn{margin-left:auto}.admin-user-loading{padding:18px;text-align:center;opacity:.75}
body.dark-mode .admin-users-section,body.dark-mode .admin-user-item{background:#102c4c;border-color:#315a7f}body.dark-mode .admin-user-name{color:#dcecff}body.dark-mode .admin-user-role,body.dark-mode .admin-users-count{background:rgba(100,170,240,.14);color:#cfe7ff}body.dark-mode .admin-user-grid>div{background:rgba(100,170,240,.07)}
@media(max-width:700px){.admin-users-head{display:block}.admin-users-count{display:inline-block;margin-top:8px}.admin-user-grid{grid-template-columns:1fr}.admin-user-item summary{padding:13px 14px}.admin-user-detail{padding:0 14px 14px}.admin-user-name{font-size:16px}.admin-user-actions .light-btn,.admin-user-actions .danger-btn{width:100%}}

/* Landscape control for eLearning, games and video only */
.landscape-rotate-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin:8px auto 12px;padding:9px 15px;border:1px solid var(--border,#d7dee8);border-radius:10px;background:var(--card,#fff);color:var(--text,#1f2937);font:inherit;font-weight:600;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.08)}
body.dark-mode .landscape-rotate-btn{background:#16253d;color:#dbeafe;border-color:#314563}
.landscape-inline-btn{display:inline-flex;align-items:center;justify-content:center;margin:8px auto 0;padding:8px 14px;border:1px solid var(--border,#d7dee8);border-radius:9px;background:var(--card,#fff);color:var(--text,#1f2937);font:inherit;font-weight:600;cursor:pointer}
body.dark-mode .landscape-inline-btn{background:#16253d;color:#dbeafe;border-color:#314563}
@media (orientation:landscape) and (max-height:600px){.embed-modal{width:96vw;max-width:1400px;height:94vh}.embed-stage{max-height:calc(94vh - 150px)}}
@media (max-width:600px){.landscape-rotate-btn{font-size:14px;padding:8px 13px;margin:6px auto 10px}}

/* eLearning modal close button — dark mode: bright for clear visibility */
body.dark-mode #embedModal #closeEmbed{
  color:#eaf4ff !important;
  text-shadow:0 0 2px rgba(255,255,255,.18);
}
body.dark-mode #embedModal #closeEmbed:hover{
  color:#ffffff !important;
}


/* Mobile fullscreen fallback for eLearning/embed when Fullscreen API is unavailable (notably iOS Safari). */
#embedModal.hhm-mobile-fullscreen{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  max-width:none!important;
  height:100dvh!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border-radius:0!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
#embedModal.hhm-mobile-fullscreen .embed-stage{
  flex:1 1 auto!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  margin:0!important;
  border-radius:0!important;
  overflow:hidden!important;
}
#embedModal.hhm-mobile-fullscreen .embed-stage iframe,
#embedModal.hhm-mobile-fullscreen .embed-stage video,
#embedModal.hhm-mobile-fullscreen .scorm-frame{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  min-height:0!important;
  border:0!important;
  border-radius:0!important;
  display:block!important;
}
#embedModal.hhm-mobile-fullscreen #embedHint,
#embedModal.hhm-mobile-fullscreen #embedExternal,
#embedModal.hhm-mobile-fullscreen #documentToolbar,
#embedModal.hhm-mobile-fullscreen #scormLmsBar{
  display:none!important;
}
#embedModal.hhm-mobile-fullscreen h2{
  flex:0 0 auto!important;
  margin:0!important;
  padding:8px 54px 8px 16px!important;
  min-height:0!important;
  text-align:left!important;
  font-size:16px!important;
  line-height:1.2!important;
}
#embedModal.hhm-mobile-fullscreen #closeEmbed{
  position:fixed!important;
  z-index:10!important;
  top:max(8px,env(safe-area-inset-top))!important;
  right:max(8px,env(safe-area-inset-right))!important;
}
@media (max-width:700px){
  #embedModal.hhm-mobile-fullscreen .landscape-rotate-btn{display:none!important}
}

/* FULLSCREEN eLearning — tự động lấp đầy màn hình trên desktop/tablet/mobile */
#embedStage:fullscreen,
#embedStage:-webkit-full-screen,
#embedStage .doc-workspace:fullscreen,
#embedStage .doc-workspace:-webkit-full-screen{
  width:100vw !important;
  height:100vh !important;
  max-width:none !important;
  max-height:none !important;
  min-height:100vh !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:0 !important;
  aspect-ratio:auto !important;
  overflow:hidden !important;
  display:block !important;
  background:#fff !important;
}
#embedStage:fullscreen .scorm-frame,
#embedStage:-webkit-full-screen .scorm-frame,
#embedStage .doc-workspace:fullscreen .scorm-frame,
#embedStage .doc-workspace:-webkit-full-screen .scorm-frame{
  width:100vw !important;
  height:100vh !important;
  max-width:none !important;
  max-height:none !important;
  min-height:100vh !important;
  border:0 !important;
  border-radius:0 !important;
  display:block !important;
}
#embedStage:fullscreen iframe,
#embedStage:fullscreen video,
#embedStage:-webkit-full-screen iframe,
#embedStage:-webkit-full-screen video{
  width:100vw !important;
  height:100vh !important;
  max-width:none !important;
  max-height:none !important;
  border:0 !important;
  border-radius:0 !important;
  display:block !important;
  object-fit:contain !important;
}
@media (max-width:700px){
  #embedStage:fullscreen,
  #embedStage:-webkit-full-screen{
    width:100vw !important;
    height:100vh !important;
    min-height:100vh !important;
  }
}

/* eLearning fullscreen: stage + embedded lesson always use the full viewport width */
#embedModal.hhm-mobile-fullscreen .embed-stage,
#embedModal.hhm-mobile-fullscreen .scorm-frame,
#embedStage:fullscreen,
#embedStage:-webkit-full-screen,
#embedStage:fullscreen .scorm-frame,
#embedStage:-webkit-full-screen .scorm-frame{
  width:100vw!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}
#embedModal.hhm-mobile-fullscreen .embed-stage,
#embedStage:fullscreen,
#embedStage:-webkit-full-screen{
  height:100dvh!important;
  max-height:none!important;
}

/* Game page — collapsed launch card; clicking Play opens the game fullscreen. */
.music-game-launch-card{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border:1px solid #d7e7f6;border-radius:16px;background:var(--card,#fff);box-shadow:0 6px 18px rgba(20,72,120,.07);position:relative;overflow:hidden}
.music-game-launch-info{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.music-game-launch-info>div{min-width:0}
.music-game-launch-info strong{display:block;color:#0753ad;font-size:16px;line-height:1.3}
.music-game-launch-info small{display:block;color:#6b87a7;font-size:13px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music-game-badge{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;padding:7px 10px;border-radius:10px;background:#edf6ff;color:#1265b6;font-size:12px;font-weight:800;letter-spacing:.02em}
.game-play-launch{flex:0 0 auto;min-width:104px;min-height:44px;padding:9px 16px;border:0;border-radius:12px;background:#0f6dcc;color:#fff;font:inherit;font-weight:800;cursor:pointer;box-shadow:0 5px 14px rgba(15,109,204,.18)}
.game-play-launch:hover{filter:brightness(1.05);transform:translateY(-1px)}
.game-launch-frame{display:none}
.music-game-launch-card.is-game-launching{position:fixed;inset:0;z-index:100000;width:100vw;height:100vh;max-width:none;margin:0;padding:0;border:0;border-radius:0;background:#0d1724;display:block;box-shadow:none}
.music-game-launch-card.is-game-launching .music-game-launch-info,.music-game-launch-card.is-game-launching .game-play-launch{display:none}
.music-game-launch-card.is-game-launching .game-launch-frame{display:block;width:100%;height:100%;border:0;background:#0d1724}
body.hhm-game-launch-lock{overflow:hidden}
body.dark-mode .music-game-launch-card{background:#162536;border-color:#304a64;box-shadow:0 8px 24px rgba(0,0,0,.18)}
body.dark-mode .music-game-launch-info strong{color:#8ec5ff}
body.dark-mode .music-game-launch-info small{color:#9eb5cd}
body.dark-mode .music-game-badge{background:#1b314a;color:#a9d2ff}
@media(max-width:700px){.music-game-launch-card{padding:12px 13px;gap:10px}.music-game-launch-info{gap:9px}.music-game-launch-info strong{font-size:14px}.music-game-launch-info small{font-size:12px}.music-game-badge{padding:6px 8px;font-size:11px}.game-play-launch{min-width:82px;min-height:42px;padding:8px 11px;font-size:13px}}


/* eLearning only — fullscreen shell matches the Music Game launch behavior. */
#embedModal.hhm-elearning-fullscreen{
  position:fixed!important;
  inset:0!important;
  z-index:100000!important;
  width:100vw!important;
  max-width:none!important;
  height:100dvh!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  background:#fff!important;
}
#embedModal.hhm-elearning-fullscreen #embedTitle,
#embedModal.hhm-elearning-fullscreen #embedHint,
#embedModal.hhm-elearning-fullscreen #embedExternal,
#embedModal.hhm-elearning-fullscreen #documentToolbar,
#embedModal.hhm-elearning-fullscreen #closeEmbed{display:none!important}
#embedModal.hhm-elearning-fullscreen #scormLmsBar{
  display:flex!important;
  position:absolute!important;
  top:0!important;
  left:0!important;
  right:0!important;
  z-index:100004!important;
  margin:0!important;
  border-radius:0!important;
  border-left:0!important;
  border-right:0!important;
  border-top:0!important;
  padding:max(8px,env(safe-area-inset-top)) 14px 8px!important;
  box-sizing:border-box!important;
  background:rgba(238,248,255,.97)!important;
  backdrop-filter:blur(8px);
}
#embedModal.hhm-elearning-fullscreen #scormLmsBar .scorm-bar-actions{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  margin-left:auto!important;
  flex:0 0 auto!important;
}
#embedModal.hhm-elearning-fullscreen #scormLmsBar #scormExitBtn{
  background:#fff!important;
  color:#1f2937!important;
  border:1px solid #b8c5d3!important;
}
#embedModal.hhm-elearning-fullscreen #scormLmsBar #scormExitBtn:hover{
  background:#f3f6f9!important;
}
#embedModal.hhm-elearning-fullscreen .embed-stage{
  flex:1 1 auto!important;
  width:100vw!important;
  height:100dvh!important;
  min-height:0!important;
  max-height:none!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  aspect-ratio:auto!important;
  overflow:hidden!important;
  background:#fff!important;
}
#embedModal.hhm-elearning-fullscreen .embed-stage iframe,
#embedModal.hhm-elearning-fullscreen .embed-stage .scorm-frame{
  display:block!important;
  width:100vw!important;
  height:100dvh!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  border:0!important;
  border-radius:0!important;
  margin:0!important;
}
#embedModal.hhm-elearning-fullscreen .landscape-rotate-btn{
  display:none!important;
  position:fixed!important;
  z-index:100002!important;
  top:max(10px,env(safe-area-inset-top))!important;
  left:max(10px,env(safe-area-inset-left))!important;
  margin:0!important;
}
@media (max-width:700px){
  #embedModal.hhm-elearning-fullscreen .landscape-rotate-btn{display:inline-flex!important}
}

/* eLearning FIX: the fullscreen class is on #embedModal (backdrop), so the
   inner .embed-modal must also be expanded. This is eLearning-only. */
#embedModal.hhm-elearning-fullscreen > .embed-modal{
  width:100vw!important;
  max-width:none!important;
  height:100dvh!important;
  max-height:none!important;
  min-height:100dvh!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  background:#fff!important;
}
#embedModal.hhm-elearning-fullscreen > .embed-modal > .embed-stage{
  flex:1 1 auto!important;
  width:100vw!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  overflow:hidden!important;
}
#embedModal.hhm-elearning-fullscreen > .embed-modal > .embed-stage > iframe,
#embedModal.hhm-elearning-fullscreen > .embed-modal > .embed-stage > .scorm-frame{
  width:100vw!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  display:block!important;
}

/* eLearning mobile refinement only: keep the rotate control clear of the lesson header. */
@media (max-width:700px){
  #embedModal.hhm-elearning-fullscreen .landscape-rotate-btn{
    top:auto!important;
    left:max(12px,env(safe-area-inset-left))!important;
    right:auto!important;
    bottom:max(14px,env(safe-area-inset-bottom))!important;
    transform:none!important;
    z-index:100003!important;
    margin:0!important;
    white-space:nowrap!important;
  }
  #embedModal.hhm-elearning-fullscreen > .embed-modal,
  #embedModal.hhm-elearning-fullscreen > .embed-modal > .embed-stage,
  #embedModal.hhm-elearning-fullscreen > .embed-modal > .embed-stage > iframe{
    width:100vw!important;
    max-width:100vw!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
}


/* eLearning only: lock the outer website while an eLearning lesson is open.
   The lesson iframe remains the only scrollable surface. */
html.hhm-elearning-viewport-lock,
html.hhm-elearning-viewport-lock body{
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  max-width:none!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
  position:relative!important;
}
html.hhm-elearning-viewport-lock body{
  margin:0!important;
  touch-action:none!important;
}
#embedModal.hhm-elearning-fullscreen{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
  touch-action:none!important;
}
#embedModal.hhm-elearning-fullscreen > .embed-modal,
#embedModal.hhm-elearning-fullscreen > .embed-modal > .embed-stage{
  overscroll-behavior:none!important;
  touch-action:none!important;
}
#embedModal.hhm-elearning-fullscreen > .embed-modal > .embed-stage > iframe,
#embedModal.hhm-elearning-fullscreen > .embed-modal > .embed-stage > .scorm-frame{
  touch-action:auto!important;
}

/* eLearning only: the lesson itself remains scrollable while the outer site stays locked. */
#embedModal.hhm-elearning-fullscreen > .embed-modal > .embed-stage > iframe,
#embedModal.hhm-elearning-fullscreen > .embed-modal > .embed-stage > .scorm-frame{
  touch-action:auto!important;
  overscroll-behavior:auto!important;
}
@media (max-width:700px){
  #embedModal.hhm-elearning-fullscreen #scormLmsBar{
    flex-wrap:wrap!important;
    gap:6px 8px!important;
  }
  #embedModal.hhm-elearning-fullscreen #scormLmsBar .scorm-bar-actions{
    margin-left:auto!important;
  }

    padding-left:max(10px,env(safe-area-inset-left))!important;
    padding-right:max(10px,env(safe-area-inset-right))!important;
  }
}

/* eLearning only: reserve a dedicated top lane for the progress bar so it
   never covers controls inside the lesson (especially mobile). */
#embedModal.hhm-elearning-fullscreen > .embed-modal > .embed-stage{
  box-sizing:border-box!important;
  padding-top:64px!important;
}
#embedModal.hhm-elearning-fullscreen > .embed-modal > .embed-stage > iframe,
#embedModal.hhm-elearning-fullscreen > .embed-modal > .embed-stage > .scorm-frame{
  height:calc(100dvh - 64px)!important;
  min-height:0!important;
}
@media (max-width:700px){
  #embedModal.hhm-elearning-fullscreen > .embed-modal > .embed-stage{
    padding-top:100px!important;
  }
  #embedModal.hhm-elearning-fullscreen > .embed-modal > .embed-stage > iframe,
  #embedModal.hhm-elearning-fullscreen > .embed-modal > .embed-stage > .scorm-frame{
    height:calc(100dvh - 100px)!important;
  }
}

/* eLearning mobile/tablet only: keep the progress bar in the layout flow so it
   never leaves a blank reserved strip above the lesson while scrolling. */
@media (max-width:1024px){
  #embedModal.hhm-elearning-fullscreen > .embed-modal > #scormLmsBar{
    position:sticky!important;
    top:0!important;
    flex:0 0 auto!important;
    z-index:100004!important;
  }
  #embedModal.hhm-elearning-fullscreen > .embed-modal > .embed-stage{
    flex:1 1 auto!important;
    height:auto!important;
    min-height:0!important;
    padding-top:0!important;
    overflow:hidden!important;
  }
  #embedModal.hhm-elearning-fullscreen > .embed-modal > .embed-stage > iframe,
  #embedModal.hhm-elearning-fullscreen > .embed-modal > .embed-stage > .scorm-frame{
    height:100%!important;
    min-height:0!important;
  }
}

/* Mobile/tablet menu submenus: generated only from existing Admin folders. */
.nav-submenu{display:none}
.nav-submenu-arrow{display:none}
@media (max-width:1100px){
  .main-nav .nav-item.has-submenu{
    position:relative!important;
  }
  .main-nav .nav-item.has-submenu .nav-submenu-arrow{
    display:inline-flex!important;
    margin-left:auto!important;
    width:auto!important;
    height:auto!important;
    flex:0 0 auto!important;
    font-size:22px!important;
    line-height:1!important;
    color:currentColor!important;
    transition:transform .18s ease!important;
  }
  .main-nav .nav-item.has-submenu[aria-expanded="true"] .nav-submenu-arrow{
    transform:rotate(180deg)!important;
  }
  .main-nav .nav-submenu{
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
    margin:-2px 0 6px 18px!important;
    padding:0 0 2px 18px!important;
    border-left:2px solid rgba(8,97,201,.16)!important;
  }
  .main-nav .nav-submenu[hidden]{display:none!important}
  .main-nav .nav-folder-icon{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    margin-right:10px!important;
    border-radius:8px!important;
    background:rgba(255,193,7,.16)!important;
    box-shadow:0 2px 7px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.55)!important;
    font-size:19px!important;
    line-height:1!important;
    vertical-align:middle!important;
    flex:0 0 30px!important;
  }
  .main-nav .nav-folder-name{
    min-width:0!important;
    flex:1 1 auto!important;
    line-height:1.3!important;
  }
  .main-nav .nav-subitem{
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    min-height:42px!important;
    padding:7px 14px!important;
    border:0!important;
    background:transparent!important;
    color:#315c91!important;
    font:inherit!important;
    font-size:16px!important;
    font-weight:500!important;
    text-align:left!important;
    cursor:pointer!important;
    border-radius:8px!important;
  }
  .main-nav .nav-subitem:active,
  .main-nav .nav-subitem:hover{
    background:rgba(8,97,201,.08)!important;
    color:#0758b8!important;
  }
  .main-nav .nav-subitem-wrap{width:100%!important;}
  .main-nav .nav-submenu-nested{display:flex!important;flex-direction:column!important;gap:0!important;margin:0 0 0 14px!important;padding:0 0 0 14px!important;border-left:1px solid rgba(8,97,201,.13)!important;}
  .main-nav .nav-submenu-nested[hidden]{display:none!important}
  .main-nav .nav-subitem.has-nested-submenu{display:flex!important;align-items:center!important;justify-content:space-between!important;}
  .main-nav .nav-subitem-arrow{margin-left:auto!important;font-size:18px!important;line-height:1!important;transition:transform .18s ease!important;}
  .main-nav .nav-subitem.has-nested-submenu[aria-expanded="true"] .nav-subitem-arrow{transform:rotate(180deg)!important}
  .main-nav .nav-subitem-wrap{width:100%!important;}
  .main-nav .nav-submenu-nested{
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
    margin:0 0 0 14px!important;
    padding:0 0 0 14px!important;
    border-left:1px solid rgba(8,97,201,.13)!important;
  }
  .main-nav .nav-submenu-nested[hidden]{display:none!important}
  .main-nav .nav-subitem.has-nested-submenu{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
  }
  .main-nav .nav-subitem-arrow{
    margin-left:auto!important;
    font-size:18px!important;
    line-height:1!important;
    transition:transform .18s ease!important;
  }
  .main-nav .nav-subitem.has-nested-submenu[aria-expanded="true"] .nav-subitem-arrow{transform:rotate(180deg)!important}
}
@media (min-width:1101px){
  .main-nav .nav-submenu,
  .main-nav .nav-submenu-arrow{display:none!important}
}

/* Dark mode — mobile/tablet: tất cả cấp mục con đều phải rõ và đồng bộ theme. */
@media (max-width:1100px){
  body.dark-mode .main-nav .nav-submenu,
  body.dark-mode .main-nav .nav-submenu-nested{
    background:transparent!important;
  }
  body.dark-mode .main-nav .nav-subitem,
  body.dark-mode .main-nav .nav-subitem-resource,
  body.dark-mode .main-nav .nav-subitem-wrap > .nav-subitem{
    color:#dcecff!important;
    text-shadow:0 0 1px rgba(255,255,255,.08)!important;
  }
  body.dark-mode .main-nav .nav-folder-icon{
    background:rgba(255,193,7,.20)!important;
    box-shadow:0 2px 8px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.22)!important;
  }
  body.dark-mode .main-nav .nav-subitem .nav-subitem-resource-icon,
  body.dark-mode .main-nav .nav-subitem-resource-icon{
    color:#dcecff!important;
    opacity:1!important;
  }
  body.dark-mode .main-nav .nav-subitem:hover,
  body.dark-mode .main-nav .nav-subitem:active,
  body.dark-mode .main-nav .nav-subitem:focus-visible{
    background:rgba(67,145,224,.18)!important;
    color:#ffffff!important;
  }
  body.dark-mode .main-nav .nav-submenu{
    border-left-color:rgba(110,176,235,.38)!important;
  }
  body.dark-mode .main-nav .nav-submenu-nested{
    border-left-color:rgba(110,176,235,.30)!important;
  }
  body.dark-mode .main-nav .nav-subitem-arrow{
    color:#d6eaff!important;
    opacity:1!important;
  }
}

/* Upload progress — visible during large-file upload. */
.upload-main-progress{margin-top:12px;padding:10px 12px;border:1px solid #cfe3f7;border-radius:12px;background:#f7fbff}
.upload-main-progress[hidden]{display:none!important}
.upload-main-progress-head{display:flex;justify-content:space-between;gap:10px;font-size:13px;font-weight:800;color:#2f5f8f;margin-bottom:6px}
.upload-main-progress progress{display:block;width:100%;height:10px;margin:0;accent-color:#1670d2}
body.dark-mode .upload-main-progress{background:#172638;border-color:#38536d}
body.dark-mode .upload-main-progress-head{color:#dcecff}
@media(max-width:1100px){
 body.dark-mode .main-nav .nav-subitem,
 body.dark-mode .main-nav .nav-subitem-resource,
 body.dark-mode .main-nav .nav-subitem-wrap,
 body.dark-mode .main-nav .nav-subitem-wrap > .nav-subitem,
 body.dark-mode .main-nav .nav-submenu .nav-subitem,
 body.dark-mode .main-nav .nav-submenu-nested .nav-subitem{
   color:#f1f7ff!important;
   -webkit-text-fill-color:#f1f7ff!important;
   opacity:1!important;
 }
 body.dark-mode .main-nav .nav-subitem small,
 body.dark-mode .main-nav .nav-subitem span,
 body.dark-mode .main-nav .nav-subitem strong,
 body.dark-mode .main-nav .nav-subitem a{
   color:#f1f7ff!important;
   -webkit-text-fill-color:#f1f7ff!important;
   opacity:1!important;
 }
 body.dark-mode .main-nav .nav-subitem:hover,
 body.dark-mode .main-nav .nav-subitem:active,
 body.dark-mode .main-nav .nav-subitem:focus-visible{color:#fff!important;-webkit-text-fill-color:#fff!important}
}
/* eLearning: nút Thoát màu đỏ */
#scormLmsBar #scormExitBtn,
#embedModal.hhm-elearning-fullscreen #scormLmsBar #scormExitBtn{
  background:#dc2626!important;
  color:#fff!important;
  border:1px solid #dc2626!important;
  box-shadow:0 1px 2px rgba(0,0,0,.12)!important;
}
#scormLmsBar #scormExitBtn:hover,
#embedModal.hhm-elearning-fullscreen #scormLmsBar #scormExitBtn:hover{
  background:#b91c1c!important;
  border-color:#b91c1c!important;
  color:#fff!important;
}

/* eLearning mobile: progress + actions stay on one compact row */
@media (max-width:700px){
  #embedModal.hhm-elearning-fullscreen > .embed-modal > #scormLmsBar{
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:6px!important;
    padding:7px 10px!important;
    min-height:48px!important;
  }
  #embedModal.hhm-elearning-fullscreen #scormLmsBar .scorm-progress-wrap{
    flex:1 1 auto!important;
    min-width:0!important;
    width:auto!important;
    gap:5px!important;
  }
  #embedModal.hhm-elearning-fullscreen #scormLmsBar .scorm-progress-label{
    font-size:12px!important;
    flex:0 0 auto!important;
  }
  #embedModal.hhm-elearning-fullscreen #scormLmsBar .scorm-progress-track{
    flex:0 0 52px!important;
    width:52px!important;
    height:6px!important;
  }
  #embedModal.hhm-elearning-fullscreen #scormLmsBar .scorm-bar-actions{
    flex:0 0 auto!important;
    margin-left:0!important;
    gap:5px!important;
  }
  #embedModal.hhm-elearning-fullscreen #scormLmsBar .scorm-bar-actions button{
    padding:7px 10px!important;
    font-size:13px!important;
    white-space:nowrap!important;
    border-radius:9px!important;
  }
}

/* ==========================================================
   BÀI HÁT — PHÂN CẤP KHỐI 1→5 → 8 CHỦ ĐỀ
   Chỉ bổ sung cho trang Bài hát, không thay đổi các khu vực khác.
   ========================================================== */
.music-curriculum{margin-top:18px}
.curriculum-intro{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;margin-bottom:16px;border:1px solid #d9e8f7;border-radius:16px;background:linear-gradient(135deg,#f7fbff,#eef7ff)}
.curriculum-intro strong{font-size:18px;color:#174d7b}.curriculum-intro span{font-size:14px;color:#58718a}
.grade-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.grade-card{border:1px solid #dbe8f5;border-radius:20px;background:#fff;padding:16px;box-shadow:0 8px 24px rgba(31,76,120,.08);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.grade-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(31,76,120,.13);border-color:#9cc7ec}
.grade-card-head{display:flex;align-items:center;gap:12px;margin-bottom:13px}.grade-icon{font-size:30px}.grade-card-head>div{flex:1}.grade-card-head strong{display:block;font-size:21px;color:#174d7b}.grade-card-head small{display:block;color:#6d8499;margin-top:2px}.grade-arrow{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#eef7ff;color:#1769a8;font-weight:800}
.topic-mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.topic-mini{display:flex;align-items:center;gap:8px;text-align:left;min-height:58px;padding:9px 10px;border:1px solid #e2edf7;border-radius:12px;background:#f9fcff;color:#214e70;cursor:pointer;transition:background .15s,border-color .15s,transform .15s}.topic-mini:hover{background:#eef8ff;border-color:#9fcbed;transform:translateY(-1px)}.topic-mini>span:first-child{font-size:17px}.topic-mini>span:last-child{font-size:13px;font-weight:700;line-height:1.2}.topic-mini small{display:block;margin-top:3px;font-weight:500;color:#6b8193;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.curriculum-topic-view{margin-top:18px}.curriculum-back{border:1px solid #cfe1f1;background:#f5faff;color:#18567f;border-radius:10px;padding:9px 13px;font-weight:700;cursor:pointer}.curriculum-topic-heading{display:flex;align-items:center;gap:13px;margin:15px 0}.curriculum-topic-heading>span{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:#eaf6ff;font-size:23px}.curriculum-topic-heading h2{margin:0;color:#174d7b}.curriculum-topic-heading p{margin:4px 0 0;color:#71869a}.curriculum-all-actions{display:flex;justify-content:center;margin:18px 0}.curriculum-all-btn{border:1px solid #c8dff2;background:#fff;color:#17649b;border-radius:12px;padding:10px 17px;font-weight:700;cursor:pointer}.curriculum-filter-row{margin-top:10px}
.curriculum-assignment-row{margin-top:2px}
body.dark-mode .curriculum-intro{background:#14283b;border-color:#2b4964}.dark-mode .curriculum-intro strong,.dark-mode .curriculum-topic-heading h2{color:#d8ecff}.dark-mode .curriculum-intro span,.dark-mode .curriculum-topic-heading p{color:#a9bfd3}.dark-mode .grade-card{background:#132333;border-color:#2c4a63;box-shadow:none}.dark-mode .grade-card:hover{border-color:#4f83ad}.dark-mode .grade-card-head strong{color:#d9ecff}.dark-mode .grade-card-head small{color:#9eb7cc}.dark-mode .grade-arrow,.dark-mode .topic-mini,.dark-mode .curriculum-back,.dark-mode .curriculum-all-btn{background:#172f45;border-color:#315875;color:#cfe7fb}.dark-mode .topic-mini{color:#d5e9fa}.dark-mode .topic-mini small{color:#91abc0}.dark-mode .curriculum-topic-heading>span{background:#17344b}
@media(max-width:800px){.grade-grid{grid-template-columns:1fr}.curriculum-intro{align-items:flex-start;flex-direction:column}.topic-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.grade-card{padding:12px;border-radius:16px}.grade-card-head strong{font-size:19px}.topic-mini{min-height:54px;padding:8px}.topic-mini small{max-width:105px}.curriculum-intro{padding:13px 14px}.curriculum-topic-heading h2{font-size:19px}}
.grade-card-button{width:100%;display:flex;align-items:center;gap:14px;text-align:left;border:1px solid #dbe8f5;border-radius:20px;background:#fff;padding:22px 20px;box-shadow:0 8px 24px rgba(31,76,120,.08);cursor:pointer;color:inherit}.grade-card-button:hover{border-color:#9cc7ec;transform:translateY(-2px)}.grade-card-copy{flex:1}.grade-card-copy strong{display:block;font-size:22px;color:#174d7b}.grade-card-copy small{display:block;margin-top:4px;color:#71879a}.curriculum-level-head{display:flex;align-items:center;gap:14px;margin-bottom:15px}.curriculum-level-head>div{display:flex;flex-direction:column;gap:3px}.curriculum-level-head strong{font-size:19px;color:#174d7b}.curriculum-level-head small{color:#71879a}.topic-grid-level{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.topic-level-card{display:flex;align-items:center;gap:12px;text-align:left;border:1px solid #dbe8f5;border-radius:16px;background:#fff;padding:16px;cursor:pointer;color:#174d7b;box-shadow:0 6px 18px rgba(31,76,120,.06)}.topic-level-card:hover{border-color:#9cc7ec;background:#f8fcff}.topic-level-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:#eef7ff;font-size:20px}.topic-level-card span:nth-child(2){flex:1}.topic-level-card strong{display:block;font-size:16px}.topic-level-card small{display:block;margin-top:3px;color:#71879a}.topic-level-card>b{font-size:20px;color:#5290bd}.dark-mode .grade-card-button,.dark-mode .topic-level-card{background:#132333;border-color:#2c4a63;color:#d7eafb;box-shadow:none}.dark-mode .grade-card-copy strong,.dark-mode .curriculum-level-head strong{color:#d8ecff}.dark-mode .grade-card-copy small,.dark-mode .curriculum-level-head small,.dark-mode .topic-level-card small{color:#9eb7cc}.dark-mode .topic-level-icon{background:#17344b}@media(max-width:800px){.topic-grid-level{grid-template-columns:1fr}}@media(max-width:480px){.grade-card-button{padding:17px 14px}.grade-card-copy strong{font-size:19px}.topic-level-card{padding:13px}.curriculum-level-head{align-items:flex-start;flex-direction:column}}

.curriculum-admin-wrap{padding:4px 0}.curriculum-admin-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.curriculum-folder-btn{height:41px;padding:0 17px;font-weight:700;white-space:nowrap}.curriculum-grade-toggle{border:0;background:transparent;color:#174d7b;display:flex;align-items:center;gap:9px;padding:6px 8px 6px 2px;border-radius:9px;cursor:pointer;font:inherit;text-align:left}.curriculum-grade-toggle:hover{background:#eef7ff}.curriculum-grade-arrow{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#eaf4fd;color:#1769a8;font-weight:900}.curriculum-grade-toggle strong{font-size:19px}.dark-mode .curriculum-grade-toggle{color:#d8ecff}.dark-mode .curriculum-grade-toggle:hover{background:#17344b}.dark-mode .curriculum-grade-arrow{background:#203f59;color:#cfe7fb}.curriculum-admin-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.curriculum-admin-head h2{margin:0 0 5px;color:#174d7b}.curriculum-admin-grade{border:1px solid #dbe8f5;border-radius:16px;background:#fff;margin:0 0 14px;padding:16px}.curriculum-admin-grade-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.curriculum-admin-grade-head>strong{font-size:19px;color:#174d7b}.curriculum-admin-actions{display:flex;flex-wrap:wrap;gap:8px}.curriculum-admin-topics{margin-top:12px;border-top:1px solid #e5eef6}.curriculum-admin-topic{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #eef3f7}.curriculum-admin-topic:last-child{border-bottom:0}.curriculum-admin-topic>span{color:#285b88;font-weight:600}.curriculum-admin-topic>div{display:flex;gap:7px;flex-wrap:wrap}.dark-mode .curriculum-admin-grade{background:#132333;border-color:#2c4a63}.dark-mode .curriculum-admin-grade-head>strong,.dark-mode .curriculum-admin-topic>span{color:#d8ecff}.dark-mode .curriculum-admin-topic{border-color:#29445b}@media(max-width:700px){.curriculum-admin-head,.curriculum-admin-grade-head{align-items:flex-start;flex-direction:column}.curriculum-admin-actions{width:100%}.curriculum-admin-actions button{flex:1}.curriculum-admin-topic{align-items:flex-start;flex-direction:column}.curriculum-admin-topic>div{width:100%}.curriculum-admin-topic>div button{flex:1}}

/* Independent structure-copy dialog */
.structure-copy-modal{max-width:760px}
.structure-copy-modal h2{margin-bottom:8px}
.structure-copy-modal>p{color:#607fa8;line-height:1.55;margin:0 0 18px}
.structure-copy-note{margin:14px 0;padding:14px 16px;border:1px solid #cfe2f8;border-radius:14px;background:#f5faff;display:flex;flex-direction:column;gap:4px}
.structure-copy-note strong{color:#164d88}
.structure-copy-note small{color:#607fa8;line-height:1.5}
.structure-copy-preview{margin:12px 0;max-height:180px;overflow:auto;border:1px solid #d8e8f8;border-radius:12px;padding:10px 12px;background:#fbfdff;color:#315c8f}
.structure-copy-preview:empty{display:none}
.structure-copy-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.structure-copy-actions .btn-light{background:#edf6ff;color:#164d88;border:1px solid #cfe2f3;box-shadow:none}
.structure-copy-actions .btn-light:hover{background:#dceeff;color:#0b56a7}
.structure-copy-actions .btn-light:active{background:#cfe6fb}
.structure-copy-actions .btn-light:disabled{opacity:.65;cursor:not-allowed}
@media(max-width:700px){
  .structure-copy-modal{width:min(94vw,760px);padding:20px}
  .structure-copy-actions{flex-direction:column-reverse}
  .structure-copy-actions button{width:100%}
}
/* V9: individual structure-copy selection */
.structure-copy-selectbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 4px 10px;border-bottom:1px solid #d8e8f8;color:#607fa8}
.structure-copy-selectbar .inline-check{margin-top:0!important;color:#164d88}
.structure-copy-tree{display:flex;flex-direction:column;gap:2px}
.structure-copy-item{display:flex;align-items:center;gap:10px;padding:8px 8px;border-radius:9px;cursor:pointer;color:#315c8f}
/* V11: checkbox nằm ngang ngay cạnh tên mục, không bị CSS .modal label xếp dọc */
.modal .structure-copy-item{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important;width:auto!important;color:#315c8f!important;font-weight:700!important;}
.modal .structure-copy-item input.copy-item-check{display:block!important;flex:0 0 20px!important;width:20px!important;height:20px!important;margin:0!important;}
.modal .structure-copy-item span{display:inline-block!important;flex:1!important;}
.structure-copy-item:hover{background:#f0f7ff}
.structure-copy-item input{width:18px!important;height:18px!important;accent-color:#0861c9;flex:0 0 auto}
.structure-copy-item.depth-1{padding-left:34px}
.structure-copy-preview{max-height:300px!important}
@media(max-width:700px){.structure-copy-selectbar{align-items:flex-start;flex-direction:column}.structure-copy-item{padding:9px 5px}.structure-copy-item.depth-1{padding-left:28px}}
/* V10: hierarchical selection tree for structure cloning */
.structure-copy-node{display:block}
.structure-copy-row{display:flex;align-items:center;gap:4px;min-height:42px}
.structure-copy-expand{width:30px;height:30px;border:0;background:#eaf4ff;color:#1764aa;border-radius:50%;font-size:20px;font-weight:800;cursor:pointer;flex:0 0 30px;line-height:1}
.structure-copy-expand:hover{background:#dceeff}
.structure-copy-expand-placeholder{width:30px;flex:0 0 30px}
.structure-copy-children{margin-left:30px;border-left:2px solid #dbeaf8;padding-left:8px}
.structure-copy-item{flex:1;min-width:0}
.structure-copy-item span{overflow-wrap:anywhere}
@media(max-width:700px){.structure-copy-children{margin-left:20px;padding-left:6px}.structure-copy-expand{width:28px;height:28px;flex-basis:28px}.structure-copy-expand-placeholder{width:28px;flex-basis:28px}}
.simple-structure-wrap{display:flex;flex-direction:column;gap:14px}.simple-structure-list{display:flex;flex-direction:column;gap:14px}.simple-structure-card{width:100%;min-height:150px}.simple-structure-head{margin-bottom:2px}.simple-structure-items{margin-top:2px}.simple-structure-card .grade-icon{font-size:34px}.simple-structure-card .grade-card-copy strong{font-size:28px}.simple-structure-card .grade-card-copy small{font-size:16px}.dark-mode .simple-structure-card{background:#132333;border-color:#2c4a63}.dark-mode .simple-structure-card .grade-card-copy strong{color:#d8ecff}.dark-mode .simple-structure-card .grade-card-copy small{color:#9eb7cc}
@media(max-width:600px){.simple-structure-card{min-height:105px;padding:16px}.simple-structure-card .grade-card-copy strong{font-size:20px}.simple-structure-card .grade-card-copy small{font-size:13px}.simple-structure-card .grade-icon{font-size:28px}}

/* V14: tất cả menu có cấu trúc nhân bản Khối/Chủ đề dùng cùng giao diện với Bài hát */
.simple-structure-wrap .simple-structure-intro{margin-top:0}
.simple-structure-grade-grid{margin-top:0}
.simple-structure-grade-card{min-height:112px}
.simple-structure-topic-grid{margin-top:0}
.simple-structure-head{margin-bottom:18px}
.simple-structure-items{margin-top:20px}
.simple-structure-empty{margin-top:18px}
@media(max-width:800px){.simple-structure-grade-card{min-height:96px}}
/* V18: compact per-menu structure management inside folder manager */
.folder-admin-header{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:12px}.folder-admin-header h2{margin-bottom:5px}.folder-menu-filter-label{min-width:250px;font-weight:700;color:#174d7b}.folder-menu-filter-label select{display:block;margin-top:6px;width:100%;padding:11px 13px;border:1px solid #cfe1f1;border-radius:12px;background:#fff;color:#174d7b;font:inherit}.folder-structure-compact{border:1px solid #d9e8f7;border-radius:16px;background:#f9fcff;padding:12px 14px;margin:10px 0 16px}.folder-structure-compact-head,.folder-list-compact-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.folder-structure-compact-head strong,.folder-list-compact-head strong{font-size:17px;color:#174d7b}.folder-structure-compact-head small,.folder-list-compact-head small{display:block;color:#6c86a1;margin-top:2px}.compact-structure-grade{border:1px solid #dceaf6;background:#fff;border-radius:13px;margin-top:9px;overflow:hidden}.compact-grade-toggle{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;border:0;background:transparent;padding:10px 12px;text-align:left;color:#174d7b;cursor:pointer}.compact-grade-toggle>span{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#eaf4fd;color:#1769a8;font-weight:900}.compact-grade-toggle strong{font-size:15px}.compact-grade-toggle small{font-size:12px;color:#7890a6}.compact-grade-actions{display:flex;gap:6px;padding:0 12px 10px;justify-content:flex-end}.compact-structure-topics{border-top:1px solid #edf3f8;padding:4px 12px 10px}.compact-topic-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid #edf3f8}.compact-topic-row:last-of-type{border-bottom:0}.compact-topic-row>span{color:#285b88;font-weight:600;font-size:14px}.compact-topic-row>div{display:flex;gap:5px}.compact-topic-row button,.compact-grade-actions button{padding:7px 10px;border-radius:9px;font-size:13px}.compact-add-topic{margin-top:8px;padding:7px 11px;font-size:13px}.folder-list-compact-head{margin:0 0 8px}.dark-mode .folder-menu-filter-label,.dark-mode .folder-structure-compact-head strong,.dark-mode .folder-list-compact-head strong,.dark-mode .compact-grade-toggle{color:#d8ecff}.dark-mode .folder-menu-filter-label select,.dark-mode .folder-structure-compact,.dark-mode .compact-structure-grade{background:#132333;border-color:#2c4a63;color:#d8ecff}.dark-mode .folder-structure-compact-head small,.dark-mode .folder-list-compact-head small,.dark-mode .compact-grade-toggle small{color:#9eb7cc}.dark-mode .compact-grade-toggle>span{background:#203f59;color:#cfe7fb}.dark-mode .compact-structure-topics,.dark-mode .compact-topic-row{border-color:#29445b}.dark-mode .compact-topic-row>span{color:#cfe7fb}@media(max-width:800px){.folder-admin-header{align-items:stretch;flex-direction:column}.folder-menu-filter-label{min-width:0}.folder-structure-compact-head,.folder-list-compact-head{align-items:flex-start;flex-direction:column}.compact-grade-actions{justify-content:flex-start}.compact-topic-row{align-items:flex-start;flex-direction:column}.compact-topic-row>div{width:100%}.compact-topic-row button{flex:1}}

@media (max-width:1100px){.songs-page .pagination{width:100%;padding-left:4px;padding-right:4px;flex-wrap:wrap;justify-content:center;overflow:visible}.songs-page .pagination button{flex:0 0 40px}}