:root{--brand:#7b2018;--gold:#b58a48;--paper:#fffaf0;--ink:#18352b;--line:#dfc59a}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:repeating-linear-gradient(0deg,rgba(100,62,26,.02) 0 1px,transparent 1px 5px),linear-gradient(135deg,#fbf5e9,#f4e7d2);color:var(--ink);font-family:"Times New Roman",serif}.writing-shell{width:min(1050px,calc(100% - 24px));margin:20px auto 50px}.writing-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 18px;border:1px solid var(--line);border-radius:18px;background:rgba(255,250,240,.96)}.writing-brand img{width:min(260px,55vw);display:block}.writing-header nav{display:flex;gap:10px}.writing-header a,.link-button{text-decoration:none;color:var(--brand);font-weight:700}.writing-hero{text-align:center;padding:38px 12px 22px}.writing-hero span{color:var(--brand);font-weight:800;letter-spacing:.14em}.writing-hero h1{margin:8px 0;font-size:clamp(34px,6vw,58px);color:var(--brand)}.writing-hero p{margin:0;color:#715e4a}.writing-card{padding:24px;border:1px solid var(--line);border-radius:20px;background:rgba(255,252,245,.96);box-shadow:0 16px 45px rgba(93,44,22,.09)}.usage-banner{display:flex;justify-content:space-between;gap:12px;padding:13px 15px;border-radius:13px;background:#f6e8cf;color:#6d241b}.writing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:18px 0}.writing-grid label{display:grid;gap:7px;font-weight:700}.writing-grid select{width:100%;min-height:48px;padding:0 13px;border:1px solid var(--line);border-radius:11px;background:#fffdf8;font:inherit}.primary,.secondary,.review,.remembered{min-height:48px;padding:0 18px;border-radius:11px;font:inherit;font-weight:800;cursor:pointer}.primary{border:0;background:linear-gradient(135deg,#8d291d,#64160f);color:#fff8e9}.secondary{border:1px solid #cfaa72;background:#fffaf0;color:var(--brand)}.message{min-height:22px;color:#9b271c}.practice-top{display:flex;justify-content:space-between;align-items:start;gap:15px}.practice-top h2{margin:6px 0;font-size:clamp(27px,5vw,45px)}.practice-top p{margin:0;color:#715e4a}.hanzi-board{position:relative;width:min(580px,100%);aspect-ratio:1;margin:22px auto;border:2px solid #c99c5d;border-radius:18px;overflow:hidden;background:linear-gradient(90deg,transparent 49.8%,rgba(123,32,24,.15) 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.8%,rgba(123,32,24,.15) 50%,transparent 50.2%),#fff}#writing-canvas{width:100%;height:100%;touch-action:none;display:block}.writing-guide{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font-family:"Microsoft YaHei",sans-serif;font-size:clamp(120px,30vw,300px);color:rgba(123,32,24,.12)}.tool-row,.decision-row,.summary-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.decision-row{margin-top:17px}.review{border:1px solid #d39a5f;background:#fff0dc;color:#8b3a13}.remembered{border:0;background:#285f48;color:white}.answer-card{margin:14px auto;padding:15px;width:min(580px,100%);border-radius:13px;background:#f7ead5;text-align:center;font-size:20px}.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}.summary-grid article{padding:20px;border-radius:14px;background:#f7ead5;text-align:center}.summary-grid strong{display:block;font-size:32px;color:var(--brand)}.summary-grid span{color:#705b46}@media(max-width:650px){.writing-shell{width:min(100% - 14px,1050px);margin-top:7px}.writing-header{align-items:flex-start;flex-direction:column}.writing-header nav{width:100%}.writing-header nav a{flex:1;text-align:center;padding:9px;border:1px solid var(--line);border-radius:9px}.writing-card{padding:16px}.writing-grid{grid-template-columns:1fr}.usage-banner{flex-direction:column}.practice-top{flex-direction:column}.practice-top .secondary{width:100%}.tool-row>*{flex:1}.decision-row>*{flex:1}.summary-grid{grid-template-columns:1fr}.summary-actions>*{width:100%;display:flex;align-items:center;justify-content:center}}
/* V129: chấm bài luyện viết và phản hồi lỗi */
.writing-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hanzi-board #writing-feedback-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.submit-row{display:flex;justify-content:center;margin-top:18px}.submit-row .primary{min-width:min(320px,100%)}.writing-result{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:16px;width:min(580px,100%);margin:18px auto 0;padding:16px;border:1px solid #dfc59a;border-radius:15px;background:#fff7e8}.writing-result h3{margin:0 0 5px;color:var(--brand)}.writing-result p{margin:0 0 5px;line-height:1.5}.writing-result small{color:#715e4a}.score-badge{display:grid;place-items:center;width:86px;height:86px;border-radius:50%;background:#f1dfbd;color:var(--brand)}.score-badge strong{font-size:32px;line-height:1}.score-badge span{font-size:12px}.decision-row{margin-top:14px}.decision-row>*{min-width:170px}.writing-guide{z-index:1}#writing-canvas{position:relative;z-index:2}#writing-feedback-canvas{z-index:3}@media(max-width:650px){.writing-grid{grid-template-columns:1fr}.writing-result{grid-template-columns:1fr;text-align:center}.score-badge{margin:auto}.decision-row>*{min-width:0}}
/* V130: chỉ luyện nhìn mẫu, font Khải thư và giới hạn viết lại */
.writing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.sample-word{margin-top:8px}
.sample-word h2,#writing-prompt{font-family:"KaiTi","STKaiti","Kaiti SC","DFKai-SB","Microsoft YaHei",serif;font-weight:500;line-height:1;margin:6px 0 8px;font-size:clamp(46px,7vw,76px)}
#writing-pinyin{margin:0 0 4px;color:#7b2018;font-size:18px;font-weight:700}
#writing-support{margin:0;color:#715e4a;font-size:17px}
.writing-guide{font-family:"KaiTi","STKaiti","Kaiti SC","DFKai-SB","Microsoft YaHei",serif;font-weight:400;color:rgba(123,32,24,.16)}
.attempts-label{display:block;margin-top:10px;color:#7b2018;font-weight:700}
.review:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:650px){.writing-grid{grid-template-columns:1fr}.sample-word h2,#writing-prompt{font-size:58px}}

/* V131: bỏ nhãn giai đoạn và cân chỉnh bố cục trang luyện viết */
html,body{max-width:100%;overflow-x:hidden}
.writing-shell{width:min(1050px,calc(100% - 32px));margin:20px auto 50px}
.writing-hero{padding:30px 12px 22px}
.writing-hero h1{margin:0 0 10px;line-height:1.08;text-align:center}
.writing-hero p{max-width:720px;margin:0 auto;text-align:center;line-height:1.5}
.writing-card{width:100%;margin:0 auto}
#writing-summary>h2{text-align:center;margin:0 0 8px;color:var(--brand)}
.summary-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:14px;width:100%;margin:20px 0}
.summary-grid article{display:flex;min-width:0;min-height:110px;flex-direction:column;align-items:center;justify-content:center;padding:18px 12px}
.summary-grid strong{line-height:1.05}
.summary-grid span{display:block;margin-top:7px;line-height:1.3;text-align:center;overflow-wrap:anywhere}
#summary-note{margin:0 auto 18px;max-width:780px;text-align:center;line-height:1.5}
.summary-actions{display:grid;grid-template-columns:repeat(2,minmax(0,220px));justify-content:center;align-items:stretch;gap:12px}
.summary-actions>*{width:100%;min-height:48px;display:flex;align-items:center;justify-content:center;margin:0;text-align:center}
.practice-top>div{width:100%}
.sample-word{text-align:left}
.tool-row{display:grid;grid-template-columns:repeat(2,minmax(0,220px));justify-content:center;align-items:stretch;gap:12px}
.tool-row>*{width:100%;margin:0}
.submit-row .primary{width:min(320px,100%)}
.decision-row{display:grid;grid-template-columns:repeat(2,minmax(0,220px));justify-content:center;align-items:stretch;gap:12px}
.decision-row>*{width:100%;min-width:0;margin:0}
@media(max-width:650px){
 .writing-shell{width:calc(100% - 14px);margin:7px auto 32px}
 .writing-hero{padding:24px 8px 18px}
 .writing-hero h1{font-size:clamp(34px,11vw,48px)}
 .writing-card{padding:15px;border-radius:16px}
 .summary-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
 .summary-grid article{min-height:96px;padding:12px 6px;border-radius:12px}
 .summary-grid strong{font-size:28px}
 .summary-grid span{font-size:13px}
 .summary-actions,.tool-row,.decision-row{grid-template-columns:1fr}
 .summary-actions>*,.tool-row>*,.decision-row>*{width:100%}
}
@media(max-width:380px){
 .summary-grid{grid-template-columns:1fr}
 .summary-grid article{min-height:82px}
}

/* V134: nhập số chữ tùy chọn và hiển thị từ vựng nhiều chữ */
.writing-grid input[type="number"]{
  width:100%;min-height:48px;padding:0 13px;border:1px solid var(--line);border-radius:11px;background:#fffdf8;font:inherit
}
.count-help{display:block;min-height:18px;color:#765e47;font-weight:400;line-height:1.35}
.writing-source{margin-top:8px!important;padding:8px 10px;border-radius:9px;background:#f7ead5;color:#6b4b36!important;font-size:14px!important}

/* V135: một từ vựng nhiều chữ hiển thị nhiều ô viết cùng lúc */
.writing-boards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;
  width:100%;
  margin:22px auto;
}
.character-practice{min-width:0}
.character-label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px;color:var(--brand)}
.character-label strong{font-family:"KaiTi","STKaiti","Kaiti SC","DFKai-SB","Microsoft YaHei",serif;font-size:30px;font-weight:500}
.character-label span{font-size:13px;font-weight:700;color:#725943}
.character-practice .hanzi-board{width:100%;margin:0;aspect-ratio:1}
.character-practice .writing-canvas{position:relative;z-index:2;width:100%;height:100%;touch-action:none;display:block}
.character-practice .writing-feedback-canvas{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none}
.character-practice .writing-guide{z-index:1}
.character-feedback{margin:8px 2px 0;padding:9px 10px;border-radius:9px;background:#fff1dc;color:#7b2018;font-size:14px;line-height:1.45}
@media(max-width:650px){.writing-boards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.character-label strong{font-size:25px}.character-label span{font-size:11px}}
@media(max-width:390px){.writing-boards{grid-template-columns:1fr}}

/* V136: phản hồi tức thì khi mở trang */
#writing-level,#writing-count{transition:border-color .15s ease,box-shadow .15s ease}
#writing-start:disabled{opacity:.65;cursor:wait}
.writing-card[aria-busy="true"]{cursor:progress}

/* V137: ô viết tự cân bằng theo 1-6 chữ */
.writing-boards{grid-template-columns:repeat(3,minmax(0,1fr));max-width:900px;gap:14px}
.writing-boards[data-count="1"]{grid-template-columns:minmax(0,320px);justify-content:center}
.writing-boards[data-count="2"]{grid-template-columns:repeat(2,minmax(0,300px));justify-content:center}
.writing-boards[data-count="3"]{grid-template-columns:repeat(3,minmax(0,260px));justify-content:center}
.writing-boards[data-count="4"]{grid-template-columns:repeat(2,minmax(0,280px));justify-content:center;max-width:620px}
.writing-boards[data-count="5"],.writing-boards[data-count="6"]{grid-template-columns:repeat(3,minmax(0,240px));justify-content:center}
.character-practice .hanzi-board{max-width:300px;margin:0 auto;border-radius:14px}
.character-label{max-width:300px;margin:0 auto 7px}
@media(max-width:650px){
 .writing-boards,.writing-boards[data-count]{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;max-width:100%}
 .writing-boards[data-count="1"]{grid-template-columns:minmax(0,260px)}
 .character-practice .hanzi-board{max-width:260px}
 .character-label{max-width:260px}
}

/* V142: cân bằng ô viết, chữ mẫu và nút */
.primary,.secondary,.review,.remembered,.link-button{display:inline-flex;align-items:center;justify-content:center;line-height:1.2;white-space:normal;text-align:center;min-height:46px;padding:10px 16px;overflow:visible}
.writing-guide{font-size:clamp(72px,18vw,190px)!important;line-height:1!important;inset:6%!important;overflow:hidden}
.character-practice .hanzi-board{width:100%;max-width:250px}
.character-label{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;min-height:38px}
.character-label strong{font-size:30px;line-height:1}
@media(max-width:650px){.writing-hero h1{font-size:clamp(42px,14vw,64px);line-height:1.05}.writing-guide{font-size:clamp(70px,31vw,145px)!important}.character-practice .hanzi-board{max-width:210px}.tool-row,.decision-row,.summary-actions{gap:10px}.tool-row>*,.decision-row>*,.summary-actions>*{min-height:52px;padding:10px 12px}}

.report-question,.mock-report-question{min-height:38px;padding:7px 12px;border:1px solid #d8bc8a;border-radius:10px;background:#fffaf0;color:#7b2018;font-weight:700;cursor:pointer}.mock-answer-row{position:relative}.mock-report-question{margin-top:8px}


/* V148: đồng bộ giao diện luyện viết trên điện thoại và máy tính */
#writing-guest-name{width:100%;min-height:48px;padding:0 13px;border:1px solid var(--line);border-radius:11px;background:#fffdf8;font:inherit}
.writing-boards{align-items:start}
.character-practice{display:grid;gap:8px}
.character-practice .hanzi-board{width:100%;max-width:250px;margin:0 auto;aspect-ratio:1/1}
.character-practice .writing-guide{inset:8%!important;display:flex;align-items:center;justify-content:center;text-align:center}
.character-practice .writing-guide span{display:block;max-width:100%;max-height:100%;font-family:"KaiTi","STKaiti","Kaiti SC","DFKai-SB","Microsoft YaHei",serif;font-size:clamp(76px,16vw,170px);line-height:1;color:rgba(123,32,24,.14)}
.character-practice .writing-canvas,.character-practice .writing-feedback-canvas{position:absolute;inset:0;width:100%;height:100%}
@media(max-width:650px){.character-practice .hanzi-board{max-width:220px}.character-practice .writing-guide span{font-size:clamp(72px,24vw,132px)}}


/* V149: làm đẹp ô nhập tên khách */
#writing-guest-name-wrap{display:grid;gap:8px;align-content:start}
#writing-guest-name{width:100%;min-height:50px;padding:0 16px;border:1.5px solid #d7b57b;border-radius:12px;background:linear-gradient(180deg,#fffdf8,#fff8ee);color:#18352b;font:inherit;font-size:16px;box-shadow:0 2px 8px rgba(90,43,19,.05)}
#writing-guest-name::placeholder{color:#9a856f}
#writing-guest-name:focus{outline:none;border-color:#b7833d;box-shadow:0 0 0 4px rgba(181,138,72,.14)}
#writing-guest-name-wrap small{color:#7c6855;font-weight:400;line-height:1.4}
@media(max-width:650px){#writing-guest-name{min-height:48px;font-size:15px;padding:0 14px}}

/* V156: đồng bộ hiệu suất máy tính và điện thoại */
@media (max-width:760px){
  html{scroll-behavior:auto}
  body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  button,a,input,select,textarea{touch-action:manipulation}
  .guest-limit-overlay,.guest-gate-backdrop,.recruitment-topbar{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .guest-limit-card,.writing-card,.mock-exam-card,.student-login-card,.student-dashboard-header{box-shadow:0 8px 24px rgba(60,28,13,.12)!important}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}


/* V157: cân bằng các khối trạng thái và ô thiết lập luyện viết */
.usage-banner{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  column-gap:18px;
  row-gap:8px;
  min-height:64px;
}
.usage-banner strong,
.usage-banner span{
  display:block;
  line-height:1.45;
}
.usage-banner strong{
  font-size:clamp(18px,2vw,20px);
}
.usage-banner span{
  justify-self:end;
  text-align:right;
  max-width:min(100%,520px);
  font-size:clamp(14px,1.45vw,16px);
}
.writing-grid{
  align-items:start;
  column-gap:18px;
  row-gap:18px;
}
.writing-grid label{
  align-content:start;
  min-width:0;
}
.writing-grid label > select,
.writing-grid label > input{
  width:100%;
}
.count-help{
  margin-top:2px;
}
#writing-start{
  min-width:180px;
}
@media(max-width:760px){
  .usage-banner{
    grid-template-columns:1fr;
    align-items:start;
  }
  .usage-banner span{
    justify-self:start;
    text-align:left;
    max-width:100%;
  }
}


/* V158: hoàn thiện cân bằng khối luyện viết */
.writing-card{overflow:hidden}
.usage-banner{width:100%}
.writing-grid > label{width:100%}
.writing-grid select,.writing-grid input[type="number"]{height:54px;min-height:54px}
#writing-message{margin:14px 0 0;line-height:1.45}
@media(max-width:760px){
  .writing-grid{grid-template-columns:1fr;gap:14px}
  #writing-start{width:100%}
  .usage-banner{padding:12px 13px}
}

/* V223: thống nhất font tiếng Việt và làm mềm font chữ mẫu Luyện viết */
body,button,input,select,textarea,.writing-header,.writing-hero,.writing-card,.usage-banner,.writing-grid,
.practice-top,.answer-card,.summary-grid,.stroke-order-note,.stroke-order-controls,.tool-row,.decision-row,.summary-actions{
  font-family:"Times New Roman",Times,serif!important
}
.sample-word h2,#writing-prompt,.character-label strong,.writing-guide,.character-practice .writing-guide span{
  font-family:"STKaiti","Kaiti SC","KaiTi","DFKai-SB","Songti SC","Microsoft YaHei","Noto Sans SC","PingFang SC",serif!important;
  font-weight:400!important;
}
.writing-guide,.character-practice .writing-guide span{
  color:rgba(123,32,24,.10)!important;
}

/* V251: logo ngang chính thức */
.logo-image-link img,.writing-brand img{object-fit:contain;object-position:left center}
@media(max-width:760px){.logo-image-link img,.writing-brand img{max-width:100%;height:auto}}


/* V303 — chữ mẫu trong ô viết dùng đúng dữ liệu nét của Hanzi Writer */
.character-practice .writing-guide{
  position:absolute!important;
  inset:7%!important;
  z-index:1!important;
  display:grid!important;
  place-items:center!important;
  pointer-events:none!important;
  overflow:hidden!important;
}
.character-practice .writing-guide-player{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.115;
  pointer-events:none;
}
.character-practice .writing-guide-player svg{
  display:block;
  width:100%!important;
  height:100%!important;
  overflow:visible;
}
.character-practice .writing-guide-fallback{
  opacity:.10;
}
.character-practice .writing-guide-player[data-ready="1"] + .writing-guide-fallback{
  display:none!important;
}
@media(max-width:650px){
  .character-practice .writing-guide{inset:6%!important}
}


/* V304 — sửa Hanzi Writer bị lệch/cắt và mất chữ mẫu */
.character-practice .writing-guide{
  inset:8%!important;
  overflow:visible!important;
}
.character-practice .writing-guide-player{
  position:absolute!important;
  inset:0!important;
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  height:100%!important;
  opacity:0;
  pointer-events:none!important;
  overflow:visible!important;
}
.character-practice .writing-guide-player svg{
  display:block!important;
  max-width:100%!important;
  max-height:100%!important;
  overflow:visible!important;
}
.character-practice .writing-guide-fallback{
  position:relative!important;
  z-index:0!important;
  display:block;
  opacity:.12!important;
  color:#7b2018!important;
}
.character-practice .writing-guide-player[data-ready="1"] + .writing-guide-fallback{display:none!important}


/* V305 — chữ mẫu dùng SVG path thật của hanzi-writer-data, không phụ thuộc kích thước HanziWriter */
.character-practice .writing-guide{position:absolute!important;inset:5%!important;display:grid!important;place-items:center!important;overflow:visible!important;z-index:1!important;pointer-events:none!important}
.character-practice .writing-guide-player{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:grid!important;place-items:center!important;opacity:1!important;overflow:visible!important;pointer-events:none!important}
.character-practice .writing-guide-svg{display:block!important;width:100%!important;height:100%!important;overflow:visible!important}
.character-practice .writing-guide-svg path{fill:rgba(123,32,24,.13)!important;stroke:none!important}
.character-practice .writing-guide-fallback{position:absolute!important;inset:0!important;z-index:0!important;place-items:center!important;text-align:center!important;font-family:"STKaiti","Kaiti SC","KaiTi","DFKai-SB","Microsoft YaHei",serif!important;font-size:clamp(92px,18vw,190px)!important;line-height:1!important;color:rgba(123,32,24,.12)!important}
.character-practice .writing-guide-player[data-ready="1"] + .writing-guide-fallback{display:none!important}
@media(max-width:650px){.character-practice .writing-guide{inset:4%!important}.character-practice .writing-guide-fallback{font-size:clamp(86px,30vw,145px)!important}}