/* Hero utilities: minimal motion, containment, no animation libraries */
.hero.has-icon:has(.hero-tools){overflow:visible;isolation:isolate}
.hero.has-icon .hero-tools{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(235px,.82fr);gap:14px;align-items:stretch;margin-top:22px;max-width:100%}
.hero-tools>section{min-width:0;border-radius:21px;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;animation:heroToolIn .42s cubic-bezier(.2,.8,.2,1) both}
.hero-tools>section:nth-child(2){animation-delay:.07s}
.hero-tools>section:hover{transform:translateY(-2px)}
.hero-countdown{padding:15px;background:#fff;border:1px solid #dbe8fa;box-shadow:0 6px 21px rgba(27,59,118,.055)}
.hero-tool-head{display:flex;align-items:center;gap:10px}
.hero-tool-icon{flex:0 0 38px;display:grid;place-items:center;width:38px;height:38px;color:#f97316;background:#fff3e8;border-radius:13px;font-size:16px}
.hero-tool-label{min-width:0;flex:1}
.hero-tool-label strong{display:block;font-weight:900;color:#1d3555;font-size:13px;line-height:1.3}
.hero-tool-label small{display:block;font-size:10px;color:#7a8da6;line-height:1.4;margin-top:2px}
.hero-countdown-toggle{display:inline-flex;gap:6px;align-items:center;justify-content:center;flex:none;border:1px solid #d8e7fb;background:#f7faff;color:#265aa7;border-radius:10px;padding:9px 10px;cursor:pointer;font-size:10px;font-weight:850;transition:background .18s,transform .18s}
.hero-countdown-toggle:hover{background:#edf5ff}.hero-countdown-toggle:active{transform:scale(.97)}
.hero-countdown-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:13px}
.hero-countdown-board>span:not(.hero-countdown-ended){display:grid;gap:4px;place-items:center;align-content:center;min-height:72px;padding:10px 4px;border:1px solid #e5eefb;border-radius:14px;background:linear-gradient(180deg,#f8fbff,#fff)}
.hero-countdown-board b{font-variant-numeric:tabular-nums;color:#245cbb;font-size:clamp(20px,2.7vw,31px);font-weight:950;letter-spacing:-.05em;line-height:1}
.hero-countdown-board small{font-size:10px;color:#7084a2;font-weight:750}
.hero-countdown-board.is-ended{grid-template-columns:1fr}
.hero-countdown-ended{padding:14px;color:#226c55;background:#e9fcf4;border-radius:12px;font-size:12px;font-weight:850;text-align:center}
.hero-countdown-menu{position:absolute;top:calc(100% + 7px);left:0;width:min(590px,100%);max-height:min(330px,55vh);overflow:auto;overscroll-behavior:contain;padding:9px;border:1px solid #dbe7f7;border-radius:17px;background:#fff;box-shadow:0 16px 50px rgba(25,51,94,.19);z-index:12;animation:heroMenuIn .17s ease both}
.hero-countdown-menu[hidden]{display:none!important}
.hero-event-row{display:flex;align-items:stretch;gap:4px;padding:2px 0}
.hero-event-choice{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;padding:9px 11px;text-align:left;background:#fff;border:1px solid transparent;border-radius:11px;cursor:pointer;color:#2c4262}
.hero-event-choice b{font-size:12px}.hero-event-choice small{font-size:10px;color:#798ca5}.hero-event-choice:hover,.hero-event-choice.is-active{background:#edf5ff;border-color:#d7e6ff}
.hero-event-remove{flex:0 0 38px;border:1px solid #ffe6e4;background:#fff7f7;border-radius:10px;color:#b93345;cursor:pointer}
.hero-countdown-form{margin-top:8px;padding:11px;background:#f8faff;border:1px solid #e8eafa;border-radius:12px}
.hero-countdown-form>label{display:block;font-size:11px;font-weight:850;margin-bottom:8px;color:#324b70}
.hero-countdown-form>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) auto;gap:7px}
.hero-countdown-form input{min-width:0;min-height:37px;width:100%;padding:6px 9px;border:1px solid #cad8ea;border-radius:9px;color:#294469;background:#fff;font-size:12px}
.hero-countdown-form button{border:0;border-radius:9px;background:#2563eb;color:#fff;font-size:11px;font-weight:850;padding:8px 11px;cursor:pointer}
.hero-practice{position:relative;display:flex;gap:12px;padding:16px;color:#fff;background:linear-gradient(133deg,#2446b7,#4861cb 55%,#2372cf);border:1px solid rgba(255,255,255,.3);box-shadow:0 7px 26px rgba(37,99,235,.14);overflow:hidden}
.hero-practice::after{content:'';position:absolute;right:-38px;top:-66px;height:150px;width:150px;border:1px solid rgba(255,255,255,.15);border-radius:50%;pointer-events:none}
.hero-practice-spark{width:39px;height:39px;display:grid;place-items:center;flex:0 0 39px;background:rgba(255,255,255,.17);border-radius:13px;color:#fff;font-size:17px}
.hero-practice-content{position:relative;z-index:1;min-width:0;flex:1}
.hero-practice-content strong{font-size:15px;font-weight:900}
.hero-practice-content p{color:#dbeafe!important;margin:3px 0 10px!important;line-height:1.45!important;font-size:11px!important}
.hero-practice-select-wrap{display:block;position:relative}
.hero-practice-select-wrap select{appearance:none;width:100%;min-height:40px;border:1px solid rgba(255,255,255,.45);border-radius:11px;background:rgba(255,255,255,.96);padding:8px 33px 8px 12px;color:#294f93;font-weight:850;font-size:11px;cursor:pointer}
.hero-practice-select-wrap i{position:absolute;right:13px;top:14px;color:#3767ad;font-size:10px;pointer-events:none}
.hero-practice-content>small{display:block;margin-top:9px;color:#dce9ff;font-size:10px;line-height:1.4}
.hero.has-icon .hero-tools .hero-tool-label small,.hero.has-icon .hero-tools .hero-practice-content p{max-width:none}
.hero-tools :is(button,input,select):focus-visible{outline:3px solid #60a5fa;outline-offset:2px}
.hero-tools .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}
@keyframes heroToolIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes heroMenuIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@keyframes heroDigitIn{from{opacity:.55;transform:translateY(2px)}to{opacity:1;transform:none}}
.hero-countdown-board b.number-tick{animation:heroDigitIn .17s ease}
@media(max-width:820px){.hero.has-icon .hero-tools{grid-template-columns:minmax(0,1fr)}.hero-practice{align-items:center}.hero-practice-content{display:grid;grid-template-columns:1fr minmax(155px,1.25fr);column-gap:12px;align-items:center}.hero-practice-content strong{grid-column:1}.hero-practice-content p{grid-column:1;margin-bottom:0!important}.hero-practice-select-wrap{grid-column:2;grid-row:1/3}.hero-practice-content>small{grid-column:2;grid-row:3}}
@media(max-width:540px){.hero.has-icon .hero-tools{margin-top:18px;gap:10px}.hero-countdown{padding:12px}.hero-countdown-board{gap:6px;margin-top:11px}.hero-countdown-board>span:not(.hero-countdown-ended){min-height:59px}.hero-countdown-board b{font-size:24px}.hero-countdown-board small{font-size:9px}.hero-tool-icon{width:34px;height:34px;flex-basis:34px}.hero-tool-label strong{font-size:12px}.hero-tool-label small{font-size:9px}.hero-countdown-toggle{font-size:10px;padding:9px 7px}.hero-practice{padding:12px;gap:9px}.hero-practice-spark{flex-basis:32px;width:32px;height:32px;border-radius:10px}.hero-practice-content{display:block}.hero-practice-content p{margin-bottom:8px!important}.hero-practice-select-wrap{margin-top:7px}.hero-countdown-form>div{grid-template-columns:1fr}.hero-countdown-menu{max-height:300px}}
@media(prefers-reduced-motion:reduce){.hero-tools>section,.hero-countdown-menu,.hero-countdown-board b.number-tick{animation:none!important}.hero-tools>section:hover{transform:none}}

/* Practice feature appears only inside the main Thi thử hero */
.hero.has-icon .hero-tools:not(.is-practice-feature){grid-template-columns:minmax(0,1fr)}
.hero.has-icon .hero-tools:not(.is-practice-feature)>.hero-countdown{max-width:740px}
.hero.has-icon .hero-tools.is-practice-feature{grid-template-columns:minmax(0,1fr) minmax(310px,1.04fr);align-items:stretch;gap:15px}
.hero-tools.is-practice-feature .hero-practice{padding:21px 22px;min-height:192px;align-items:flex-start;border-radius:22px;border:1px solid rgba(255,255,255,.28);background:linear-gradient(123deg,#3d27ab 0%,#4158df 53%,#0f8bc1 100%);box-shadow:0 13px 35px rgba(62,73,177,.21)}
.hero-tools.is-practice-feature .hero-practice:before{content:'';position:absolute;z-index:0;top:0;bottom:0;left:-70%;width:27%;transform:skewX(-22deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.11),transparent);pointer-events:none;animation:heroPracticeShine 7s ease-in-out infinite}
.hero-tools.is-practice-feature .hero-practice-spark{width:47px;height:47px;flex-basis:47px;font-size:22px;border-radius:15px;background:rgba(255,255,255,.18)}
.hero-practice-badge{display:inline-block;padding:4px 8px;margin-bottom:6px;border-radius:999px;background:rgba(255,255,255,.16);font-weight:800;font-size:10px;color:#eff6ff}
.hero-tools.is-practice-feature .hero-practice-content strong{display:block;font-size:clamp(18px,2vw,23px);letter-spacing:-.035em;line-height:1.25}
.hero-tools.is-practice-feature .hero-practice-content p{font-size:12px!important;max-width:345px;color:#e4ecff!important;margin:7px 0 13px!important}
.hero-tools.is-practice-feature .hero-practice-select-wrap select{min-height:45px;font-size:12px}
.hero-tools.is-practice-feature .hero-practice-content>small{font-size:10px;margin-top:8px;color:#eff6ff}
@keyframes heroPracticeShine{0%,67%{left:-70%;opacity:0}77%{opacity:1}100%{left:140%;opacity:0}}
@media(max-width:920px){.hero.has-icon .hero-tools.is-practice-feature{grid-template-columns:minmax(0,1fr)}.hero-tools.is-practice-feature .hero-practice-content{display:block}.hero-tools.is-practice-feature .hero-practice-select-wrap{margin-top:10px}.hero-tools.is-practice-feature .hero-practice-content>small{display:block}}
@media(max-width:540px){.hero-tools.is-practice-feature .hero-practice{padding:16px;min-height:0}.hero-tools.is-practice-feature .hero-practice-spark{width:40px;height:40px;flex-basis:40px}}
@media(prefers-reduced-motion:reduce){.hero-tools.is-practice-feature .hero-practice::before{animation:none!important}}
/* Keep the decorative circle inside the Hero to avoid horizontal scroll on mobile. */
.hero.has-icon:has(.hero-tools)::after{right:0;top:0;width:min(300px,78%);height:150px;opacity:.48;pointer-events:none;box-sizing:border-box}

/* FIX 2026-10-20: calendar dropdown belongs in the layout flow, NEVER over the next card.
   Previous absolute positioning placed it behind the adjacent Practice Room (and later sections).
   Inline expansion shifts the surrounding content down and remains touch accessible. */
.hero.has-icon:has(.hero-tools){overflow:visible}
.hero.has-icon .hero-tools{align-items:start}
.hero.has-icon .hero-tools>.hero-countdown{position:relative;isolation:isolate;z-index:2;width:100%;align-self:start}
.hero.has-icon .hero-tools>.hero-practice{z-index:1;width:100%}
.hero-countdown-menu{position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;z-index:auto!important;
  width:100%!important;max-height:min(430px,60dvh);overflow-y:auto;overscroll-behavior:contain;margin-top:12px;
  border:1px solid #dbe7f7;border-radius:15px;box-shadow:0 5px 20px rgba(25,51,94,.08)}
.hero-countdown-form>div{align-items:stretch}
.hero-countdown-form input,.hero-countdown-form button{max-width:100%;height:40px}
@media(max-width:640px){
  .hero-countdown-menu{max-height:min(440px,60dvh);padding:7px}
  .hero-countdown-form>div{grid-template-columns:minmax(0,1fr)}
  .hero-countdown-form input,.hero-countdown-form button{width:100%;min-height:42px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){.hero-countdown-menu{animation:none!important}}
/* Do not stretch the Practice Room to match an expanded calendar on desktop. */
.hero.has-icon .hero-tools.is-practice-feature{align-items:start}
.hero.has-icon .hero-tools.is-practice-feature>.hero-practice{align-self:start}