/* HSK Exam Pro 4.2.17 — canonical design system
 * One frontend for every route. No 100vw escapes, no transforms, no theme links.
 */
.hsk-exam-app,
.hsk-exam-list,
.hsk-exam-app *,
.hsk-exam-list *{box-sizing:border-box}

:where(.hsk-exam-app,.hsk-exam-list){
  --hsk-red:#cf202d;--hsk-red-dark:#b71824;--hsk-red-soft:#fff2f3;
  --hsk-green:#69be00;--hsk-green-dark:#4f9200;--hsk-orange:#ee7d13;
  --hsk-text:#1e2b45;--hsk-muted:#737d90;--hsk-border:#e4e7eb;
  --hsk-green-border:#d8e8c1;--hsk-bg:#f7f7f8;
  font-family:Arial,"Helvetica Neue","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif!important;
  font-synthesis:none!important;-webkit-font-smoothing:antialiased!important;text-rendering:optimizeLegibility!important;
  color:var(--hsk-text)!important;line-height:1.5!important;text-align:left!important;
  letter-spacing:normal!important;word-spacing:normal!important;text-decoration:none!important;
}
.hsk-exam-app *, .hsk-exam-list *{font-family:inherit}
.hsk-exam-app h1,.hsk-exam-app h2,.hsk-exam-app h3,.hsk-exam-app p,
.hsk-exam-list h1,.hsk-exam-list h2,.hsk-exam-list h3,.hsk-exam-list p{margin:0!important;padding:0!important}
.hsk-exam-app button,.hsk-exam-app input,.hsk-exam-app select,.hsk-exam-app textarea{font:inherit!important;line-height:1.4!important;letter-spacing:normal!important;text-transform:none!important}
.hsk-exam-app button{appearance:none!important;-webkit-appearance:none!important}
.hsk-exam-app img{display:block;max-width:100%;height:auto}

/* HSK 1–2 pinyin: ruby sits directly above each Han character without changing
   the baseline of surrounding punctuation/Latin text. */
.hsk-exam-app .hsk-prompt-text ruby,
.hsk-exam-app .hsk-group-prompt ruby,
.hsk-exam-app .hsk-group-instruction ruby,
.hsk-exam-app .hsk-option-text ruby{
  ruby-position:over!important;
  ruby-align:center!important;
  white-space:normal!important;
}
.hsk-exam-app .hsk-prompt-text rt,
.hsk-exam-app .hsk-group-prompt rt,
.hsk-exam-app .hsk-group-instruction rt,
.hsk-exam-app .hsk-option-text rt{
  font-size:.48em!important;
  line-height:1!important;
  font-weight:500!important;
  color:#7f8898!important;
  letter-spacing:0!important;
  user-select:none!important;
}
.hsk-exam-app .hsk-prompt-text ruby,
.hsk-exam-app .hsk-group-prompt ruby,
.hsk-exam-app .hsk-group-instruction ruby,
.hsk-exam-app .hsk-option-text ruby{
  margin-inline:.01em!important;
}
.hsk-exam-app a,.hsk-exam-list a,
.hsk-exam-app a:link,.hsk-exam-app a:visited,.hsk-exam-app a:hover,.hsk-exam-app a:active,
.hsk-exam-list a:link,.hsk-exam-list a:visited,.hsk-exam-list a:hover,.hsk-exam-list a:active{
  text-decoration:none!important;text-decoration-line:none!important;text-decoration-thickness:0!important;
  text-underline-offset:0!important;color:inherit!important;border-bottom:0!important;box-shadow:none;
}
.hsk-exam-app [hidden]{display:none!important}

/* Typography pass 4.2.4: larger Vietnamese text and clearly readable HSK 1–2 ruby. */
.hsk-exam-app,.hsk-exam-list{font-size:16px!important}
.hsk-exam-app .hsk-prompt-text{font-size:19px!important;line-height:1.9!important}
.hsk-exam-app .hsk-group-prompt{font-size:17px!important;line-height:1.8!important}
.hsk-exam-app .hsk-group-instruction{font-size:16px!important;line-height:1.8!important}
.hsk-exam-app .hsk-option{font-size:16px!important;line-height:1.55!important}
.hsk-exam-app .hsk-option-text{font-size:16px!important;line-height:1.7!important}
.hsk-exam-app .hsk-prompt-text ruby rt,
.hsk-exam-app .hsk-group-prompt ruby rt,
.hsk-exam-app .hsk-group-instruction ruby rt,
.hsk-exam-app .hsk-option-text ruby rt{
  font-size:.68em!important;
  line-height:1.05!important;
  font-weight:700!important;
  color:#3f4756!important;
  letter-spacing:0!important;
}
@media(max-width:760px){
  .hsk-exam-app,.hsk-exam-list{font-size:15px!important}
  .hsk-exam-app .hsk-prompt-text{font-size:17px!important;line-height:1.9!important}
  .hsk-exam-app .hsk-group-prompt{font-size:16px!important}
  .hsk-exam-app .hsk-option,.hsk-exam-app .hsk-option-text{font-size:15px!important}
  .hsk-exam-app .hsk-prompt-text ruby rt,
  .hsk-exam-app .hsk-group-prompt ruby rt,
  .hsk-exam-app .hsk-group-instruction ruby rt,
  .hsk-exam-app .hsk-option-text ruby rt{font-size:.7em!important}
}

/* The plugin must live inside the same content column on every page. */
.hsk-exam-app[data-renderer="hsk-v4"]{
  position:relative!important;
  left:auto!important;right:auto!important;transform:none!important;
  /* Break out of a narrow WordPress content column and use the site's desktop content width.
     This is intentionally centered against the viewport, not against the shortcode's narrow parent. */
  width:min(1100px,calc(100vw - 40px))!important;
  max-width:min(1100px,calc(100vw - 40px))!important;
  margin-top:32px!important;margin-bottom:32px!important;
  margin-left:calc(50% - min(550px,calc(50vw - 20px)))!important;
  margin-right:0!important;
  border:1px solid #eadfe0;border-radius:14px;background:#fff;overflow:hidden;
  box-shadow:0 8px 28px rgba(28,39,62,.05);
}

/* The level/exam browser lives in the same WordPress content area. Keep its
   desktop width identical to the exam interface instead of inheriting the
   theme's narrow article column. */
.hsk-exam-list{
  width:min(1100px,calc(100vw - 40px))!important;
  max-width:min(1100px,calc(100vw - 40px))!important;
  margin-top:38px!important;margin-bottom:38px!important;
  margin-left:calc(50% - min(550px,calc(50vw - 20px)))!important;
  margin-right:0!important;
  padding:0!important;
  position:relative!important;
}

