/* Bố cục di động, vùng chạm và bài nghe nhập tay. */
.header-language{display:flex;align-items:center;gap:7px;background:#edf3e9;border:1px solid #d2dfca;border-radius:10px;padding:0 10px;color:var(--green);flex-shrink:0}.header-language .icon{width:17px;height:17px}.header-language select{border:0;background:transparent;color:inherit;font:inherit;font-size:12px;font-weight:600;padding:10px 2px;min-height:42px;max-width:125px;cursor:pointer}.header-language select:focus-visible{outline:2px solid #769c61;outline-offset:2px}.header-language select:disabled{opacity:.6;cursor:wait}.header-actions{gap:12px}.topbar>.flex:first-child{min-width:0}
@media(max-width:1150px){.header-actions .date-display,.header-actions .top-divider{display:none}}
@media(max-width:600px){.header-actions{gap:7px}.header-language{padding:0 8px}.header-language .icon{display:none}.header-language select{font-size:12px;min-height:44px;max-width:110px}.topbar .mobile-page-title{max-width:145px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topbar>.flex:first-child{gap:6px}}
@media(max-width:480px){.topbar .account{display:none}.topbar{gap:8px}}
.mobile-nav,.mobile-only,.nav-backdrop,.sidebar-close{display:none}
.listening-answer{display:grid;grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr);gap:12px;align-items:end;text-align:left;margin:25px auto;max-width:600px}
.listening-caption{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-weight:600;font-size:12px;color:var(--green);margin-bottom:3px}
.listening-answer input{min-height:49px}.pair-dash{align-self:center;margin-top:28px;color:#96a28a;text-align:center}
.listening-answer .answer-hint{grid-column:1/-1}.quiz-body .answer-hint{font-size:11px;line-height:1.6;color:var(--muted);margin-top:8px;font-weight:400}
.pair-feedback{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:12px;font-size:12px}
.pair-feedback>span{display:flex;align-items:center;gap:6px;background:#ffffff90;padding:6px 10px;border-radius:6px}
.part-good{color:#47753b}.part-bad{color:#a5433b}.feedback .expected-answer{margin-top:12px;color:inherit;overflow-wrap:anywhere}
.quiz-topic{font-size:12px;overflow-wrap:anywhere}.quiz-top>small{white-space:nowrap}.quiz-card{margin-top:22px}.quiz-save-note{text-align:center;font-size:11px;margin-top:18px}.quiz-actions{margin-top:20px}.quiz-body .form-error{margin-top:15px}
.field,.stack,.row>*,.review-grid>*,.page-title>div,.metric,.quicklink{min-width:0}.page-title h1,.topic-item strong,.history-question strong{overflow-wrap:anywhere}
.grid-card .tabulator-tableholder,.table-scroll{overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
.grid-advanced-toggle[aria-pressed=true]{background:var(--soft);border-color:#a8bf98}
@media(max-width:850px){
 .mobile-only{display:inline-flex}.topbar{position:sticky;top:0;z-index:12;background:#fcfdf9f5;backdrop-filter:blur(12px);padding-top:env(safe-area-inset-top);height:calc(64px + env(safe-area-inset-top))}
 .mobile-page-title{font-size:15px;font-weight:650}.topbar .date-display,.top-divider{display:none}.account strong{max-width:125px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .sidebar{width:min(300px,85vw);padding:25px 20px;z-index:40;height:100dvh;overflow-y:auto;box-shadow:none}.sidebar.open{box-shadow:15px 0 60px #18322226}
 .sidebar-close{display:inline-flex;position:absolute;right:12px;top:14px;min-width:40px;min-height:40px}.sidebar .brand{padding-top:10px}.sidebar .nav-label{margin-top:30px}.sidebar .side-note{margin-top:24px}
 body.menu-open .nav-backdrop{display:block;position:fixed;inset:0;z-index:35;border:0;background:#16342666;backdrop-filter:blur(2px)}body.menu-open{overflow:hidden}
 .mobile-nav{position:fixed;bottom:0;left:0;right:0;z-index:25;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;padding:8px max(8px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));background:#fffefa;border-top:1px solid #dfe7d8;box-shadow:0 -5px 24px #203c3106}
 .mobile-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:47px;font-size:10px;color:#84917b;padding:5px 2px;border-radius:10px;line-height:1.2}
 .mobile-nav a .icon{width:22px;height:22px}.mobile-nav a.active{background:#edf3e5;color:var(--green);font-weight:650}
 main{padding-bottom:calc(105px + env(safe-area-inset-bottom))}.row{grid-template-columns:1fr}.page-title{align-items:flex-start}.page-title>.btn{flex-shrink:0}
 button,.btn,.icon-btn{min-height:44px}.icon-btn{min-width:44px}.check-card{min-height:52px}.check-card input,.check input{width:19px;height:19px}
 input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px;min-height:46px}
 .speech-settings select{font-size:14px;min-height:44px}.speech-settings{flex-wrap:wrap}.toolbar{gap:8px}.toolbar .btn{min-height:42px}
 .tabulator-row .tabulator-cell{font-size:15px;padding:12px 10px}.tabulator-row .tabulator-cell.tabulator-editing input{font-size:16px;min-height:44px;padding:8px}
 .save-bar{position:sticky;bottom:calc(80px + env(safe-area-inset-bottom));z-index:11;flex-direction:column;align-items:stretch;gap:9px;padding:12px;background:#fcfdf8f2;border:1px solid var(--border);border-radius:12px;box-shadow:0 4px 24px #213c3010;backdrop-filter:blur(12px)}.save-bar .btn{width:100%}.save-bar .draft-status{text-align:center;font-size:11px}
 body.keyboard-open .mobile-nav{display:none}body.keyboard-open .save-bar{bottom:8px}body.keyboard-open .topbar{position:relative}
 .quiz-body{padding:25px 22px}.quiz-actions .btn{width:100%;min-height:49px;font-size:15px}.quiz-top{gap:10px}.quiz-top>.flex{gap:7px}.quiz-save-note{line-height:1.7}
 dialog{max-height:calc(100dvh - 32px);overflow-y:auto}.history-question>.flex{align-items:flex-start;gap:8px}.history-question>.flex>.flex{flex-shrink:0;gap:4px}
 #toast{bottom:calc(90px + env(safe-area-inset-bottom));width:max-content;max-width:calc(100vw - 28px);text-align:center}.auth~#toast{bottom:24px}
}
@media(max-width:600px){
 main{padding:22px 14px calc(108px + env(safe-area-inset-bottom))}.topbar{padding-left:12px;padding-right:14px}.topbar>.flex{gap:7px}.account{gap:7px}.account .avatar{width:33px;height:33px}.account strong{max-width:100px;font-size:11px}
 .page-title{flex-direction:column;gap:14px;margin-bottom:20px}.page-title h1{font-size:25px;line-height:1.3;letter-spacing:-.7px}.page-title p{font-size:12px;line-height:1.65;margin-top:8px}.page-title>.btn{align-self:stretch;font-size:13px;min-height:45px}
 .hero{min-height:0;margin-bottom:18px}.hero-copy{padding:24px;min-width:0}.hero h2{font-size:24px;line-height:1.4;max-width:none;letter-spacing:-.6px}.hero p{max-width:none;font-size:12px}.hero .tag{font-size:9px;letter-spacing:1.4px}.hero-art{display:none}.hero .btn{font-size:13px;min-height:44px}
 .metrics{gap:10px;margin-bottom:18px}.metric{padding:15px 13px}.metric .flex{gap:6px}.metric .flex>small{font-size:11px;line-height:1.4}.metric-icon{width:29px;height:29px;flex-shrink:0}.metric .value{font-size:28px;margin:10px 0 4px}.metric>small{font-size:10px;display:block}.metric .value span{font-size:11px}.row,.stack,.review-grid{gap:16px}
 .card-head{padding:18px 18px 0;flex-wrap:wrap}.topic-list{padding:8px 18px 15px}.topic-item{gap:10px;flex-wrap:wrap}.topic-item .details{min-width:95px}.topic-item>.badge{font-size:10px}.topic-avatar{width:35px;height:35px}.topic-item .icon-btn{min-width:40px}.quicklinks{grid-template-columns:1fr}.quicklink{padding:15px;font-size:13px;min-height:55px}.quicklink>.icon:last-child{margin-left:auto}
 .pad{padding:18px}.fields{gap:16px}.info{font-size:12px;line-height:1.7}.table-bottom{flex-wrap:wrap;padding:13px 14px;gap:8px}.table-bottom>span:last-child{font-size:10px}.toolbar{padding:12px}.toolbar .spacer{display:none}.toolbar .btn{flex:1 0 auto;font-size:11px;padding:8px 10px}.toolbar .btn.primary{font-size:12px}.grid-card .toolbar{display:grid;grid-template-columns:1fr 1fr}.grid-card .toolbar .spacer{display:none}
 .filters{gap:13px;padding:16px}.filters .field{min-width:calc(50% - 7px)}.filters .table-search{min-width:100%}.check-card{font-size:13px;padding:13px 12px;gap:10px}.question-types strong{font-size:13px}.question-types small{font-size:11px}.check-card>span{min-width:0}.question-types .check-card>.icon{display:none}.checklist{max-height:275px}
 .listening-answer{grid-template-columns:1fr;gap:16px;margin:25px 0}.listening-caption{font-size:12px;line-height:1.5;margin:0}.pair-dash{display:none}.listening-answer input{min-height:51px}.listening-answer .field{font-size:13px;gap:9px}.listening-answer .answer-hint{margin:0}.quiz-body{padding:25px 18px}.quiz-body .tag{font-size:10px;letter-spacing:1.2px}.quiz-body .question-prompt{font-size:28px;line-height:1.4;margin-top:22px}.quiz-body p{line-height:1.65}.sound-button{width:92px;height:92px;margin:22px 0 10px}.speech-settings{gap:8px;margin:13px 0}.speech-settings select{max-width:100%;padding:9px}.quiz-card{margin-top:17px}.quiz-save-note{font-size:10px}.answer-input{text-align:left;margin:25px 0}.answer-input .field{font-size:13px}.answer-input input{min-height:51px}.answers{margin:25px 0}.answer-option{padding:15px;min-height:58px;font-size:15px}.feedback{padding:16px;text-align:left;line-height:1.65}.pair-feedback{justify-content:flex-start;gap:8px}.pair-feedback>span{font-size:11px}.quiz-top{align-items:flex-start}.quiz-topic{font-size:11px}.quiz-top>small{font-size:11px}.quiz-top .badge{font-size:10px}
 .result-stats{grid-template-columns:1fr 1fr}.result-stats>div{padding:15px;border-bottom:1px solid var(--border)}.result-stats>div:nth-child(2){border-right:0}.result-stats>div:nth-child(n+3){border-bottom:0}.result-stats strong{font-size:25px}.result-stats small{font-size:11px}.quiz-body>.flex.wrap>.btn{width:100%;min-height:46px}.history-question>.flex{flex-wrap:wrap}.history-question strong{font-size:13px}.history-question p{font-size:12px}
 table.vocabulary-table,table.history-table{display:block;white-space:normal;background:var(--bg)}table.vocabulary-table thead,table.history-table thead{display:none}table.vocabulary-table tbody,table.history-table tbody{display:grid;gap:12px;padding:0 12px 12px}table.vocabulary-table tr,table.history-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;border:1px solid var(--border);border-radius:11px;background:white;overflow:hidden;padding:12px;gap:7px 10px}table.vocabulary-table td,table.history-table td{padding:0;border:0!important;font-size:12px;min-width:0;white-space:normal!important;overflow-wrap:anywhere}td[data-label]::before{content:attr(data-label);display:block;color:var(--muted);font-size:10px;font-weight:400;margin-bottom:2px}table.vocabulary-table td:nth-child(1){grid-column:2;grid-row:1;justify-self:end;align-self:center}table.vocabulary-table td:nth-child(2){grid-column:1;grid-row:1;font-size:16px;max-width:100%;display:flex;align-items:center;gap:4px}table.vocabulary-table td:nth-child(3){grid-column:1/-1;max-width:none!important;min-width:0!important;margin-bottom:6px;font-size:14px}table.vocabulary-table td:nth-child(4){grid-column:1/-1}table.vocabulary-table td:nth-child(5){grid-column:1;grid-row:4}table.vocabulary-table td:nth-child(6){grid-column:1;grid-row:5}table.vocabulary-table td:nth-child(7){grid-column:2;grid-row:4/6;align-self:end;display:flex}table.vocabulary-table .icon-btn{min-width:40px;min-height:40px}table.vocabulary-table .select-word{width:20px;height:20px}table.history-table td:nth-child(1){grid-column:1}table.history-table td:nth-child(2){grid-column:1/-1;grid-row:2;margin-bottom:7px}table.history-table td:nth-child(3),table.history-table td:nth-child(4),table.history-table td:nth-child(5){grid-column:1}table.history-table td:nth-child(6){grid-column:2;grid-row:1}table.history-table td:nth-child(7){grid-column:2;grid-row:3/6;align-self:end;display:flex;align-items:center;gap:4px}
 dialog{width:100%;max-width:100%;margin:auto 0 0;border-radius:20px 20px 0 0;padding:24px 20px calc(24px + env(safe-area-inset-bottom));max-height:92dvh;border-bottom:0}dialog .fields{grid-template-columns:1fr}dialog .actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}dialog .actions>.btn{min-height:46px;white-space:normal;font-size:13px}dialog h2{font-size:20px}dialog p{font-size:13px;line-height:1.7}
 .auth-story{min-height:0;padding:24px 24px 28px}.auth-intro{padding:20px 0 0}.auth-intro>.tag{font-size:9px}.auth-intro h1{font-size:34px;line-height:1.15;margin-top:12px!important}.auth-intro h1 br:nth-child(2){display:none}.auth-form-side{padding:30px 24px 40px}.auth-form h2{font-size:26px}.auth-form>p{font-size:13px}.auth-form .field{font-size:13px}.auth-form form .btn{min-height:49px;font-size:15px}.auth-switch{font-size:13px}.auth-switch .link{min-height:44px}.auth-privacy{font-size:11px;line-height:1.7;margin-top:24px}.auth-form-side .tag{font-size:10px}.auth-form{max-width:420px}
}
@media(max-width:360px){.topbar .account strong{display:none}.mobile-page-title{font-size:14px}.metric .flex>small{font-size:10px}.hero-copy{padding:20px}.hero h2{font-size:22px}.activity{gap:6px;padding-left:15px;padding-right:15px}.speech-settings{flex-direction:column}.speech-settings select{width:100%}.mobile-nav a{font-size:9px}}
@media(max-width:600px){
 main[data-page=session]>.page-title{flex-direction:row;align-items:center;gap:12px;margin-bottom:18px}
 main[data-page=session]>.page-title h1{font-size:21px}
 main[data-page=session]>.page-title p{display:none}
 main[data-page=session]>.page-title>.btn{align-self:auto;width:auto;padding:9px 11px;font-size:11px;min-height:42px}
 main[data-page=session] .sound-button{width:82px;height:82px;margin:16px 0 5px}
 main[data-page=session] .listening-caption{display:none}
}