@charset "UTF-8";
:root{--ink:#14362d;--forest:#12372a;--leaf:#68a678;--mint:#dcecdf;--cream:#f6f1e7;--paper:#fffdf8;--coral:#ef775f;--line:#d8ded6;--shadow:0 20px 60px rgba(18,55,42,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:Inter,"Segoe UI",sans-serif}.topbar{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 max(5vw,24px);border-bottom:1px solid rgba(20,54,45,.12);position:sticky;top:0;background:rgba(246,241,231,.93);backdrop-filter:blur(10px);z-index:10}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--forest);color:white;font-family:Georgia,serif;font-weight:bold}.brand strong,.brand small{display:block}.brand small{font-size:11px;letter-spacing:.12em;margin-top:3px;color:#63746c}.ghost,.secondary,.primary,.tab,.icon-btn,footer button{font:inherit;cursor:pointer;border:0}.ghost,.secondary{border:1px solid var(--ink);color:var(--ink);background:transparent;border-radius:999px;padding:10px 18px}.hidden{display:none!important}main{width:min(1180px,90vw);margin:auto}.hero{min-height:550px;display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:80px;padding:80px 0}.eyebrow,.label{font-size:12px;letter-spacing:.18em;font-weight:800;color:var(--leaf)}h1{font-family:Georgia,serif;font-weight:500;font-size:clamp(54px,7vw,92px);line-height:.92;margin:18px 0 28px}h1 em{color:var(--coral);font-weight:400}.lead{font-family:Georgia,serif;font-size:20px;line-height:1.6;max-width:600px;color:#4f645b}.primary{background:var(--forest);color:white;padding:15px 22px;border-radius:6px;font-weight:700;box-shadow:0 8px 24px rgba(18,55,42,.18)}.primary:hover{transform:translateY(-1px)}.primary span{margin-left:18px}.daily-card{background:var(--paper);box-shadow:var(--shadow);padding:34px;display:flex;align-items:center;gap:25px;border-radius:4px;transform:rotate(1deg)}.daily-card strong{font-family:Georgia,serif;font-size:28px;display:block;margin:8px 0}.daily-card p{margin:0;color:#697970}.ring{--pct:0deg;width:108px;height:108px;flex:0 0 108px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--coral) var(--pct),#e4e7e1 0);position:relative}.ring:before{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--paper)}.ring span{position:relative;font-weight:800;font-size:20px}.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:100px}.stats article{padding:30px;text-align:center;border-right:1px solid var(--line)}.stats article:last-child{border:0}.stats span,.stats small{display:block;color:#6c7a74}.stats strong{font-family:Georgia,serif;font-size:42px;margin:6px}.section{padding:20px 0 110px}.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:36px}.section-head h2{font:500 45px Georgia,serif;margin:8px 0}.tabs{display:flex;background:#e5e8df;padding:5px;border-radius:999px}.tab{background:transparent;padding:10px 18px;border-radius:999px;color:#65746d}.tab.active{background:var(--paper);color:var(--ink);box-shadow:0 3px 12px #0001}.lesson-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:35px}.flashcard{background:var(--forest);color:white;min-height:520px;padding:30px 38px;box-shadow:var(--shadow);position:relative;cursor:pointer}.card-top{display:flex;justify-content:space-between;color:#a8c6b5;font-size:12px;letter-spacing:.12em}.icon-btn{width:42px;height:42px;border-radius:50%;background:#ffffff19;color:white}.card-main{text-align:center;padding:42px 15px 10px}.card-main>p:first-child{color:#91b7a3;font-size:11px;letter-spacing:.2em}.card-main h3{font:500 clamp(50px,7vw,76px) Georgia,serif;margin:12px}.card-main #phonetic{color:#a8c6b5}.meaning{font:italic 30px Georgia,serif;color:#ffd9ce;margin:32px 0}.example{border-top:1px solid #ffffff2a;padding-top:25px}.example span{font-size:10px;letter-spacing:.2em;color:#91b7a3}.example p{font:21px Georgia,serif;margin:10px}.example small{color:#b8cbc0}.flip-hint{text-align:center;color:#91b7a3;font-size:12px}.flashcard.concealed .meaning,.flashcard.concealed .example small{filter:blur(9px);user-select:none}.lesson-panel{background:var(--paper);padding:38px;box-shadow:var(--shadow)}.bar{height:8px;background:#e5e9e3;margin:14px 0;border-radius:10px;overflow:hidden}.bar i{display:block;height:100%;width:0;background:var(--coral);transition:.3s}.actions{display:grid;gap:12px;margin:35px 0}.actions button{width:100%}.tip{margin-top:35px;background:var(--mint);padding:22px}.tip p{line-height:1.55;margin-bottom:0}.quiz-section{border-top:1px solid var(--line);padding-top:90px}.score{background:var(--coral);color:white;padding:10px 18px;border-radius:999px}.quiz-card{background:var(--paper);box-shadow:var(--shadow);padding:44px;max-width:850px;margin:auto}.quiz-card h3{font:500 32px Georgia,serif;margin:18px 0 28px}.answers{display:grid;grid-template-columns:1fr 1fr;gap:12px}.answer{padding:16px;text-align:left;border:1px solid var(--line);background:white;cursor:pointer;font:inherit}.answer:hover{border-color:var(--leaf)}.answer.correct{background:#dcefdc;border-color:#559665}.answer.wrong{background:#fbe0da;border-color:var(--coral)}.feedback{min-height:42px;padding:14px 0;font-weight:700}footer{background:var(--forest);color:white;display:flex;align-items:center;justify-content:center;gap:25px;padding:30px}footer p{color:#a9beb4}footer button{color:#ffd9ce;background:transparent;text-decoration:underline}@media(max-width:800px){.hero,.lesson-grid{grid-template-columns:1fr}.hero{gap:35px;padding:55px 0}.daily-card{transform:none}.stats article{padding:20px 8px}.stats strong{font-size:30px}.section-head{align-items:start;gap:20px;flex-direction:column}.lesson-grid{gap:18px}.flashcard{min-height:480px;padding:25px 20px}.lesson-panel,.quiz-card{padding:25px}.answers{grid-template-columns:1fr}footer{flex-direction:column;text-align:center}.topbar{height:70px}.brand small{display:none}}

.path-section{padding-top:25px}.path-note{max-width:330px;color:#65746d;line-height:1.55}.skill-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.skill-card{min-height:170px;padding:22px;text-align:left;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;display:flex;flex-direction:column;gap:10px;transition:.2s}.skill-card:hover,.skill-card.complete{border-color:var(--leaf);box-shadow:var(--shadow)}.skill-card>span{font-size:11px;color:var(--leaf);letter-spacing:.12em}.skill-card strong{font:500 25px Georgia,serif}.skill-card small{line-height:1.45;color:#65746d;min-height:34px}.skill-card i{font-style:normal;color:#748078;font-size:12px}.skill-card.complete i{color:#33804c}.conversation-section{border-top:1px solid var(--line);padding-top:85px}.dialogue-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:22px}.scenario-list{display:grid;align-content:start;gap:10px}.scenario-btn{border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:17px;text-align:left;font:inherit;cursor:pointer}.scenario-btn.active{background:var(--forest);color:white;border-color:var(--forest)}.dialogue-card{background:var(--paper);padding:32px;box-shadow:var(--shadow)}.dialogue-card h3{font:500 32px Georgia,serif;margin:10px 0 22px}.dialogue-line{line-height:1.55;border-bottom:1px solid #e9ebe5;padding:9px 0;margin:0}.dialogue-line strong{color:#467557}.dialogue-card .secondary{margin-top:20px}.notebook-card{display:grid;grid-template-columns:1fr auto;align-items:center;gap:35px;margin:0 0 90px;padding:34px;background:var(--mint)}.notebook-card h2{font:500 32px Georgia,serif;margin:8px 0}.notebook-card p:not(.eyebrow){max-width:680px;line-height:1.55;color:#52655c}.notebook-actions{display:grid;justify-items:start;gap:12px;min-width:220px}.import-label{display:inline-block;cursor:pointer}.template-link{color:var(--forest);font-weight:700}.notebook-actions small{max-width:260px;line-height:1.45;color:#52655c}.template-link:hover{text-decoration-thickness:2px}#sourceCitation{font-size:12px;min-height:16px}#sourceCitation a{color:#d9e8dd}
+@media(max-width:800px){.skill-grid{grid-template-columns:1fr 1fr}.dialogue-layout,.notebook-card{grid-template-columns:1fr}.scenario-list{grid-template-columns:1fr 1fr}.notebook-card{gap:15px;padding:24px}.path-note{margin:0}.dialogue-card{padding:24px}}
+@media(max-width:480px){.skill-grid,.scenario-list{grid-template-columns:1fr}.skill-card{min-height:145px}.notebook-actions{min-width:0}}
+'@ | Add-Content -Encoding UTF8 '10-projects/26-10-05-app-hoc-tieng-anh/styles.css';
(Get-Content -Raw -Encoding UTF8 '10-projects/26-10-05-app-hoc-tieng-anh/index.html').Replace('<div class="example"><span>Ví dụ</span>', '<div class="example"><span>Ví dụ</span>').Replace('<small id="translation">Vui lòng kiểm tra hóa đơn.</small></div>', '<small id="translation">Vui lòng kiểm tra hóa đơn.</small><div id="sourceCitation"></div></div>') | Set-Content -Encoding UTF8 '10-projects/26-10-05-app-hoc-tieng-anh/index.html';
@'
{
  "topic": "ielts",
  "lessons": [
    {
      "word": "To begin with",
      "type": "Speaking phrase",
      "phonetic": "/tə bɪˈɡɪn wɪð/",
      "meaning": "Trước hết",
      "example": "To begin with, cities should provide more parks.",
      "translation": "Trước hết, các thành phố nên có thêm công viên.",
      "source_title": "IELTS Sample Test Questions",
      "source_url": "https://ielts.org/take-a-test/preparation-resources/sample-test-questions"
    }
  ]
}


:root{--ink:#14362d;--forest:#12372a;--leaf:#68a678;--mint:#dcecdf;--cream:#f6f1e7;--paper:#fffdf8;--coral:#ef775f;--line:#d8ded6;--shadow:0 20px 60px rgba(18,55,42,.12)}
body{font-family:Arial,"Segoe UI",Tahoma,sans-serif}.brand strong,.brand small,.eyebrow,.label,.skill-card,.scenario-btn,.notebook-actions,.plan-day{font-family:Arial,"Segoe UI",Tahoma,sans-serif}
.month-plan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}.plan-day{background:var(--paper);border:1px solid var(--line);padding:16px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}.plan-day.complete{border-color:var(--leaf);background:#f2f8f0}.plan-day-number{font-size:11px;color:#54805e;font-weight:700;letter-spacing:.08em}.plan-day strong{font-size:15px}.plan-day p{font-size:13px;color:#65746d;line-height:1.45;margin:0 0 4px}.plan-day-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto}.plan-day-actions button{font:inherit;font-size:12px;padding:7px 9px;border:1px solid #b9c9bc;border-radius:4px;background:transparent;color:var(--ink);cursor:pointer}.plan-day-actions button:hover{background:var(--mint)}.ielts-tools{margin:0 0 24px;padding:22px;background:#eef4eb;border:1px solid #d3e1d1}.ielts-tools>label{display:block;margin-bottom:8px}.theme-select{font:inherit;padding:11px 14px;min-width:min(100%,330px);border:1px solid #9db19f;border-radius:4px;background:white;color:var(--ink)}.grammar-card{margin-top:20px;background:var(--paper);padding:24px}.grammar-card h3{font:500 25px Georgia,serif;margin:6px 0}.grammar-card>p:not(.eyebrow){color:#52655c;line-height:1.55}.grammar-task{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}.grammar-answer-row{display:flex;gap:10px;margin-top:12px}.grammar-answer-row input{flex:1;min-width:0;padding:12px;border:1px solid #b9c9bc;font:inherit}.grammar-answer-row .primary{padding:10px 16px}.grammar-task #grammarFeedback{min-height:20px;font-weight:700;color:#397446}.grammar-task #grammarModel{color:#52655c;font-size:14px}
@media(max-width:850px){.month-plan{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.month-plan{grid-template-columns:1fr}.grammar-answer-row{flex-direction:column}.theme-select{width:100%}.grammar-card{padding:18px}}
h1,h2,h3,.daily-card strong,.card-main h3,.meaning,.quiz-card h3,.dialogue-card h3,.grammar-card h3{font-family:Arial,"Segoe UI",Tahoma,sans-serif}.curriculum-sources{font-size:12px;color:#65746d;line-height:1.5}.curriculum-sources a{color:#315d40}