/* ---------- INTRO ---------- */
.hsk-intro-screen{display:flex;justify-content:center;padding:38px 24px;background:linear-gradient(180deg,#fffafa 0%,#fff 100%)}
.hsk-intro-card{width:min(760px,100%);padding:34px 38px 30px;border:1px solid #f0dfe1;border-radius:16px;background:#fff;box-shadow:0 12px 35px rgba(207,32,45,.07)}
.hsk-intro-badge,.hsk-list-badge{display:inline-flex!important;align-items:center;justify-content:center;background:var(--hsk-red)!important;color:#fff!important;border-radius:999px;padding:5px 13px;font-size:12px;font-weight:800;line-height:1.2}
.hsk-intro-card>h1{margin-top:15px!important;font-size:28px!important;line-height:1.35!important;text-align:center!important;font-weight:800!important;color:var(--hsk-text)!important}
.hsk-intro-subtitle{text-align:center;color:var(--hsk-muted);font-size:14px;margin-top:5px!important}
.hsk-intro-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:25px}
.hsk-intro-stats>div,.hsk-intro-stats-extra>div{border:1px solid #eee3e4;border-radius:9px;background:#fffafa;text-align:center;padding:13px 8px}
.hsk-intro-stats strong,.hsk-intro-stats-extra strong{display:block;color:var(--hsk-red);font-size:20px;line-height:1.2}
.hsk-intro-stats span,.hsk-intro-stats-extra span{display:block;color:#8b94a3;font-size:11px;margin-top:4px}
.hsk-intro-section,.hsk-intro-instructions,.hsk-leaderboard{margin-top:22px;padding-top:19px;border-top:1px solid #eee4e5}
.hsk-intro-section h2,.hsk-intro-instructions h2,.hsk-leaderboard h2{font-size:14px!important;font-weight:800!important;margin-bottom:9px!important;color:var(--hsk-text)!important}
.hsk-intro-section-list{border:1px solid var(--hsk-border);border-radius:8px;overflow:hidden}
.hsk-intro-section-row{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:10px 12px;border-bottom:1px solid var(--hsk-border);font-size:13px}
.hsk-intro-section-row:last-child{border-bottom:0}
.hsk-intro-section-row span:last-child{color:var(--hsk-muted);white-space:nowrap}
.hsk-intro-instructions>div{font-size:13px;color:#606b7e;line-height:1.7}
.hsk-intro-stats-extra{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}
.hsk-start-btn{display:flex!important;align-items:center;justify-content:center;width:220px;min-height:46px;margin:25px auto 0!important;padding:0 20px!important;border:0!important;border-radius:8px!important;background:var(--hsk-red)!important;color:#fff!important;font-weight:800!important;text-align:center!important;cursor:pointer!important}
.hsk-start-btn:hover{background:var(--hsk-red-dark)!important;color:#fff!important}.hsk-start-btn:disabled{opacity:.65;cursor:wait!important}
.hsk-intro-note{text-align:center;color:#a0a8b5;font-size:11px;margin-top:8px!important}

/* ---------- LEADERBOARD ---------- */
.hsk-leaderboard-table-wrap{width:100%;overflow-x:auto}
table.hsk-leaderboard-table{width:100%!important;table-layout:fixed!important;border-collapse:collapse!important;border-spacing:0!important;margin:0!important;background:#fff!important;font-family:inherit!important}
.hsk-leaderboard-table col.hsk-lb-col-rank{width:9%}.hsk-leaderboard-table col.hsk-lb-col-name{width:49%}.hsk-leaderboard-table col.hsk-lb-col-score{width:23%}.hsk-leaderboard-table col.hsk-lb-col-correct{width:19%}
.hsk-leaderboard-table th,.hsk-leaderboard-table td{padding:10px 8px!important;border:0!important;border-bottom:1px solid #eee!important;line-height:1.35!important;vertical-align:middle!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.hsk-leaderboard-table th{background:#fafafa!important;color:#7c8491!important;font-weight:700!important;text-align:left!important}.hsk-leaderboard-table td.hsk-lb-name{font-weight:600!important}.hsk-leaderboard-table td.hsk-lb-score,.hsk-leaderboard-table td.hsk-lb-correct{text-align:right!important;font-variant-numeric:tabular-nums!important}

/* ---------- TAKE SCREEN ---------- */
.hsk-exam-interface{display:none;width:100%;background:#fff}
.hsk-exam-app.hsk-in-progress .hsk-intro-screen{display:none!important}.hsk-exam-app.hsk-in-progress .hsk-exam-interface{display:block!important}
.hsk-topbar{height:60px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 18px;border-bottom:1px solid var(--hsk-border);background:#fff}
.hsk-title{display:flex;align-items:center;gap:8px;min-width:0;font-size:15px;font-weight:800}.hsk-icon{font-size:17px}.hsk-exam-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hsk-top-right{display:flex;align-items:center;gap:15px;white-space:nowrap;color:var(--hsk-red);font-weight:800;font-size:14px}.hsk-timer{font-variant-numeric:tabular-nums}
.hsk-layout{display:grid!important;grid-template-columns:250px minmax(0,1fr) 250px!important;grid-template-areas:"sidebar main profile"!important;width:100%!important;min-height:720px!important;align-items:stretch!important}
.hsk-sidebar{grid-area:sidebar!important;min-width:0!important;width:auto!important;background:#f6f6f7;border-right:1px solid var(--hsk-border)!important;overflow:hidden!important}
.hsk-side-head{padding:16px 15px;background:#fff;border-bottom:1px solid var(--hsk-border);font-size:14px;font-weight:800}
.hsk-sidebar-scroll{height:660px;max-height:calc(100vh - 130px);overflow:auto;padding:10px 9px;scrollbar-width:thin}
.hsk-section-nav,.hsk-part-nav{margin-bottom:7px}.hsk-section-content,.hsk-part-content{display:none!important}.hsk-section-content.is-open,.hsk-part-content.is-open{display:block!important}
.hsk-dropdown-toggle{width:100%!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;min-height:39px!important;padding:0 11px!important;border:1px solid #dfe2e6!important;border-radius:7px!important;background:#fff!important;color:#596375!important;font-size:13px!important;font-weight:600!important;text-align:left!important;cursor:pointer!important}
.hsk-section-nav.active-section>.hsk-section-title,.hsk-section-title:hover{border-color:#f0b7bc!important;background:#fff1f2!important;color:var(--hsk-red)!important}.hsk-section-nav.active-section>.hsk-section-title{font-weight:800!important}
.hsk-part-nav{margin-top:6px}.hsk-part-title{min-height:36px!important;font-size:12px!important}.hsk-part-nav.active-part>.hsk-part-title{border-color:#f0b7bc!important;background:#fff1f2!important;color:var(--hsk-red)!important;font-weight:800!important}
.hsk-nav-q{position:relative!important;width:100%!important;display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:36px!important;margin:5px 0!important;padding:0 10px!important;border:1px solid #e1e3e6!important;border-radius:6px!important;background:#fff!important;color:#5d6573!important;font-size:13px!important;text-align:left!important;cursor:pointer!important}.hsk-nav-q:hover{border-color:#efc2c5!important}.hsk-nav-q.active{background:var(--hsk-red)!important;border-color:var(--hsk-red)!important;color:#fff!important;font-weight:800!important}.hsk-nav-q.done:not(.active)::after{content:"✓";color:var(--hsk-green-dark);font-weight:800}.hsk-nav-q.group-active:not(.active){background:#f4fbe9!important;border-color:#cfe6aa!important}
.hsk-main{grid-area:main!important;min-width:0!important;width:auto!important;display:flex!important;flex-direction:column!important;background:#fff;overflow:hidden!important}.hsk-question-area{flex:1 1 auto!important;min-width:0!important;width:100%!important;max-width:none!important;margin:0!important;padding:28px 30px!important;overflow:auto!important}
.hsk-controls{display:flex;justify-content:center;gap:12px;padding:13px;border-top:1px solid var(--hsk-border);background:#fff}.hsk-btn{min-width:112px;min-height:42px;border:0!important;border-radius:7px!important;padding:0 17px!important;background:var(--hsk-red)!important;color:#fff!important;font-weight:800!important;font-size:13px!important}.hsk-btn.hsk-prev{background:var(--hsk-orange)!important}.hsk-btn:hover{filter:brightness(.95)}
.hsk-profile{grid-area:profile!important;min-width:0!important;width:auto!important;border-left:1px solid var(--hsk-border);padding:22px 16px;background:#fff;text-align:center}.hsk-avatar{width:64px;height:64px;margin:0 auto 15px;border:2px solid #f2c9cd;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--hsk-red);font-weight:800}.hsk-profile-name{font-size:15px;font-weight:800;margin-bottom:16px}.hsk-profile-level{padding:10px;border-radius:7px;background:var(--hsk-red);color:#fff;text-align:left;font-size:13px;font-weight:700;margin-bottom:9px}.hsk-side-btn{width:100%;min-height:42px;margin:5px 0;border:1px solid #ddd!important;border-radius:7px!important;background:#fff!important;color:#222!important;font-weight:700!important}.hsk-side-btn.hsk-submit{background:var(--hsk-orange)!important;border-color:var(--hsk-orange)!important;color:#fff!important}

/* ---------- QUESTIONS ---------- */
.hsk-question-head,.hsk-group-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;min-height:52px;padding-bottom:10px;border-bottom:1px solid var(--hsk-border);margin-bottom:18px}.hsk-q-no,.hsk-group-title{display:flex;align-items:center;justify-content:center;min-width:58px;height:44px;padding:0 12px;border-radius:7px;background:var(--hsk-red);color:#fff;font-weight:800;font-size:14px}.hsk-q-part,.hsk-group-part{text-align:center;color:#8991a0;font-size:13px}.hsk-mark{border:0!important;background:transparent!important;color:#b7bbc1!important;font-size:22px!important;line-height:1!important;padding:4px!important;cursor:pointer!important}.hsk-mark.active{color:#e6a900!important}
.hsk-question-image{text-align:center;margin:10px 0 22px}.hsk-question-image img{display:inline-block;max-width:100%;max-height:470px;object-fit:contain;border-radius:5px}.hsk-prompt-text{font-size:17px;line-height:1.75;margin:14px 0 20px;color:#263238}
/* ---------- ANSWER OPTIONS: compact, consistent, adaptive ---------- */
.hsk-options{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px!important;width:100%!important;align-items:stretch!important}
/* 3/5 choices: use the available width instead of leaving a lonely card on row 2. */
.hsk-options.hsk-count-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.hsk-options.hsk-count-5{grid-template-columns:repeat(3,minmax(0,1fr))!important}
/* Six short choices (A-F) fit naturally in one row on desktop. */
.hsk-options.hsk-count-6{grid-template-columns:repeat(6,minmax(0,1fr))!important}
.hsk-options.hsk-long-options{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.hsk-option{position:relative!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:9px!important;min-height:56px!important;width:100%!important;margin:0!important;padding:10px 13px!important;border:1px solid #dfe3e8!important;border-radius:9px!important;background:#fff!important;color:var(--hsk-text)!important;cursor:pointer!important;font-size:15px!important;font-weight:600!important;text-align:left!important;text-decoration:none!important;line-height:1.35!important;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease!important}
.hsk-option:hover{border-color:#e7b3b7!important;background:#fffafa!important;box-shadow:0 2px 8px rgba(30,43,69,.04)!important}
.hsk-option.selected{border-color:var(--hsk-red)!important;background:#fff2f3!important;box-shadow:inset 0 0 0 1px rgba(207,32,45,.06)!important}
.hsk-option input{display:block!important;flex:0 0 18px!important;width:18px!important;height:18px!important;min-width:18px!important;min-height:18px!important;margin:0!important;padding:0!important;vertical-align:middle!important;accent-color:var(--hsk-red)!important}
.hsk-option-key{display:inline-flex!important;flex:0 0 auto!important;align-items:center!important;justify-content:flex-start!important;min-width:18px!important;line-height:1.2!important;font-weight:800!important;color:inherit!important}
.hsk-option-text{display:block!important;min-width:0!important;flex:1 1 auto!important;line-height:1.45!important;white-space:normal!important;overflow-wrap:normal!important;word-break:normal!important}
/* Real image answers get a card layout; the JS only applies this when an image URL exists. */
.hsk-image-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.hsk-image-option{display:grid!important;grid-template-columns:18px minmax(0,1fr)!important;grid-template-rows:auto auto auto!important;align-items:center!important;justify-content:stretch!important;text-align:left!important;min-height:190px!important;padding:12px!important}
.hsk-image-option input{grid-column:1!important;grid-row:1!important;align-self:center!important}
.hsk-image-option .hsk-option-key{grid-column:2!important;grid-row:1!important;align-self:center!important}
.hsk-image-option img{grid-column:1 / -1!important;grid-row:2!important;width:auto!important;height:120px!important;max-width:100%!important;object-fit:contain!important;margin:10px auto 5px!important}
.hsk-image-option .hsk-option-text{grid-column:1 / -1!important;grid-row:3!important;text-align:center!important;margin-top:3px!important}
.hsk-text-answer input{width:100%!important;min-height:48px!important;border:1px solid #dfe2e6!important;border-radius:8px!important;padding:10px 12px!important;background:#fff!important}

/* Group questions: robust body-based layout. The number column stretches only to
   the actual question body; no grid-row spanning or percentage heights. */
.hsk-question-group{width:100%!important;min-width:0!important}
.hsk-group-material{width:100%!important;border:1px solid var(--hsk-green-border)!important;border-radius:9px!important;background:#fbfff7!important;padding:14px!important;margin-bottom:12px!important}
.hsk-group-instruction{font-size:14px;line-height:1.6;margin-bottom:10px}
.hsk-group-image img{max-width:100%!important;max-height:500px!important;width:auto!important;margin:0 auto!important;object-fit:contain!important}
/* 4.2.15: grouped material/answer-bank wrappers must collapse to real content. */
.hsk-exam-app .hsk-question-group,
.hsk-exam-app .hsk-group-material,
.hsk-exam-app .hsk-group-image{height:auto!important;min-height:0!important;max-height:none!important;flex:none!important}
.hsk-exam-app .hsk-group-image{display:block!important;line-height:0!important}
.hsk-exam-app .hsk-group-image img{display:block!important;height:auto!important;max-height:500px!important;min-height:0!important}
.hsk-exam-app .hsk-group-answer-bank:empty,
.hsk-exam-app .hsk-group-answer-bank-options:empty{display:none!important;height:0!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important}

.hsk-group-question{
  display:grid!important;
  grid-template-columns:56px minmax(0,1fr)!important;
  gap:0!important;
  min-width:0!important;
  border:1px solid var(--hsk-green-border)!important;
  border-radius:8px!important;
  margin:9px 0!important;
  background:#fff!important;
  overflow:hidden!important;
  height:auto!important;
  min-height:0!important;
  align-items:stretch!important;
}
.hsk-group-question-number{
  grid-column:1!important;
  grid-row:auto!important;
  align-self:stretch!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  padding-top:12px!important;
  background:var(--hsk-green)!important;
  color:#fff!important;
  font-weight:800!important;
  font-size:17px!important;
  line-height:1.2!important;
}
.hsk-group-question-body{
  grid-column:2!important;
  min-width:0!important;
  display:block!important;
  align-self:stretch!important;
  padding:0!important;
}
.hsk-group-prompt{padding:12px 14px 5px!important;font-size:17px!important;line-height:1.8!important;min-width:0!important;overflow-wrap:break-word!important}
.hsk-group-question>.hsk-group-question-body>.hsk-options{width:100%!important;display:grid!important;align-items:center!important;margin:0!important}
.hsk-group-question>.hsk-group-question-body>.hsk-options .hsk-option{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;border:0!important;background:transparent!important;padding:7px 6px!important;min-height:42px!important;width:100%!important;gap:8px!important}
.hsk-group-question>.hsk-group-question-body>.hsk-options .hsk-option:hover,
.hsk-group-question>.hsk-group-question-body>.hsk-options .hsk-option.selected{background:#fff3f3!important;border-radius:7px!important}
.hsk-group-question>.hsk-group-question-body>.hsk-options .hsk-option input{display:block!important;width:18px!important;height:18px!important;min-width:18px!important;margin:0!important}
.hsk-group-question>.hsk-group-question-body>.hsk-options .hsk-option-key{font-size:16px!important;font-weight:800!important}
.hsk-group-question>.hsk-group-question-body>.hsk-options .hsk-option-text{font-size:15px!important;min-width:0!important;overflow-wrap:anywhere!important;word-break:normal!important;white-space:normal!important}

/* Shared-bank member rows: only the letters are selectable. */
.hsk-group-question-body>.hsk-options.hsk-options-compact{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:3px!important;
  padding:5px 12px 9px!important;
  height:auto!important;
  min-height:0!important;
  align-self:start!important;
}
.hsk-group-question-body>.hsk-options.hsk-options-compact .hsk-compact-option{
  min-height:40px!important;
  padding:5px 8px!important;
  gap:7px!important;
  border:0!important;
  background:transparent!important;
  border-radius:7px!important;
}
.hsk-group-question-body>.hsk-options.hsk-options-compact .hsk-compact-option input{
  flex:0 0 18px!important;
  width:18px!important;height:18px!important;
}
.hsk-group-question-body>.hsk-options.hsk-options-compact .hsk-option-key{
  font-size:16px!important;
  font-weight:800!important;
}
.hsk-group-question-body>.hsk-options.hsk-options-compact .hsk-compact-option:hover,
.hsk-group-question-body>.hsk-options.hsk-options-compact .hsk-compact-option.selected{background:#fff3f3!important}
.hsk-group-no-options{height:1px!important;min-height:1px!important}

/* Shared answer bank: 2 columns for grouped HSK answer banks; each choice stays horizontal. */
.hsk-exam-app .hsk-group-answer-bank{
  width:100%!important;
  margin:0 0 12px!important;
  padding:10px 12px!important;
  border:1px solid var(--hsk-green-border)!important;
  border-radius:9px!important;
  background:#fff!important;
}
.hsk-exam-app .hsk-group-answer-bank-options{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:4px 18px!important;
  width:100%!important;
  align-items:stretch!important;
}
.hsk-exam-app .hsk-group-bank-item{
  min-width:0!important;
  min-height:58px!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  padding:7px 10px!important;
  border-radius:7px!important;
  background:#fff!important;
  color:var(--hsk-text)!important;
  text-align:left!important;
}
.hsk-exam-app .hsk-group-bank-key{
  flex:0 0 auto!important;
  font-size:16px!important;
  line-height:1.2!important;
  font-weight:800!important;
}
.hsk-exam-app .hsk-group-bank-content{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
}
.hsk-exam-app .hsk-group-bank-content img{width:auto!important;max-width:100%!important;max-height:60px!important;object-fit:contain!important;margin:0!important}
.hsk-exam-app .hsk-group-bank-text{
  min-width:0!important;
  max-width:100%!important;
  font-size:16px!important;
  line-height:1.55!important;
  font-weight:600!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
.hsk-exam-app .hsk-group-bank-text ruby{white-space:normal!important}

/* Image answer banks: the image itself identifies A/B/C/D/E/F; hide redundant
   letter labels and center each image cleanly. */
.hsk-exam-app .hsk-group-answer-bank-image .hsk-group-bank-item{
  justify-content:center!important;
  min-height:110px!important;
  padding:8px!important;
}
.hsk-exam-app .hsk-group-answer-bank-image .hsk-group-bank-content{
  width:100%!important;
  justify-content:center!important;
}
.hsk-exam-app .hsk-group-answer-bank-image .hsk-group-bank-content img{
  max-width:100%!important;
  max-height:150px!important;
  width:auto!important;
  height:auto!important;
}

.hsk-exam-app .hsk-group-bank-text rt{
  font-size:.68em!important;
  line-height:1.05!important;
  font-weight:700!important;
  color:#3f4756!important;
}

@media(max-width:1050px){
  .hsk-exam-app .hsk-group-answer-bank-options{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .hsk-group-question-body>.hsk-options.hsk-options-compact{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:760px){
  .hsk-exam-app .hsk-group-answer-bank-options{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .hsk-group-question-body>.hsk-options.hsk-options-compact{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:420px){
  .hsk-group-question{grid-template-columns:44px minmax(0,1fr)!important}
  .hsk-group-question-body>.hsk-options.hsk-options-compact{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .hsk-exam-app .hsk-group-answer-bank-options{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* Listening groups: script/transcript is never rendered. */
.hsk-exam-audio-persistent{margin:0 0 18px;padding:12px 14px;border:1px solid #efc5c9;border-radius:9px;background:#fff7f8}.hsk-exam-audio-label{margin-bottom:7px;color:var(--hsk-red);font-size:13px;font-weight:800}.hsk-exam-audio-player{display:block;width:100%;height:40px}


/* 4.2.17: grouped materials must shrink-wrap their real contents. */
.hsk-exam-app .hsk-question-group{display:block!important;height:fit-content!important;min-height:0!important;max-height:none!important;align-self:flex-start!important;overflow:visible!important}
.hsk-exam-app .hsk-group-material{display:block!important;height:fit-content!important;min-height:0!important;max-height:none!important;align-self:flex-start!important;overflow:visible!important}
.hsk-exam-app .hsk-group-image{width:100%!important;height:fit-content!important;min-height:0!important;max-height:none!important;overflow:hidden!important}
.hsk-exam-app .hsk-group-image img{display:block!important;width:auto!important;max-width:100%!important;height:auto!important;max-height:500px!important;min-height:0!important;margin:0 auto!important}

/* ---------- LIST / LEVEL BROWSER ---------- */
.hsk-level-header,.hsk-exam-list-header{margin-bottom:24px!important}.hsk-level-kicker,.hsk-list-kicker{display:block;color:var(--hsk-red)!important;font-size:14px!important;font-weight:800!important;letter-spacing:.02em!important;margin-bottom:8px!important}.hsk-level-header h2,.hsk-exam-list-header h2{font-size:34px!important;line-height:1.2!important;font-weight:800!important;color:var(--hsk-text)!important;margin-bottom:8px!important}.hsk-level-header p,.hsk-exam-list-header p{color:var(--hsk-muted)!important;font-size:16px!important}
.hsk-level-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:20px!important}.hsk-level-card{position:relative!important;display:flex!important;flex-direction:column!important;min-height:250px!important;padding:28px!important;border:1px solid #eadfe0!important;border-radius:16px!important;background:#fff!important;box-shadow:0 7px 24px rgba(27,38,58,.05)!important;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;cursor:pointer!important;color:var(--hsk-text)!important;pointer-events:auto!important}.hsk-level-card *{pointer-events:none!important;text-decoration:none!important}.hsk-level-card:hover{transform:translateY(-2px)!important;border-color:#e5b3b7!important;box-shadow:0 12px 28px rgba(27,38,58,.08)!important}.hsk-level-number{font-size:31px!important;font-weight:800!important;color:var(--hsk-red)!important;line-height:1.1!important;text-decoration:none!important}.hsk-level-cn{margin-top:14px!important;font-size:15px!important;color:#626b7a!important}.hsk-level-desc{margin-top:9px!important;font-size:14px!important;color:var(--hsk-text)!important}.hsk-level-count{margin-top:auto!important;padding-top:18px!important;font-size:16px!important;font-weight:700!important}.hsk-level-arrow{margin-top:12px!important;color:var(--hsk-red)!important;font-size:15px!important;font-weight:800!important}
.hsk-exam-list-header{position:relative;padding:22px 0 5px!important}.hsk-exam-back{display:inline-flex!important;align-items:center;gap:6px;color:var(--hsk-red)!important;font-weight:800!important;font-size:14px!important;margin-bottom:16px!important}.hsk-exam-list-toolbar{margin:0 0 18px!important}.hsk-exam-list-search{width:100%!important;max-width:440px!important;min-height:44px!important;padding:10px 13px!important;border:1px solid #dfe2e6!important;border-radius:8px!important;background:#fff!important;outline:0!important}.hsk-exam-list-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important}.hsk-exam-list-card{padding:23px!important;border:1px solid #e6e7e9!important;border-radius:14px!important;background:#fff!important;box-shadow:0 5px 18px rgba(25,35,53,.04)!important}.hsk-list-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.hsk-list-card-icon{font-size:11px;color:#8a92a0;font-weight:800}.hsk-exam-list-card h3{font-size:19px!important;line-height:1.45!important;margin:14px 0!important;font-weight:800!important;color:var(--hsk-text)!important;text-decoration:none!important}.hsk-list-meta{display:flex;flex-wrap:wrap;gap:10px;color:#697386;font-size:13px}.hsk-list-attempts{margin-top:9px;color:#8a92a0;font-size:13px}.hsk-list-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;margin-top:17px!important;min-height:40px!important;padding:9px 15px!important;border-radius:7px!important;background:var(--hsk-red)!important;color:#fff!important;font-weight:800!important;font-size:13px!important;text-decoration:none!important;cursor:pointer!important}.hsk-list-btn:hover{background:var(--hsk-red-dark)!important;color:#fff!important}.hsk-exam-empty{padding:45px 25px;text-align:center;border:1px dashed #d9dde2;border-radius:12px;background:#fafafa}.hsk-exam-empty p{color:var(--hsk-muted);margin:6px 0 8px!important}

/* ---------- MODALS ---------- */
.hsk-sheet-modal,.hsk-submit-confirm-modal,.hsk-result-modal{position:fixed!important;inset:0!important;z-index:999999!important;background:rgba(19,26,40,.58)!important;display:flex;align-items:center;justify-content:center;padding:20px}.hsk-sheet-modal[hidden],.hsk-submit-confirm-modal[hidden],.hsk-result-modal[hidden]{display:none!important}.hsk-sheet-box,.hsk-submit-confirm-box,.hsk-result-box{position:relative;width:min(620px,100%);max-height:90vh;overflow:auto;border-radius:14px;background:#fff;padding:28px;box-shadow:0 20px 60px rgba(0,0,0,.2)}.hsk-modal-close,.hsk-confirm-close{position:absolute;right:14px;top:10px;border:0!important;background:transparent!important;font-size:28px!important;color:#888}.hsk-sheet-box h2,.hsk-submit-confirm-box h2,.hsk-result-box h2{text-align:center;font-size:22px!important;margin-bottom:18px!important}.hsk-sheet-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:7px;margin-bottom:18px}.hsk-sheet-grid button{min-height:38px;border:1px solid #ddd!important;border-radius:6px!important;background:#fff!important}.hsk-sheet-grid button.done{background:#f0f9e5!important;border-color:#bfe190!important;color:#4c8e00!important;font-weight:700}.hsk-confirm-icon{width:42px;height:42px;border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;background:#fff4e8;color:var(--hsk-orange);font-weight:800}.hsk-confirm-message{text-align:center;color:var(--hsk-muted);margin-bottom:18px!important}.hsk-submit-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.hsk-submit-summary>div{padding:12px;border:1px solid var(--hsk-border);border-radius:8px;text-align:center}.hsk-submit-summary strong{display:block;font-size:21px}.hsk-submit-summary span{font-size:11px;color:var(--hsk-muted)}.hsk-confirm-actions{display:flex;justify-content:center;gap:10px;margin-top:20px}.hsk-result-badge{display:block;width:max-content;margin:0 auto 13px;padding:6px 12px;border-radius:999px;background:#fff0f1;color:var(--hsk-red);font-size:12px;font-weight:700}.hsk-result-status{text-align:center;font-size:24px;font-weight:800;color:var(--hsk-red);margin-bottom:4px}.hsk-result-status.passed{color:var(--hsk-green-dark)}.hsk-score{text-align:center;font-size:48px;font-weight:800;color:var(--hsk-green-dark);line-height:1.15;margin:10px 0}.hsk-result-details{text-align:center;color:var(--hsk-muted);font-size:14px}.hsk-result-sections{margin-top:18px;border-top:1px solid var(--hsk-border)}.hsk-result-section-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--hsk-border)}.hsk-result-section-row small{display:block;color:var(--hsk-muted)}.hsk-result-section-score{text-align:right}.hsk-result-section-score .ok{color:var(--hsk-green-dark)}.hsk-result-section-score .no{color:var(--hsk-red)}.hsk-result-close{display:block;margin:20px auto 0}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1050px){.hsk-exam-app[data-renderer="hsk-v4"]{max-width:min(1100px,calc(100vw - 40px))!important}.hsk-layout{grid-template-columns:220px minmax(0,1fr) 220px!important}.hsk-question-area{padding:24px 20px!important}.hsk-options.hsk-count-6{grid-template-columns:repeat(3,minmax(0,1fr))!important}.hsk-options.hsk-long-options{grid-template-columns:repeat(3,minmax(0,1fr))!important}.hsk-group-question>.hsk-options{grid-template-columns:repeat(2,minmax(0,1fr))!important}.hsk-level-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:820px){.hsk-layout{grid-template-columns:210px minmax(0,1fr)!important;grid-template-areas:"sidebar main"!important}.hsk-profile{display:none!important}.hsk-level-grid,.hsk-exam-list-grid{grid-template-columns:1fr!important}}
@media(max-width:760px){
  .hsk-exam-app[data-renderer="hsk-v4"]{width:100%!important;max-width:none!important;margin:12px 0!important;border-radius:0!important}
  .hsk-exam-list{width:calc(100% - 24px)!important;max-width:none!important;margin:22px 12px!important}
  .hsk-intro-screen{padding:20px 12px}.hsk-intro-card{padding:25px 17px}.hsk-intro-card>h1{font-size:22px!important}.hsk-intro-stats{grid-template-columns:1fr}.hsk-intro-stats-extra{grid-template-columns:1fr 1fr}
  .hsk-topbar{height:auto;min-height:54px;padding:9px 12px}.hsk-top-right{font-size:11px;gap:8px}.hsk-layout{display:block!important;min-height:0!important}.hsk-sidebar,.hsk-profile{display:none!important}.hsk-question-area{padding:16px 12px!important}.hsk-question-head,.hsk-group-head{gap:8px}.hsk-q-no,.hsk-group-title{min-width:50px;height:40px}.hsk-options,.hsk-options.hsk-count-3,.hsk-options.hsk-count-5,.hsk-options.hsk-count-6,.hsk-options.hsk-long-options{grid-template-columns:1fr!important}.hsk-image-grid{grid-template-columns:1fr!important}.hsk-image-option img{height:180px!important}.hsk-group-question>.hsk-options{grid-template-columns:repeat(2,minmax(0,1fr))!important}.hsk-controls{position:sticky;bottom:0;z-index:20}.hsk-sheet-grid{grid-template-columns:repeat(5,1fr)}.hsk-level-header h2,.hsk-exam-list-header h2{font-size:27px!important}
}
@media(max-width:420px){.hsk-group-question{grid-template-columns:42px minmax(0,1fr)!important}.hsk-group-question>.hsk-options{grid-template-columns:repeat(2,minmax(0,1fr))!important}.hsk-confirm-actions{flex-direction:column}.hsk-confirm-actions .hsk-btn{width:100%}}


/* 4.2.19 — canonical grouped-question presentation
 * A grouped block has exactly two modes:
 *   image = one admin-managed shared image + compact A-F controls per question
 *   text  = one auto-rendered text answer bank + compact A-F controls per question
 * No hidden/fixed-height placeholder is allowed.
 */
.hsk-exam-app .hsk-question-group{
  display:block!important;width:100%!important;max-width:100%!important;
  height:auto!important;min-height:0!important;max-height:none!important;
  margin:0 0 18px!important;padding:0!important;overflow:visible!important;
}
.hsk-exam-app .hsk-group-material{
  display:block!important;width:100%!important;height:auto!important;min-height:0!important;
  max-height:none!important;margin:0 0 12px!important;padding:12px!important;
  overflow:visible!important;box-sizing:border-box!important;
}
.hsk-exam-app .hsk-group-image{
  display:block!important;width:100%!important;height:auto!important;min-height:0!important;
  max-height:none!important;margin:0!important;padding:0!important;overflow:visible!important;
  line-height:0!important;
}
.hsk-exam-app .hsk-group-image img{
  display:block!important;width:auto!important;max-width:100%!important;height:auto!important;
  max-height:650px!important;min-height:0!important;margin:0 auto!important;object-fit:contain!important;
}
.hsk-exam-app .hsk-group-answer-bank{
  display:block!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;
  margin:0 0 12px!important;padding:10px 12px!important;box-sizing:border-box!important;
  border:1px solid var(--hsk-green-border)!important;border-radius:9px!important;background:#fff!important;
  overflow:visible!important;
}
.hsk-exam-app .hsk-group-answer-bank-options{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:4px 18px!important;width:100%!important;height:auto!important;min-height:0!important;
}
.hsk-exam-app .hsk-group-bank-item{
  display:flex!important;align-items:center!important;justify-content:flex-start!important;
  flex-direction:row!important;min-width:0!important;min-height:52px!important;height:auto!important;
  padding:6px 8px!important;gap:8px!important;background:#fff!important;border:0!important;
}
.hsk-exam-app .hsk-group-bank-key{display:inline-flex!important;align-items:center!important;flex:0 0 auto!important;}
.hsk-exam-app .hsk-group-bank-content{display:flex!important;align-items:center!important;min-width:0!important;}
.hsk-exam-app .hsk-group-bank-content img{display:block!important;width:auto!important;max-width:100%!important;max-height:80px!important;height:auto!important;margin:0!important;object-fit:contain!important;}
.hsk-exam-app .hsk-group-bank-text{display:inline-block!important;min-width:0!important;white-space:normal!important;overflow-wrap:normal!important;}

/* Image answer bank: the uploaded image is the complete answer bank, so its A-F labels
 * are part of the image and the web UI renders no duplicate labels or empty wrapper. */
.hsk-exam-app .hsk-group-answer-bank-image-wrap{
  display:block!important;width:100%!important;height:auto!important;min-height:0!important;
  max-height:none!important;margin:0 0 12px!important;padding:0!important;overflow:visible!important;
  line-height:0!important;background:transparent!important;border:0!important;
}
.hsk-exam-app .hsk-group-answer-bank-image-wrap img{
  display:block!important;width:auto!important;max-width:100%!important;height:auto!important;
  max-height:720px!important;min-height:0!important;margin:0 auto!important;object-fit:contain!important;
  border:0!important;box-shadow:none!important;
}

.hsk-exam-app .hsk-group-question{
  display:grid!important;grid-template-columns:56px minmax(0,1fr)!important;
  width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;
  margin:9px 0!important;padding:0!important;align-items:stretch!important;
  overflow:hidden!important;box-sizing:border-box!important;
}
.hsk-exam-app .hsk-group-question-number{
  align-self:stretch!important;display:flex!important;align-items:flex-start!important;
  min-height:100%!important;height:auto!important;padding:12px 0 0!important;
}
.hsk-exam-app .hsk-group-question-body{
  display:block!important;align-self:stretch!important;width:100%!important;height:auto!important;
  min-height:0!important;max-height:none!important;padding:0!important;overflow:visible!important;
}
.hsk-exam-app .hsk-group-question-body>.hsk-options.hsk-options-compact{
  display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;
  width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;
  padding:5px 12px 9px!important;margin:0!important;align-self:start!important;
}
.hsk-exam-app .hsk-group-question-body>.hsk-options.hsk-options-compact .hsk-compact-option{
  display:flex!important;align-items:center!important;justify-content:flex-start!important;
  flex-direction:row!important;width:100%!important;height:auto!important;min-height:40px!important;
  padding:5px 8px!important;margin:0!important;border:0!important;background:transparent!important;
}
.hsk-exam-app .hsk-group-question-body>.hsk-options.hsk-options-compact .hsk-compact-option input{
  flex:0 0 18px!important;width:18px!important;height:18px!important;min-width:18px!important;
  min-height:18px!important;margin:0!important;
}

@media(max-width:1050px){
  .hsk-exam-app .hsk-group-answer-bank-options{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .hsk-exam-app .hsk-group-question-body>.hsk-options.hsk-options-compact{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:760px){
  .hsk-exam-app .hsk-group-answer-bank-image-wrap img{max-height:none!important;width:100%!important}
  .hsk-exam-app .hsk-group-question{grid-template-columns:44px minmax(0,1fr)!important}
  .hsk-exam-app .hsk-group-question-body>.hsk-options.hsk-options-compact{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:420px){
  .hsk-exam-app .hsk-group-question{grid-template-columns:42px minmax(0,1fr)!important}
  .hsk-exam-app .hsk-group-question-body>.hsk-options.hsk-options-compact{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* =====================================================================
 * HSK Exam Pro 5.0 — giao diện "tờ đề": trái ảnh đề, phải phiếu trả lời
 * ===================================================================== */
.hsk-exam-app{--hsk-paper-bg:#faf6f0;--hsk-ink:#1f1a17;--hsk-line:#ece6dc}
/* Khi đang làm bài: mở rộng khung tới 1440px để đủ chỗ cho ảnh đề + phiếu trả lời. */
.hsk-exam-app[data-renderer="hsk-v4"].hsk-in-progress{
  width:min(1440px,calc(100vw - 40px))!important;max-width:min(1440px,calc(100vw - 40px))!important;
  margin-left:calc(50% - min(720px,calc(50vw - 20px)))!important;
  background:var(--hsk-paper-bg)!important;border-color:var(--hsk-line)!important;padding:0 20px!important;
}
@media(max-width:760px){.hsk-exam-app[data-renderer="hsk-v4"].hsk-in-progress{width:100%!important;max-width:none!important;margin:12px 0!important;padding:0 10px!important}}
.hsk-exam-app.hsk-in-progress .hsk-exam-interface{background:var(--hsk-paper-bg)!important;padding:0 0 16px;border-radius:12px}
.hsk-paper-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 4px 14px;border-bottom:1px solid var(--hsk-line);margin-bottom:16px;position:sticky;top:0;z-index:30;background:var(--hsk-paper-bg)}
.hsk-paper-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;min-width:0;font-size:17px;font-weight:800;color:var(--hsk-ink)}
.hsk-paper-title .hsk-exam-title{white-space:normal}
.hsk-paper-sep{color:#b9b1a5}
.hsk-paper-title .hsk-timer{margin-left:10px;font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--hsk-ink)}
.hsk-paper-title .hsk-timer.is-low{color:var(--hsk-red)}
.hsk-paper-next{flex:0 0 auto;min-height:46px;padding:0 22px!important;border:0!important;border-radius:9px!important;background:var(--hsk-ink)!important;color:#fff!important;font-weight:800!important;font-size:15px!important;cursor:pointer!important}
.hsk-paper-next:hover{background:#000!important}.hsk-paper-next:disabled{opacity:.6;cursor:wait!important}

.hsk-paper-layout{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:20px;align-items:start}
.hsk-paper-main{min-width:0;display:flex;flex-direction:column;gap:12px}
.hsk-paper-audio{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px 14px;padding:16px 20px;border:1px solid var(--hsk-line);border-radius:12px;background:#fff}
.hsk-paper-audio[hidden]{display:none!important}
.hsk-audio-toggle{min-height:44px;padding:0 20px!important;border:0!important;border-radius:9px!important;background:var(--hsk-ink)!important;color:#fff!important;font-weight:800!important;font-size:15px!important;cursor:pointer!important}
.hsk-audio-toggle.is-playing{background:#c0392b!important}
.hsk-audio-status{color:#6d655b;font-size:14px;font-variant-numeric:tabular-nums}
.hsk-audio-bar{grid-column:1/-1;height:8px;border-radius:99px;background:#eceae6;overflow:hidden}
.hsk-audio-bar span{display:block;height:100%;width:0;background:#c0392b;border-radius:99px;transition:width .3s linear}
.hsk-exam-audio-player{display:none!important}

.hsk-paper-tools{display:flex;align-items:center;justify-content:flex-end;gap:6px;font-size:13px;color:#6d655b}
.hsk-zoom{width:30px;height:30px;border:1px solid var(--hsk-line)!important;border-radius:7px!important;background:#fff!important;color:var(--hsk-ink)!important;font-weight:800!important;cursor:pointer!important;padding:0!important}
.hsk-zoom-label{min-width:42px;text-align:center;font-variant-numeric:tabular-nums}
.hsk-paper-pages{--hsk-zoom:1;height:calc(100vh - 200px);min-height:520px;overflow:auto;border:1px solid var(--hsk-line);border-radius:12px;background:#fff;padding:18px;scrollbar-width:thin}
.hsk-page{margin:0 auto 18px!important;width:calc(100% * var(--hsk-zoom));max-width:none}
.hsk-page img{display:block;width:100%!important;max-width:none!important;height:auto;border:1px solid #f0ece6;border-radius:4px;background:#fff}
.hsk-page-text{width:100%;font-size:17px;line-height:1.8;color:#222}
.hsk-page-text h3{font-size:17px!important;font-weight:800!important;margin:18px 0 8px!important;padding-bottom:6px!important;border-bottom:1px solid var(--hsk-line)}
.hsk-page-text h3 small{font-weight:600;color:#8a8278}
.hsk-tq{display:grid;grid-template-columns:36px 1fr;gap:4px;margin:10px 0}
.hsk-tq p{margin:0 0 4px!important}.hsk-tq img{max-width:360px;margin:4px 0}
.hsk-tq-opt{padding-left:4px}.hsk-tq-opt b{display:inline-block;width:22px}

.hsk-answer-sheet{position:sticky;top:84px;display:flex;flex-direction:column;height:calc(100vh - 100px);min-height:560px;border:1px solid var(--hsk-line);border-radius:12px;background:#fff;overflow:hidden}
.hsk-sheet-head{padding:16px 20px 10px;font-size:16px;color:var(--hsk-ink)}
.hsk-sheet-head b{font-weight:800}.hsk-sheet-count{font-size:13px;color:#8a8278}
.hsk-sheet-body{flex:1 1 auto;overflow:auto;padding:0 20px 20px;scrollbar-width:thin}
.hsk-sheet-part-title{margin:14px 0 4px;font-size:14px;font-weight:800;color:#6d655b}
.hsk-sheet-row{display:flex;align-items:center;gap:12px;padding:6px 0;border-bottom:1px dashed var(--hsk-line)}
.hsk-sheet-no{flex:0 0 32px;text-align:right;font-weight:800;font-size:15px;color:var(--hsk-ink);font-variant-numeric:tabular-nums}
.hsk-sheet-row.done .hsk-sheet-no{color:var(--hsk-green-dark)}
.hsk-bubbles{display:flex;flex-wrap:wrap;gap:8px}
.hsk-bubble{width:36px;height:36px;padding:0!important;border:1.5px solid #e2ddd5!important;border-radius:50%!important;background:#fff!important;color:#4a443d!important;font-weight:700!important;font-size:15px!important;line-height:1!important;cursor:pointer!important;transition:background .12s,border-color .12s,color .12s}
.hsk-bubble:hover{border-color:var(--hsk-ink)!important}
.hsk-bubble.on{background:var(--hsk-ink)!important;border-color:var(--hsk-ink)!important;color:#fff!important}
.hsk-sheet-text{flex:1 1 auto;min-width:0;padding:8px 10px!important;border:1.5px solid #e2ddd5!important;border-radius:8px!important;background:#fff!important;font-size:15px!important;outline:0}
.hsk-sheet-text:focus{border-color:var(--hsk-ink)!important}
textarea.hsk-sheet-text{min-height:160px;resize:vertical;font-family:inherit;line-height:1.7!important}

@media(max-width:1100px){.hsk-paper-layout{grid-template-columns:minmax(0,1fr) 330px}.hsk-bubble{width:32px;height:32px;font-size:14px!important}}
@media(max-width:820px){
  .hsk-paper-topbar{flex-direction:column;align-items:stretch;gap:10px;padding:10px 0}
  .hsk-paper-title{font-size:14px}.hsk-paper-title .hsk-timer{font-size:22px;margin-left:auto}
  .hsk-paper-layout{grid-template-columns:minmax(0,1fr);gap:12px}
  .hsk-paper-pages{height:auto;min-height:0;max-height:62vh;padding:8px}
  .hsk-answer-sheet{position:static;height:auto;min-height:0}
  .hsk-sheet-body{max-height:none;overflow:visible}
}

/* ===== 5.1 — Phần Viết (HSK 2–6) ===== */
.hsk-paper-layout.is-writing{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.hsk-exam-app .hsk-w-hanzi{align-items:flex-end;padding:10px 0}
.hsk-hz{display:inline-flex;flex-direction:column;align-items:center;gap:2px;margin:0}
.hsk-hz-py{font-size:14px;color:#8a8278;min-height:18px;font-style:italic}
.hsk-exam-app input.hsk-hz-box{flex:0 0 auto;width:calc(var(--len,1) * 46px + 12px)!important;height:52px;text-align:center;font-size:28px!important;letter-spacing:6px!important;font-family:"KaiTi","STKaiti","Kaiti SC",serif!important;background:repeating-linear-gradient(90deg,transparent 0 45px,#f0ebe3 45px 46px)!important}
.hsk-w-ctx{flex:1 1 auto;min-width:0;font-size:14px;color:#6d655b;line-height:1.5}
.hsk-w-card{margin:12px 0;padding:14px;border:1px solid var(--hsk-line);border-radius:10px;background:#fffdfa}
.hsk-w-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.hsk-w-head .hsk-sheet-no{flex:0 0 auto;text-align:left}
.hsk-w-word{display:inline-block;padding:3px 12px;border-radius:999px;background:#f3ede4;font-size:18px;font-weight:700;color:var(--hsk-ink)}
.hsk-w-word.used{background:#e5f3d6;color:#3d7300}
.hsk-w-flag{font-size:13px;color:#8a8278}.hsk-w-flag.ok{color:var(--hsk-green-dark);font-weight:700}.hsk-w-flag.warn{color:#c0392b;font-weight:700}
.hsk-w-req{font-size:13px;font-weight:700;color:#6d655b}
.hsk-w-gridbtn,.hsk-w-clear{margin-left:auto;padding:5px 12px!important;border:1px solid var(--hsk-line)!important;border-radius:7px!important;background:#fff!important;color:var(--hsk-ink)!important;font-size:13px!important;cursor:pointer!important}
.hsk-w-prompt{margin:0 0 10px;font-size:14px;line-height:1.7;color:#4a443d}
details.hsk-w-prompt summary{cursor:pointer;font-weight:700;color:#6d655b}
.hsk-w-words{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.hsk-w-words .hsk-w-word{font-size:15px}
.hsk-exam-app textarea.hsk-w-line,.hsk-exam-app textarea.hsk-w-area{display:block;width:100%;font-size:18px!important;line-height:1.9!important;font-family:inherit}
.hsk-exam-app textarea.hsk-w-area{min-height:220px;resize:vertical}
.hsk-w-meter{display:flex;align-items:center;gap:10px;margin-top:8px}
.hsk-w-bar{flex:1;height:6px;border-radius:99px;background:#eceae6;overflow:hidden}
.hsk-w-bar span{display:block;height:100%;width:0;background:#e0a33a;border-radius:99px;transition:width .2s}
.hsk-w-essay.is-enough .hsk-w-bar span{background:var(--hsk-green)}
.hsk-w-cnt{font-size:13px;font-weight:700;color:#6d655b;font-variant-numeric:tabular-nums;white-space:nowrap}
.hsk-w-grid{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));width:100%;overflow:hidden;margin-top:12px;border-top:1px solid #d9c9b4;border-left:1px solid #d9c9b4}
.hsk-w-grid[hidden]{display:none!important}
.hsk-w-grid span{position:relative;min-width:0;overflow:visible;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-right:1px solid #d9c9b4;border-bottom:1px solid #d9c9b4;font-size:clamp(11px,1.2vw,17px);font-family:"KaiTi","STKaiti","Kaiti SC",serif}
.hsk-w-grid span[data-mark]::after{content:attr(data-mark);position:absolute;right:1px;bottom:-14px;font-size:9px;color:#a2927d;font-family:Arial,sans-serif}
.hsk-ro-line{min-height:52px;display:flex;flex-wrap:wrap;gap:6px;padding:8px;border:1.5px dashed #d9c9b4;border-radius:8px;background:#fff;margin-bottom:10px}
.hsk-ro-ph{color:#b3a999;font-size:14px;align-self:center}
.hsk-ro-bank{display:flex;flex-wrap:wrap;gap:6px}
.hsk-ro-chip{padding:6px 12px!important;border:1px solid #d9c9b4!important;border-radius:7px!important;background:#fff!important;color:var(--hsk-ink)!important;font-size:17px!important;cursor:pointer!important}
.hsk-ro-chip.in{background:var(--hsk-ink)!important;color:#fff!important;border-color:var(--hsk-ink)!important}
.hsk-tq-py{color:#8a8278;font-style:italic}
.hsk-result-section-score .pending{color:#b7791f;font-weight:700}
.hsk-review-question.is-pending{border-color:#f0d9a8!important}
.hsk-review-essay{white-space:pre-wrap;line-height:1.9;padding:10px 12px;background:#fffdfa;border:1px solid #eee3d2;border-radius:8px;margin-top:8px}
@media(max-width:1100px){.hsk-paper-layout.is-writing{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:820px){.hsk-paper-layout.is-writing{grid-template-columns:minmax(0,1fr)}}

.hsk-exam-app textarea.hsk-w-line{min-height:0!important;height:auto;resize:vertical}