body.dt-page{background:#e5f4ef;color:#123d30}.dt-wrap{max-width:1180px;margin:auto;padding:24px 22px 60px;background:linear-gradient(#e6f7f3aa,#e6f7f3e8),url('/assets/brand/v90/lich-viet-landscape.webp') top center/100% auto no-repeat;min-height:80vh}.dt-title{text-align:center;margin:12px auto 26px}.dt-title h1{font-size:clamp(32px,5vw,62px);color:#086947;line-height:1.1;margin:8px}.dt-title p{font-size:clamp(16px,2vw,21px);font-weight:650}.dt-panel{background:#fffdf5f2;border:1px solid #d4e8de;border-radius:26px;padding:24px;box-shadow:0 8px 22px #164b3520}.dt-panel h2{font-size:clamp(22px,3vw,32px);line-height:1.35}.dt-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:22px;align-items:center}.dt-mascot{width:100%;max-height:440px;object-fit:contain;filter:drop-shadow(0 6px 5px #084b2428)}.dt-speech{background:#fff;border-radius:20px;padding:14px;text-align:center;font-weight:700}.dt-progress{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}.dt-steps{display:flex;gap:7px;flex-wrap:wrap}.dt-step{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e6e7df;color:#53675b;font-weight:800}.dt-step.done{background:#08936a;color:white}.dt-step.active{background:#ffe36d;color:#123d30;outline:2px solid #d6a524}.dt-topic{display:inline-block;background:#dcf3e5;padding:7px 12px;border-radius:14px;font-weight:700}.dt-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.dt-page button,.dt-page .dt-link{font:inherit}.dt-option{min-height:72px;background:linear-gradient(#f6fff7,#e6f4e7);border:2px solid #cbe4d3;color:#153e30;border-radius:17px;text-align:left;padding:14px;font-size:18px;font-weight:650;cursor:pointer}.dt-option[aria-pressed=true]{border-color:#12865c;background:#dbf0dd;box-shadow:0 0 0 2px #12865c40}.dt-option.correct{border-color:#13854c;background:#d7f5df}.dt-option.wrong{border-color:#b74b37;background:#ffe6df}.dt-option:disabled{cursor:default}.dt-primary{background:linear-gradient(#0ca276,#07704d);border:1px solid #08764d;color:white;font-weight:800;padding:13px 25px;border-radius:22px;min-height:48px;cursor:pointer}.dt-primary:disabled{opacity:.55;cursor:default}.dt-yellow{background:linear-gradient(#fff07d,#ffd449);color:#2e432c;border-color:#d8ad26}.dt-buttons{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:14px}.dt-link{color:#075c40;display:inline-block;text-decoration:underline;cursor:pointer;background:none;border:0;padding:10px}.dt-helps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}.dt-help{background:#fff9e8;border:1px solid #e7ddbd;border-radius:18px;padding:13px 10px;text-align:center;cursor:pointer;color:#164531;min-height:108px}.dt-help b{display:block}.dt-help span{font-size:26px}.dt-help small{display:block;line-height:1.5;margin-top:4px}.dt-help:disabled{opacity:.45;cursor:default}.dt-note{font-size:14px;color:#53695f;line-height:1.65}.dt-feedback{background:#e8f4eb;padding:17px;border-radius:16px;line-height:1.7}.dt-feedback.bad{background:#fff0e8}.dt-status{min-height:24px;text-align:center;color:#933717;font-weight:650}.dt-summary{display:flex;gap:12px;flex-wrap:wrap}.dt-summary>div{flex:1;background:#edf5e8;padding:16px;border-radius:16px;min-width:130px}.dt-level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:20px 0}.dt-level-grid div{background:#e9f5e7;padding:15px;border-radius:16px;text-align:center}.dt-review{display:grid;gap:14px}.dt-review article{border-bottom:1px solid #dbe7da;padding-bottom:14px}.dt-page :focus-visible{outline:3px solid #145bbe;outline-offset:4px}.dt-dialog{max-width:min(500px,90vw);border:0;border-radius:24px;padding:26px;color:#123d30}.dt-dialog::backdrop{background:#153c2ca8}.dt-page [hidden]{display:none!important}.dt-back{display:flex;justify-content:space-between;margin-bottom:12px}.dt-error{border:1px solid #eedda0;background:#fff8da;padding:18px;border-radius:18px}.dt-practice-select{font:inherit;padding:10px;border-radius:14px;margin:8px;border:1px solid #aec9b6}
@media(max-width:700px){.dt-wrap{padding:14px 12px 35px}.dt-layout{display:flex;flex-direction:column}.dt-character{display:flex;align-items:center;justify-content:center;gap:12px;width:100%}.dt-mascot{width:90px;height:125px}.dt-speech{max-width:190px;font-size:14px}.dt-panel{padding:16px;border-radius:21px;width:100%;box-sizing:border-box}.dt-title{margin-bottom:14px}.dt-title p{font-size:16px}.dt-option{font-size:16px;padding:10px;min-height:76px;overflow-wrap:anywhere}.dt-options{gap:8px}.dt-helps{gap:6px}.dt-help{padding:10px 5px;font-size:14px}.dt-help small{font-size:12px}.dt-level-grid{grid-template-columns:repeat(2,1fr)}.dt-progress{font-size:14px}.dt-step{width:24px;height:24px;font-size:13px}.dt-steps{gap:4px}.dt-back{font-size:14px}.dt-dialog{padding:20px}.dt-summary>div{min-width:100px}}
@media(prefers-reduced-motion:reduce){.dt-page *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
/* V93 clarity update: question first, quieter scene, distinct answer labels. */
.dt-wrap{max-width:1120px;background:linear-gradient(#edf9f2e8,#f5faf6f5),url('/assets/brand/v90/lich-viet-landscape.webp') top center/cover no-repeat}.dt-title h1{font-size:clamp(34px,4.5vw,54px);letter-spacing:-.025em}.dt-title p{color:#38574a;font-weight:550}.dt-layout{grid-template-columns:170px minmax(0,1fr);gap:24px;align-items:start}.dt-character{position:sticky;top:22px;padding-top:70px}.dt-mascot{max-height:330px}.dt-speech{font-size:17px;line-height:1.5;border:1px solid #d5e8db}.dt-panel{background:#fff;border-radius:24px;padding:28px;box-shadow:0 12px 32px #164b3512;border-color:#d9e8dd}.dt-panel h2{font-size:clamp(23px,2.7vw,31px);color:#123e2e;line-height:1.5;margin:18px 0}.dt-progress{padding-bottom:14px;border-bottom:1px solid #e5eee7}.dt-progress>b:last-child{color:#096445;background:#eaf8eb;border-radius:12px;padding:9px 12px}.dt-question-meter{display:flex;gap:12px;align-items:center;font-size:14px;color:#52655c;margin:12px 0 18px}.dt-question-meter progress{flex:1;height:8px;accent-color:#119064}.dt-timer{display:flex;align-items:center;gap:14px;padding:13px 17px;margin:14px 0;background:#eef8f2;border:1px solid #cfe4d6;border-radius:16px;color:#155339;flex-wrap:wrap;font-size:15px}.dt-time-value{font-size:24px;font-variant-numeric:tabular-nums;margin-left:auto}.dt-time-bar{width:100%;height:7px;accent-color:#11865c}.dt-timer.urgent{background:#fff4e8;border-color:#e7bd85;color:#934213}.dt-timer.urgent progress{accent-color:#b35917}.dt-option{background:#f7fbf7;border:2px solid #d4e5d9;min-height:78px;font-size:18px;line-height:1.5;padding:16px 18px}.dt-option:hover:not(:disabled){border-color:#0b8056;background:#eff9f1}.dt-help{min-height:118px;padding:15px 10px;background:#fffdf6;border-color:#e3dfca}.dt-help small{font-size:13px;color:#55645a}.dt-buttons{margin-top:20px}.dt-buttons .dt-primary{min-width:180px}.dt-feedback{border:1px solid #cbe5d1;background:#eef9f0}.dt-note{font-size:14px;color:#536759}.dt-status{font-size:14px;margin-bottom:14px}.dt-level-grid div{white-space:pre-line;line-height:1.8;border:1px solid #d9e8dd}.dt-summary>div{font-weight:700;line-height:1.6}.dt-dialog textarea{box-sizing:border-box;width:100%;font:inherit;border:1px solid #b7ccbf;border-radius:12px;padding:12px}
@media(max-width:700px){.dt-wrap{padding:12px 12px 28px}.dt-layout{gap:16px}.dt-character{position:static;order:2;display:flex;padding:0;max-height:120px}.dt-mascot{width:75px;height:110px}.dt-speech{font-size:14px;padding:12px}.dt-panel{padding:18px 14px}.dt-panel h2{font-size:23px;line-height:1.45}.dt-options{grid-template-columns:1fr;gap:9px;margin:16px 0}.dt-option{min-height:60px;font-size:17px;padding:12px 14px}.dt-timer{font-size:14px;padding:10px 12px;gap:7px}.dt-time-value{font-size:24px}.dt-progress{gap:10px}.dt-steps{width:100%;justify-content:space-between;order:3}.dt-helps{grid-template-columns:1fr;gap:8px}.dt-help{min-height:72px;text-align:left;display:grid;grid-template-columns:35px 1fr;column-gap:8px;padding:10px 13px}.dt-help>span{grid-row:1/3;align-self:center}.dt-help small{font-size:14px;margin-top:2px}.dt-buttons .dt-primary{min-width:160px}.dt-title{margin-bottom:16px}.dt-title p{font-size:16px;line-height:1.5}}
