/* ===== <style id="huichinese-green-fix">  (orig line 43) ===== */
h1 { color:#145A32 !important; }
button.mode-btn {
  background:#145A32 !important;
  color:#FFFFFF !important;
  border:1px solid #145A32 !important;
}
button.mode-btn:not(.active) {
  background:#FFFFFF !important;
  color:#111111 !important;
  border:1px solid #145A32 !important;
}
button.mode-btn.active {
  background:#145A32 !important;
  color:#FFFFFF !important;
  border:1px solid #145A32 !important;
}
button.active, button.primary {
  background:#145A32 !important;
  color:#FFFFFF !important;
  border-color:#145A32 !important;
}

/* ===== <style id="final-green-mode-style">  (orig line 67) ===== */
h1 { color:#145A32 !important; }
  #flashBtn, #quizBtn {
    background:#FFFFFF !important;
    color:#111111 !important;
    border:1px solid #145A32 !important;
  }
  #flashBtn.active, #quizBtn.active {
    background:#145A32 !important;
    color:#FFFFFF !important;
    border:1px solid #145A32 !important;
  }

/* ===== <style id="correct-answer-style">  (orig line 81) ===== */
.option.correct {
    color:#111111 !important;
    font-weight:700 !important;
    background:#FFFFFF !important;
    border:2px solid #145A32 !important;
  }

/* ===== <style id="balanced-top-controls">  (orig line 90) ===== */
.controls {
    display:grid !important;
    grid-template-columns: 1.35fr 1fr 1fr !important;
    gap:12px !important;
    align-items:stretch !important;
  }
  .controls select,
  .controls .mode-btn {
    width:100% !important;
    min-width:0 !important;
    height:58px !important;
    margin:0 !important;
  }
  @media (max-width:700px) {
    .controls {
      grid-template-columns:1fr 1fr 1fr !important;
      gap:8px !important;
    }
    .controls select,
    .controls .mode-btn {
      height:54px !important;
      padding:10px 8px !important;
      font-size:14px !important;
    }
  }

/* ===== <style id="match-hsk-button-height">  (orig line 118) ===== */
.tabs button,
  .controls select,
  .controls .mode-btn {
    height: 44px !important;
    min-height: 44px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  @media (max-width:700px) {
    .tabs button,
    .controls select,
    .controls .mode-btn {
      height: 44px !important;
      min-height: 44px !important;
    }
  }

/* ===== <style id="huichinese-hero-v11">  (orig line 137) ===== */
h1{color:#145A32 !important;margin-bottom:6px}
  .tagline{font-size:19px;font-weight:700;color:#145A32;margin-top:2px}
  .intro-copy{max-width:760px;margin-top:12px;color:#111111;font-size:16px;line-height:1.6}
  .resource-note{margin-top:18px;padding:16px;border:1px solid #dfe7e2;border-radius:14px;background:#f7fbf8;color:#111111}

/* ===== <style id="all-header-buttons-same-height">  (orig line 300) ===== */
.tabs button,
.controls select#lesson,
.controls .mode-btn,
.resource-btn{
  height:44px !important;
  min-height:44px !important;
  box-sizing:border-box !important;
  padding-top:10px !important;
  padding-bottom:10px !important;
  line-height:22px !important;
}

/* ===== <style id="top-buttons-always-bordered">  (orig line 314) ===== */
.tabs button,
.controls select#lesson,
.controls .mode-btn,
.resource-btn{
  border:1px solid #145A32 !important;
  box-shadow:none !important;
}

/* ===== <style id="resource-border-only">  (orig line 324) ===== */
body.resource-open .tabs button,
body.resource-open .controls select#lesson,
body.resource-open .controls .mode-btn{
  border:1px solid #145A32 !important;
  background:#fff !important;
  color:#111 !important;
}
body.resource-open #resourceBtn{
  border:1px solid #145A32 !important;
  background:#145A32 !important;
  color:#fff !important;
}

/* ===== <style id="resource-study-buttons-safe">  (orig line 339) ===== */
body.resource-open #flashBtn,
body.resource-open #quizBtn{
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  background:#fff !important;
  color:#111 !important;
  border:1px solid #145A32 !important;
}
body.resource-open #resourceBtn{
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  background:#145A32 !important;
  color:#fff !important;
  border:1px solid #145A32 !important;
}

/* Tăng khoảng cách giữa thanh tiến độ và nhãn đếm số. */
#counter{
  margin-top:8px !important;
}

/* Đồng bộ khoảng đệm trên của tiêu đề HuiChinese với tiêu đề Khoá học. */
header{
  padding-top:26px !important;
}
@media (max-width:600px){
  header{
    padding-top:26px !important;
  }
}

/* ===== <style id="card-vietnamese-font-v52">  (orig line 409) ===== */
/* Thống nhất font tiếng Việt trên Flashcard và Trắc nghiệm. */
.flashcard .lesson-label,
.quiz .lesson-label,
.card .lesson-label,
.flashcard .meaning,
.quiz .meaning,
.card .meaning,
.meaning,
.lesson-label{
  font-family:'Nunito',Arial,sans-serif !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
}

/* ===== <style id="card-vietnamese-font-extra-v52">  (orig line 425) ===== */
.flashcard .small,
.quiz .small{
  font-family:'Nunito',Arial,sans-serif !important;
}

/* ===== <style id="global-vietnamese-font-v53">  (orig line 432) ===== */
/* Thống nhất toàn bộ font tiếng Việt/UI trên website. */
html, body, button, input, select, textarea,
h1, h2, h3, h4, h5, h6, p, span, div, label,
small, strong, b, a, option,
.badge, .small, .tagline, .controls, .tabs,
.resource-page, .product-card, .product-name, .product-desc,
.price, .cart-bar, .cart-bottom, .cart-total, .order-row,
.order-total, .contact-box, .payment-box, .bank-info,
.delivery-notice, .free-box, .free-message, .actions,
.feedback, .result, .score, .catalog-title {
  font-family:'Nunito',Arial,sans-serif !important;
}

/* Giữ font chữ Hán riêng, theo kiểu đề thi HSK. */
.word, .chinese, .chinese-text {
  
}

/* ===== <style id="font-reset-final-v54">  (orig line 452) ===== */
/* Dùng cùng một font tiếng Việt trên toàn bộ HuiChinese và tất cả các trang/nội dung động. */
html, body, body *{
  font-family:'Nunito',Arial,sans-serif !important;
  font-weight: inherit;
}

/* Riêng chữ Hán giữ font serif kiểu đề thi HSK. */
.word, .chinese, .chinese-text{
  
}

/* Pinyin và toàn bộ nội dung tiếng Việt trên thẻ dùng cùng font Arial. */
.pinyin, .meaning, .badge, .small,
.resource-page, .resource-page *,
.card, .card *{
  font-family:'Nunito',Arial,sans-serif !important;
}

/* Pinyin và chữ Việt dùng cùng một font; riêng chữ Hán giữ font Kaiti ở rule bên dưới. */
.pinyin{
  font-family:'Nunito',Arial,sans-serif !important;
  font-variant-ligatures:none;
  font-feature-settings:'liga' 0;
}

/* Toan bo noi dung chu Han hien thi dung font Kaiti. */
.word,
.chinese,
.chinese-text,
.hanzi,
.han,
.zh,
[data-lang="zh"],
[data-language="zh"],
[data-han],
#speakingHan,
.speaking-han,
.typing-feedback.show-answer strong{
  font-family:"HuiChineseKaiTi","SimSun","Songti SC","NSimSun",serif !important;
  font-weight:400 !important;
}

/* ===== <style id="free-price-font-v55">  (orig line 479) ===== */
.product-card .price,
.product-card .price *{
  font-family:'Nunito',Arial,sans-serif !important;
  font-style:normal !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
}

/* ===== <style id="typography-final-v56">  (orig line 489) ===== */
/* Thống nhất font và độ đậm cho toàn bộ giao diện tiếng Việt */
html, body, body button, body input, body select, body textarea,
body p, body span, body div, body label, body a, body option,
body small, body strong, body b {
  font-family:'Nunito',Arial,sans-serif !important;
}

/* Các tiêu đề luôn in đậm */
h1, h2, h3, h4, h5, h6,
.resource-header h2,
.catalog-title,
.product-name,
.resource-page .word,
.score,
.order-total,
.cart-total,
.cart-bar strong,
.payment-box .qr-title,
.bank-info b {
  font-weight:700 !important;
  color:#111 !important;
}

/* Giá và nhãn miễn phí */
.product-card .price {
  font-family:'Nunito',Arial,sans-serif !important;
  font-weight:700 !important;
  font-style:normal !important;
}

/* Tổng cộng / tổng thanh toán: font Việt thống nhất */
.order-total,
.cart-total,
.cart-bar,
.cart-bar span,
.cart-bottom,
.payment-box,
.payment-box * {
  font-family:'Nunito',Arial,sans-serif !important;
}

/* Chữ Hán giữ font riêng kiểu đề thi HSK */
.word, .chinese, .chinese-text {
  
  font-weight:400 !important;
}

/* ===== <style id="huichinese-title-green-v57">  (orig line 539) ===== */
h1{
  color:#145A32 !important;
  font-weight:700 !important;
}

/* ===== <style id="resource-heading-green-v58">  (orig line 546) ===== */
/* Tiêu đề các trang và các dòng tổng tiền dùng xanh lá đậm */
.resource-header h2,
.resource-page h2,
.resource-page h3,
.catalog-title,
.order-total,
.cart-total,
.payment-box .order-total,
.delivery-notice + .actions,
.contact-box h3{
  color:#145A32 !important;
  font-weight:700 !important;
}

/* Riêng dòng mô tả dưới tiêu đề vẫn dùng chữ đen */
.resource-header p{
  color:#111 !important;
  font-weight:400 !important;
}

/* Tổng đơn / Tổng cộng / Tổng thanh toán */
.order-total,
.cart-total{
  color:#145A32 !important;
  font-weight:700 !important;
}

/* ===== <style id="cart-and-featured-color-v59">  (orig line 575) ===== */
/* Dòng thông tin phía trên nút Thanh toán */
.cart-bar,
.cart-bar span,
.cart-bar strong,
.cart-bottom .cart-total,
.cart-bottom .cart-total strong{
  color:#111111 !important;
}

/* ===== <style id="nunito-font-v60">  (orig line 593) ===== */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap');

/* ===== <style id="nunito-global-v60">  (orig line 597) ===== */
html, body, body button, body input, body select, body textarea,
body p, body span, body div, body label, body a, body option,
body small, body strong, body b,
.badge, .small, .tagline, .controls, .tabs,
.resource-page, .product-card, .product-name, .product-desc,
.price, .cart-bar, .cart-bottom, .cart-total, .order-row,
.order-total, .contact-box, .payment-box, .bank-info,
.delivery-notice, .free-box, .free-message, .actions,
.feedback, .result, .score, .catalog-title,
.resource-btn, .mode-btn, .product-btn {
  font-family:'Nunito',Arial,sans-serif !important;
}

/* Giữ nguyên font chữ Hán kiểu đề thi HSK. */
.word, .chinese, .chinese-text {
  
}

/* ===== <style id="title-product-bold-v61">  (orig line 617) ===== */
h1,
.tagline,
.resource-header h2,
.catalog-title,
.product-name,
.order-total,
.contact-box h3,
.payment-box .qr-title {
  font-weight: 700 !important;
}

/* ===== <style id="cart-summary-match-v77">  (orig line 753) ===== */
.cart-bottom .cart-total{
  font-size:17px !important;
  color:#111 !important;
  font-weight:700 !important;
  text-align:left !important;
  margin:0 0 12px !important;
}
.cart-bottom .cart-total strong{
  color:#111 !important;
  font-weight:700 !important;
}
.cart-bottom{
  text-align:left !important;
}
.cart-bottom .payment-button{
  display:block;
  margin-left:0;
  margin-right:auto;
}

/* ===== <style id="cart-summary-identical-v78">  (orig line 775) ===== */
.cart-bottom{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  border:1px solid #dfe7e2 !important;
  border-radius:12px !important;
  padding:12px 14px !important;
  margin-top:15px !important;
  margin-bottom:0 !important;
  text-align:left !important;
}
.cart-bottom .cart-total{
  margin:0 !important;
  font-size:17px !important;
  line-height:1.4 !important;
  color:#111 !important;
  font-weight:700 !important;
  text-align:left !important;
  flex:1;
}
.cart-bottom .cart-total strong{
  color:#111 !important;
  font-weight:700 !important;
}
.cart-bottom .payment-button{
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  padding:9px 18px !important;
  flex:0 0 auto;
}

/* ===== <style id="cart-bottom-vertical-v79">  (orig line 810) ===== */
.cart-bottom{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:12px !important;
  margin-top:18px !important;
  padding-top:0 !important;
  border-top:0 !important;
  text-align:left !important;
}
.cart-bottom .cart-total{
  width:100% !important;
  box-sizing:border-box !important;
  display:block !important;
  border:1px solid #dfe7e2 !important;
  border-radius:12px !important;
  padding:12px 14px !important;
  margin:0 !important;
  font-size:17px !important;
  line-height:1.4 !important;
  text-align:left !important;
  color:#111 !important;
  font-weight:700 !important;
}
.cart-bottom .cart-total strong{
  color:#111 !important;
  font-weight:700 !important;
}
.cart-bottom .payment-button{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  box-sizing:border-box !important;
}

/* ===== <style id="cart-summary-exact-v80">  (orig line 847) ===== */
.cart-bottom{display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:12px !important;margin-top:15px !important;padding:0 !important;border:0 !important;text-align:left !important;}
.cart-bottom .cart-total{
  display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #dfe7e2;border-radius:12px;padding:12px 14px;margin-bottom:15px;color:#111
  width:100% !important;
  box-sizing:border-box !important;
  margin:0 !important;
  font-size:17px !important;
  font-weight:700 !important;
  line-height:1.4 !important;
  text-align:left !important;
}
.cart-bottom .cart-total strong{color:#111 !important;font-weight:700 !important;}
.cart-bottom .payment-button{width:100% !important;max-width:none !important;margin:0 !important;}

/* ===== <style id="cart-summary-100-percent-v81">  (orig line 863) ===== */
.cart-bottom{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  margin-top:15px !important;
  padding:0 !important;
  border:0 !important;
}
.cart-bottom .cart-bar-bottom{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  border:1px solid #dfe7e2 !important;
  border-radius:12px !important;
  padding:12px 14px !important;
  margin:0 !important;
  color:#111 !important;
  width:100% !important;
  box-sizing:border-box !important;
}
.cart-bottom .cart-bar-bottom span,
.cart-bottom .cart-bar-bottom strong{
  color:#111 !important;
  font-family:'Nunito',Arial,sans-serif !important;
  font-size:inherit !important;
  font-weight:700 !important;
}
.cart-bottom .payment-button{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}

/* ===== <style id="bottom-cart-weight-v82">  (orig line 899) ===== */
/* Ở thanh Đã thêm phía dưới: chữ thường, chỉ số sản phẩm và số tiền in đậm. */
.cart-bottom .cart-bar-bottom span{
  font-weight:400 !important;
}
.cart-bottom .cart-bar-bottom span strong{
  font-weight:700 !important;
}

/* ===== <style id="order-total-center-v83">  (orig line 909) ===== */
.resource-page .order-total{
  text-align:center !important;
}

/* ===== <style id="profile-line-v84">  (orig line 915) ===== */
.profile-line{
  font-family:'Nunito',Arial,sans-serif !important;
  font-size:14px;
  line-height:1.5;
  color: #aaa;
  
  
  margin:4px auto 10px;

  text-align: left;
  font-weight: 400;

  font-family:'Nunito',Arial,sans-serif !important;
  font-size:14px;
  line-height:1.5;
  
  
  
  margin:4px auto 10px;

  text-align: left;
  

  color: #aaa;
  font-weight: 400;
}

/* ===== <style id="uniform-lesson-ui-v93">  (orig line 944) ===== */
/* Đồng bộ font và kích thước chữ cho Tất cả, Bài..., Flashcard, Trắc nghiệm */
#lessonToggle,
.lesson-option,
.controls .mode-btn,
.flashcard .lesson-label,
.quiz .lesson-label,
.card .lesson-label {
  font-family:'Nunito',Arial,sans-serif !important;
  font-size:14px !important;
  line-height:22px !important;
}

#lessonToggle,
.controls .mode-btn {
  font-weight:400 !important;
}

.lesson-option {
  font-weight:400 !important;
}

.flashcard .lesson-label,
.quiz .lesson-label,
.card .lesson-label {
  font-weight:400 !important;
  letter-spacing:0 !important;
}

/* ===== <style id="profile-size-uniform-v95">  (orig line 975) ===== */
/* Kích thước tuyệt đối đồng bộ cho cả tên và dòng thông tin */
.profile-line,
.profile-line strong {
  font-family:'Nunito',Arial,sans-serif !important;
  font-size:14px !important;
  line-height:1.5 !important;
}
.profile-line {
  font-weight:400 !important;
  color:#aaa !important;
  text-align:left !important;
}
.profile-line strong {
  font-weight:700 !important;
  color:#aaa !important;
}

/* ===== <style id="final-font-size-audit-v96">  (orig line 995) ===== */
/* ===== FONT & SIZE AUDIT ===== */
/* Font tiếng Việt/UI toàn trang */
html, body, body button, body input, body select, body textarea,
body p, body span, body div, body label, body a, body option,
body small, body strong, body b,
h1,h2,h3,h4,h5,h6,
.tabs, .controls, .resource-page, .product-card,
.product-name, .product-desc, .price, .cart-bar, .cart-bottom,
.cart-total, .order-row, .order-total, .contact-box,
.payment-box, .bank-info, .delivery-notice, .free-box,
.free-message, .actions, .feedback, .result, .score,
.catalog-title, .resource-btn, .mode-btn, .product-btn {
  font-family:'Nunito',Arial,sans-serif !important;
}

/* Chữ Trung/Hán tự */
.word, .chinese, .chinese-text, .hanzi, .han, .zh,
[data-lang="zh"], [data-language="zh"] {
  
}

/* Các nút chọn bài + Flashcard + Trắc nghiệm */
#lessonToggle, .lesson-option, .controls .mode-btn {
  font-family:'Nunito',Arial,sans-serif !important;
  font-size:14px !important;
  line-height:22px !important;
}

/* Chữ Bài trên thẻ */
.flashcard .lesson-label, .quiz .lesson-label, .card .lesson-label {
  font-family:'Nunito',Arial,sans-serif !important;
  font-size:14px !important;
  line-height:22px !important;
  font-weight:400 !important;
}

/* Thông tin hồ sơ */
.profile-line, .profile-line strong {
  font-family:'Nunito',Arial,sans-serif !important;
  font-size:14px !important;
  line-height:1.5 !important;
}
.profile-line {
  font-weight:400 !important;
  color:#aaa !important;
  text-align:left !important;
}
.profile-line strong {
  font-weight:700 !important;
  color:#aaa !important;
}

/* ===== <style id="product-price-free-size-match-v100">  (orig line 1048) ===== */
/* Đồng bộ size chữ giá và Miễn phí với tên sản phẩm */
.product-card .product-name,
.product-card .price {
  font-family:'Nunito',Arial,sans-serif !important;
  font-size:17px !important;
  line-height:1.4 !important;
}

/* ===== <style id="chinese-size-32-v107">  (orig line 1093) ===== */
/* Chữ Trung lớn hơn một chút để dễ học trên điện thoại */
.word,
.chinese,
.chinese-text,
.hanzi,
.han,
.zh,
[data-lang="zh"],
[data-language="zh"],
[data-han] {
  font-size:32px !important;
  line-height:1.35 !important;
}

/* ===== <style id="chinese-size-force-v109">  (orig line 1110) ===== */
/* FORCE SIZE v109: chữ Hán "de" o Flashcard/Trac nghiem. Desktop 50px;
   dien thoai 42px. Khong ap dung cho tieu de "Hoan thanh!". */
.flashcard .card .word,
.quiz .card .word,
.card .word,
.flashcard .chinese,
.quiz .chinese,
.card .chinese,
.flashcard .chinese-text,
.quiz .chinese-text,
.card .chinese-text,
.flashcard .hanzi,
.quiz .hanzi,
.card .hanzi,
.flashcard .han,
.quiz .han,
.card .han {
  font-size:50px !important;
  line-height:1.25 !important;
}

.card .completion-word {
  font-size:32px !important;
  line-height:1.35 !important;
}

@media (max-width:600px) {
  .flashcard .card .word,
  .quiz .card .word,
  .card .word,
  .flashcard .chinese,
  .quiz .chinese,
  .card .chinese,
  .flashcard .chinese-text,
  .quiz .chinese-text,
  .card .chinese-text,
  .flashcard .hanzi,
  .quiz .hanzi,
  .card .hanzi,
  .flashcard .han,
  .quiz .han,
  .card .han {
    font-size:42px !important;
    line-height:1.25 !important;
  }

  .card .completion-word {
    font-size:32px !important;
  }
}

/* "De" chu Viet rieng cho Go pinyin/Luyen noi - khong con dong bo voi
   chu Han o tren, chinh doc lap khi duoc yeu cau. */
#app .card .typing-word,
#app .card .speaking-vi {
  font-size:24px !important;
  line-height:1.5 !important;
  font-weight:700 !important;
}

/* ===== <style id="resource-hide-progress-v113">  (orig line 1163) ===== */
/* Khi mở Kho tài nguyên, ẩn hoàn toàn thanh tiến độ + bộ đếm từ của phần học. */
body.resource-open #bar,
body.resource-open #counter,
body.resource-open .progress,
body.resource-open .progress-wrap,
body.resource-open .progress-container,
body.resource-open .progress-bar,
body.resource-open .counter,
body.resource-open .study-progress {
  display:none !important;
}

/* ===== <style id="v125-mobile-controls">  (orig line 1176) ===== */
@media (max-width:600px){
  .controls, .top-controls, .mode-controls, .mode-row, .lesson-controls{display:flex!important;flex-wrap:nowrap!important;gap:6px!important;width:100%!important;}
  .controls > *, .top-controls > *, .mode-controls > *, .mode-row > *, .lesson-controls > *{flex:1 1 0!important;min-width:0!important;width:0!important;box-sizing:border-box!important;}
  .controls button,.top-controls button,.mode-controls button,.mode-row button,.lesson-controls button{padding-left:6px!important;padding-right:6px!important;white-space:nowrap!important;font-size:14px!important;}
}

/* ===== <style id="completion-resource-match-v147">  (orig line 1184) ===== */
/* ===== ĐỒNG BỘ 3 TIÊU ĐỀ =====
   "Kho tài nguyên" là mẫu chuẩn.
   Flashcard + Trắc nghiệm phải giống hệt về font, màu, size và khoảng trên.
*/

/* Khoảng cách từ mép trên thẻ */
#app > .card:has(.flashcard-completion),
#app > .quiz-completion-card,
.resource-page {
  padding-top:26px !important;
}

/* Màn hoàn thành co theo nội dung, tránh dư khoảng trắng phía dưới. */
#app > .card:has(.flashcard-completion),
#app > .quiz-completion-card {
  min-height:0 !important;
}

/* Cùng một định dạng tiêu đề */
#app > .card .flashcard-completion,
#app > .quiz-completion-card .quiz-completion-title,
.resource-page .resource-header > h2 {
  box-sizing:border-box !important;
  margin:0 !important;
  padding:0 !important;
  font-family:"Nunito",Arial,sans-serif !important;
  font-size:26px !important;
  line-height:1.35 !important;
  font-weight:700 !important;
  letter-spacing:normal !important;
  color:#145A32 !important;
  text-align:center !important;
  position:static !important;
  top:auto !important;
}

/* "Hoan thanh!" o Flashcard/Go pinyin/Trac nghiem: chinh rieng theo yeu cau
   (khong dung cho tieu de Kho tai nguyen). */
#app > .card .flashcard-completion,
#app > .quiz-completion-card .quiz-completion-title {
  font-size:20px !important;
}

/* Giữ phần mô tả Kho tài nguyên như hiện tại */
.resource-page .resource-header {
  margin-top:0 !important;
  padding-top:0 !important;
  margin-bottom:22px !important;
}
.resource-page .resource-header > p {
  margin:8px 0 0 !important;
  font-family:"Nunito",Arial,sans-serif !important;
  font-size:16px !important;
  line-height:1.5 !important;
  font-weight:400 !important;
  color:#111 !important;
}

/* Dòng tổng kết trắc nghiệm vẫn 16px và KHÔNG in đậm */
#app > .quiz-completion-card .quiz-completion-summary {
  margin:8px auto 0 !important;
  max-width:680px !important;
  font-family:"Nunito",Arial,sans-serif !important;
  font-size:16px !important;
  line-height:1.6 !important;
  font-weight:400 !important;
  color:#111 !important;
  letter-spacing:normal !important;
  text-align:center !important;
}

/* ===== <style id="equal-main-controls-width-v155">  (orig line 1244) ===== */
/* 3 nút chính: Chọn bài – Flashcard – Trắc nghiệm luôn bằng nhau */
.controls{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:12px !important;
  width:100% !important;
}
.controls .lesson-select-wrap,
.controls .mode-btn{
  width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}
.controls .lesson-toggle{
  width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}
@media (max-width:700px){
  .controls{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:8px !important;
  }
}

/* ===== <style id="resource-button-width-fix">  (orig line 1272) ===== */
/* Chỉ chỉnh chiều ngang nút Kho tài nguyên */
@media (min-width:701px){
  .resource-btn{
    width:calc((100% - 24px) / 3) !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
}
@media (max-width:700px){
  .resource-btn{
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    text-align:left !important;
  }
}

/* ===== <style id="equal-order-action-buttons">  (orig line 1292) ===== */
/* Máy tính: 2 nút trên cùng một dòng, tổng chiều ngang bằng vùng nội dung sản phẩm */
@media (min-width:701px){
  .actions{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
    align-items:stretch !important;
  }
  .actions button{
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
}
/* Điện thoại: nút trên – nút dưới, mỗi nút cùng chiều rộng */
@media (max-width:700px){
  .actions{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
  }
  .actions button{
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
}

/* ===== <style id="requested-card-font-size-v164">  (orig line 1326) ===== */
/* Đồng bộ chữ "Bài ..." trên thẻ từ vựng và Flashcard */
  .flashcard .lesson-label,
  .card .lesson-label,
  .quiz .lesson-label,
  .badge{
    font-size:14px !important;
    line-height:22px !important;
  }

  /* Đồng bộ toàn bộ câu hướng dẫn/kết quả trong thẻ trắc nghiệm */
  .quiz .small,
  .quiz .result,
  .card .small,
  .card .result,
  #feedback{
    font-size:15px !important;
    line-height:22px !important;
  }

/* ===== <style id="quiz-text-size-final-v165">  (orig line 1348) ===== */
.quiz .small,
  .quiz .result,
  .quiz #feedback,
  .card .small,
  .card .result,
  #feedback {
    font-size:15px !important;
    line-height:22px !important;
  }

/* Dong bo co chu tren tat ca the hoc (tru "de", da dong bo rieng o rule
   "chinese-size-force-v109" phia tren - 52px/44px; va tru nhan "Bai .../
   Phan ..." o rule ben duoi - 16px): lay chuan cho dap an/goi y. */
#app .card .small,
#app .card .result,
#app .card .quiz-completion-summary,
#app .card .listening-result-row,
#app .card .listening-last-lesson-notice,
#app .card .listening-result-total .listening-result-count {
  font-size:24px !important;
  line-height:1.5 !important;
}

/* "Ban chua chon dap an." / "Chinh xac" / "Chua chinh xac" o Trac nghiem: chinh rieng theo yeu cau. */
#app .card #feedback {
  font-size:16px !important;
  line-height:1.5 !important;
}

/* Cau tom tat + toan bo so diem o man Hoan thanh Luyen nghe: dong bo
   chung 1 size voi cau tom tat cua Flashcard (16px, inline trong completion.js). */
#app .card .listening-finish-summary,
#app .card .listening-result-count,
#app .card .listening-result-total .listening-result-count {
  font-size:16px !important;
  line-height:1.5 !important;
}

/* "Ban chua chon du dap an cho tat ca cac cau" o Bai tap nghe: chinh rieng theo yeu cau. */
#app #listeningFeedback {
  font-size:16px !important;
  line-height:1.5 !important;
}

/* Pinyin o Go pinyin: chinh rieng theo yeu cau. */
#app .card .typing-meaning {
  font-size:18px !important;
  line-height:1.5 !important;
}

/* Pinyin o Luyen noi: chinh rieng theo yeu cau. */
#app .card .speaking-pinyin {
  font-size:18px !important;
  line-height:1.5 !important;
}

/* "Cau 1, 2, 3..." o Bai tap nghe: chinh rieng theo yeu cau. */
#app .card .listening-qno {
  font-size:16px !important;
  line-height:1.5 !important;
}

/* Dong chu duoi khung nhap o Go pinyin ("Nhap dap an..."): chinh rieng theo yeu cau. */
#app .card .typing-feedback {
  font-size:16px !important;
  line-height:1.5 !important;
}

/* Pinyin va nghia tieng Viet o Flashcard: chinh rieng theo yeu cau. */
#app .card .pinyin,
#app .card .meaning {
  font-size:18px !important;
  line-height:1.5 !important;
}

/* Chu Han o Luyen noi: doi lap voi rule .meaning o tren (dung chung class
   voi Flashcard) vi day la 1 phan tu rieng, chinh doc lap theo yeu cau. */
#app .card .speaking-han {
  font-size:26px !important;
  line-height:1.4 !important;
}

/* Cau "Chon nghia dung:" va dap an A/B/C/D o Trac nghiem: chinh rieng theo yeu cau. */
#app .card .quiz-instruction,
#options .option {
  font-size:16px !important;
  line-height:1.5 !important;
}

/* Nhan "Bai ..." / "Phan ..." tren cac the: dong bo chuan 16px, tach rieng
   voi dap an/goi y (24px) vi day chi la nhan phu, khong phai noi dung hoc. */
#app .card .badge,
#app .card .listening-part-label,
#app .card .listening-result-part {
  font-size:16px !important;
  line-height:24px !important;
}

  #feedback.feedback-correct{
    color:#145A32 !important;
    font-weight:700 !important;
  }

  #feedback.feedback-wrong{
    color:#b94a48 !important;
    font-weight:700 !important;
  }

/* ===== <style id="quiz-next-center-final-v166">  (orig line 1361) ===== */
/* Giới hạn max-width:520px giống .flash-nav-actions (Flashcard) — trước đây
   khối này chiếm trọn 100% bề ngang thẻ (~950px trên desktop) trong khi nút
   "Xem nghĩa" bên Flashcard chỉ rộng 520px, khiến 2 nút cùng vai trò "hành
   động chính, full-width" ở 2 màn lại to nhỏ khác hẳn nhau. */
  .quiz-next-action {
    display:flex !important;
    flex-direction:row !important;
    justify-content:center !important;
    align-items:center !important;
    width:100% !important;
    max-width:520px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
  }

  /* Nút nằm đúng giữa khối, không bị margin/float của CSS khác kéo lệch */
  .quiz-next-action #nextBtn,
  #nextBtn {
    float:none !important;
    position:static !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

/* ===== <style id="finish-resource-center-final-v167">  (orig line 1385) ===== */
/* Các cụm nút ở màn hoàn thành dùng cùng bề ngang với nút điều hướng khác,
   tránh kéo quá sát biên thẻ. */
#app > .card:has(.flashcard-completion) .actions,
#app > .quiz-completion-card .actions{
  max-width:520px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Căn giữa tuyệt đối nút Xem Kho tài nguyên ở thẻ hoàn thành */
  .card .actions:has(#goResource) {
    width:100% !important;
    max-width:520px !important;
    display:flex !important;
    flex-direction:row !important;
    justify-content:center !important;
    align-items:center !important;
    text-align:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .card .actions:has(#goResource) #goResource {
    display:block !important;
    width:100% !important;
    float:none !important;
    position:static !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

/* ===== <style id="flashcard-navigation-v172">  (orig line 1408) =====
   Gộp 3 bản vá trùng nhau (v172/v175/v177 — cùng định nghĩa .flash-nav-actions
   nhiều lần, bản sau chỉ đổi margin) thành 1 rule duy nhất, giữ đúng giá trị
   cuối cùng có hiệu lực (margin:10px, từ v177). */
.flash-nav-actions{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:9px !important;
  max-width:520px !important;
  margin:10px auto 0 !important;
}
.flash-nav-actions button{
  width:100% !important;
  box-sizing:border-box !important;
}
.flash-nav-actions .flash-meaning-btn{
  grid-column:1 / -1 !important;
}

/* Ổn định chiều cao Flashcard: vùng chữ Hán + pinyin giữ kích thước cố định,
   tránh thẻ co giãn khi gặp từ dài. */
.flashcard-word{
  height:118px !important;
  min-height:118px !important;
  max-height:118px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}

#app > .card:has(.flash-nav-actions) .pinyin{
  height:58px !important;
  min-height:58px !important;
  max-height:58px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}

@media (max-width:600px){
  .flashcard-word{
    height:102px !important;
    min-height:102px !important;
    max-height:102px !important;
  }

  #app > .card:has(.flash-nav-actions) .pinyin{
    height:52px !important;
    min-height:52px !important;
    max-height:52px !important;
  }
}

.card .meaning#meaning{
  display:block !important;
  height:60px !important;
  min-height:60px !important;
  max-height:60px !important;
  box-sizing:border-box !important;
  margin:28px 0 0 !important;
  overflow:hidden !important;
  visibility:hidden;
}
.card .meaning#meaning.is-visible{
  visibility:visible !important;
}

/* ===== <style id="resource-button-left-desktop-v178">  (orig line 1462) ===== */
@media (min-width:701px){
  #resourceBtn{
    text-align:left !important;
    padding-left:16px !important;
  }
}

/* ===== <style id="flashcard-audio-v190">  (orig line 1472) ===== */
.flash-audio-wrap{display:flex;justify-content:center;align-items:center;margin:8px 0 2px}
.flash-audio-btn{
  width:44px;height:44px;border-radius:50%;border:1px solid #145A32 !important;
  background:#fff !important;color:#145A32 !important;font-size:21px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.flash-audio-btn.playing{background:#145A32 !important;color:#fff !important}
.flash-audio-btn:active{transform:scale(.96)}
.flash-audio-note{font-size:12px;color:#777;margin-top:3px}

/* ===== <style id="cloudflare-original-layout-lock">  (orig line 1484) ===== */
/* GIỮ NGUYÊN BỐ CỤC FILE GỐC */
@media (min-width:701px){
  .controls{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:12px !important;
    width:100% !important;
    align-items:stretch !important;
  }
  .controls > *,
  .controls .lesson-select-wrap,
  .controls select,
  .controls .mode-btn{
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  .resource-btn{
    width:calc((100% - 24px) / 3) !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
}
@media (max-width:700px){
  .controls{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px !important;
    width:100% !important;
  }
  .controls > *,
  .controls .lesson-select-wrap,
  .controls select,
  .controls .mode-btn,
  .resource-btn{
    min-width:0 !important;
    box-sizing:border-box !important;
  }
}

/* ===== <style id="cloudflare-audio-compat">  (orig line 1525) ===== */
/* Không thay đổi giao diện loa; chỉ giữ nút luôn nhận thao tác */
.flash-audio-btn{pointer-events:auto !important;user-select:none !important;}

/* ===== <style id="final-complete-button-center">  (orig line 1530) ===== */
.free-box .actions{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    width:100% !important;
  }
  .free-box .actions button{
    margin-left:auto !important;
    margin-right:auto !important;
  }

/* ===== <style id="mobile-audio-compat-v161">  (orig line 1550) ===== */
/* Nút loa ưu tiên thao tác chạm trên điện thoại, kể cả trình duyệt nhúng. */
.flash-audio-wrap{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  margin:14px 0 4px !important;
}
.flash-audio-btn{
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  min-height:48px !important;
  padding:0 !important;
  margin:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid #145A32 !important;
  border-radius:50% !important;
  background:#fff !important;
  color:#145A32 !important;
  font-size:22px !important;
  line-height:1 !important;
  -webkit-tap-highlight-color:transparent !important;
  touch-action:manipulation !important;
  cursor:pointer !important;
}
.flash-audio-btn.playing{
  transform:scale(.96);
  background:#eef7f0 !important;
}
@media(max-width:600px){
  .flash-audio-btn{
    width:50px !important;
    height:50px !important;
    min-width:50px !important;
    min-height:50px !important;
    font-size:23px !important;
  }
}

/* ===== <style id="(none)">  (orig line 1603) ===== */
.order-zalo-note{margin:10px 0 12px;line-height:1.4;font-size:14px;text-align:center}

/* ===== <style id="(none)">  (orig line 1605) ===== */
/* Căn giữa nút Gửi đơn hàng */
.order-send-wrap{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  width:100% !important;
}

/* ===== <style id="(none)">  (orig line 1615) ===== */
/* Căn chỉnh phần Đơn hàng */
.inline-order-page {
  margin-top: 24px !important;
}
.inline-order-page .order-send-wrap {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  text-align: center !important;
}

/* ===== <style id="absolute-order-send-center-v213">  (orig line 1629) ===== */
/* ===== KHÓA NÚT GỬI ĐƠN HÀNG Ở CHÍNH GIỮA ===== */
.inline-order-page .actions {
  display: block !important;
  width: 100% !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
  text-align: center !important;
}
.inline-order-page .actions .order-send-wrap {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}
.inline-order-page .actions .order-send-wrap a.product-btn {
  display: inline-flex !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 auto !important;
  float: none !important;
  position: static !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* ===== <style id="fix-order-send-width">  (orig line 1660) ===== */
.order-send-wrap{width:100% !important;display:flex !important;justify-content:center !important;align-items:center !important;box-sizing:border-box !important;}
.order-send-wrap a{display:flex !important;justify-content:center !important;align-items:center !important;width:100% !important;max-width:100% !important;box-sizing:border-box !important;margin:0 !important;float:none !important;}
@media (max-width:600px){
  .order-send-wrap{width:100% !important;padding:0 !important;}
  .order-send-wrap a{width:100% !important;}
}

/* ===== <style id="inline-order-product-price-14px">  (orig line 1669) ===== */
/* Tên sản phẩm và giá tiền trong đơn hàng: 14px */
.inline-order-page .order-row,
.inline-order-page .order-row span,
.inline-order-page .order-row strong {
  font-size:14px !important;
  line-height:1.5 !important;
}

/* ===== <style id="order-send-match-cartbar-v216">  (orig line 1678) ===== */
/* Nút Gửi đơn hàng: rộng đúng bằng thanh "Đã thêm sản phẩm" trên cả máy tính và điện thoại */
.inline-order-page .actions,
.inline-order-page .actions .order-send-wrap {
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box !important;
  display:block !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  text-align:center !important;
}
.inline-order-page .actions .order-send-wrap a.product-btn,
.inline-order-page .actions .order-send-wrap a.product-btn.primary {
  display:flex !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  margin:0 !important;
  float:none !important;
  position:static !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

/* ===== <style id="order-send-force-full-width-v217">  (orig line 1707) ===== */
/* Ép nút Gửi đơn hàng dài đúng toàn bộ thanh ngang chứa đơn hàng */
.inline-order-page .actions .order-send-wrap > a.product-btn.primary {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  display: flex !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.inline-order-page .actions .order-send-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ===== <style id="force-resource-order-heading-size">  (orig line 1726) ===== */
/* Đồng bộ tiêu đề Kho tài nguyên và Đơn hàng trên mọi thiết bị */
.resource-page .resource-header > h2,
.inline-order-page .resource-header > h2 {
  font-size: 26px !important;
}

/* ===== <style id="left-align-typing">  (orig line 1784) ===== */
#typingBtn{
  text-align:left !important;
  justify-content:flex-start !important;
}

/* ===== <style id="resource-button-state">  (orig line 1796) =====
   Màu nút Khoá học theo trạng thái active/inactive. */
#resourceBtn:not(.active){
  background:#fff !important;
  color:#111 !important;
  border:1px solid #145A32 !important;
}
#resourceBtn.active{
  background:#145A32 !important;
  color:#fff !important;
  border:1px solid #145A32 !important;
}

/* ===== <style id="order-divider-v320">  (orig line 2038) ===== */
/* Gạch ngang ngăn cách thanh đếm sản phẩm và phần Đơn hàng */
.order-divider{
  width:100%;
  height:1px;
  background:#dfe7e2;
  margin:9px 0;
}

/* ===== <style id="force-study-controls-visible">  (orig line 4452) ===== */
#flashBtn,#quizBtn{display:inline-flex !important;visibility:visible !important;opacity:1 !important;}

/* ===== flashcard-compact-spacing ===== */
/* Thẻ Flashcard: mọi khoảng cách giữa các phần (Bài / Hán / pinyin / loa / nghĩa /
   nút) bằng nhau (--flash-gap). Mỗi dòng chữ nằm trong ô cao cố định 1 dòng nên chiều
   cao thẻ không đổi giữa các từ -> nút Từ trước/Từ sau đứng yên. Dòng nào tràn ngang
   thì fitFlashLines() (js/flashcard.js) thu nhỏ chữ chứ không cho xuống dòng.
   Chỉ áp cho .flashcard-card nên Luyện nói và các thẻ khác không bị ảnh hưởng. */
#app .card.flashcard-card{
  --flash-gap:24px;
  display:flex;
  flex-direction:column;
  gap:var(--flash-gap);
  min-height:0 !important;
  padding-top:var(--flash-gap);
  padding-bottom:var(--flash-gap);
}
#app .card.flashcard-card > *{
  margin:0 !important;
  flex:none;
}
#app .card.flashcard-card .flashcard-word{
  display:block !important;
  height:50px !important;
  min-height:50px !important;
  max-height:50px !important;
  line-height:50px !important;
  white-space:nowrap;
  overflow:visible !important;
}
#app .card.flashcard-card .pinyin,
#app .card.flashcard-card #meaning{
  display:block !important;
  height:27px !important;
  min-height:27px !important;
  max-height:27px !important;
  line-height:27px !important;
  white-space:nowrap;
  overflow:visible !important;
}
#app .card.flashcard-card #meaning.is-wrapped{
  white-space:normal;
  line-height:1.3 !important;
}
#app .card.flashcard-card .flash-nav-actions{
  width:100%;
  align-self:center;
}
@media (max-width:600px){
  #app .card.flashcard-card{ --flash-gap:18px; }
  #app .card.flashcard-card .flashcard-word{
    height:42px !important;
    min-height:42px !important;
    max-height:42px !important;
    line-height:42px !important;
  }
}

/* ===== quiz-compact-spacing ===== */
/* Thẻ Trắc nghiệm: cùng khoảng cách chung với Flashcard giữa các phần (Bài / Hán /
   "Chọn nghĩa đúng:" / đáp án / thông báo đúng-sai / nút). Chữ Hán, mỗi đáp án và dòng
   thông báo nằm trong ô cao cố định nên chiều cao thẻ không đổi: nút "Câu tiếp theo"
   không dịch khi hiện "Chính xác" hay khi gặp đáp án dài (fitQuizLines trong js/quiz.js
   thu nhỏ chữ chứ không cho đáp án xuống dòng làm cao thêm). Chỉ áp cho .quiz-card. */
#app .card.quiz-card{
  --quiz-gap:24px;
  display:flex;
  flex-direction:column;
  gap:var(--quiz-gap);
  min-height:0 !important;
  padding-top:var(--quiz-gap);
  padding-bottom:var(--quiz-gap);
}
#app .card.quiz-card > *{
  margin:0 !important;
  flex:none;
}
#app .card.quiz-card .word{
  display:block !important;
  height:50px !important;
  min-height:50px !important;
  max-height:50px !important;
  line-height:50px !important;
  white-space:nowrap;
  overflow:visible !important;
}
#app .card.quiz-card #options{
  width:100%;
  max-width:700px;
  align-self:center;
  grid-auto-rows:60px;
  /* minmax(0,1fr): cột chia đều, không giãn theo đáp án dài (nowrap) */
  grid-template-columns:repeat(2,minmax(0,1fr));
}
#app .card.quiz-card #options .option{
  height:60px !important;
  min-height:60px !important;
  max-height:60px !important;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding-top:0;
  padding-bottom:0;
  white-space:nowrap;
}
#app .card.quiz-card #options .option.is-wrapped{
  white-space:normal;
  line-height:1.2 !important;
}
#app .card.quiz-card #feedback{
  height:24px !important;
  min-height:24px !important;
  max-height:24px !important;
  line-height:24px !important;
  white-space:nowrap;
}
#app .card.quiz-card .quiz-next-action{
  align-self:center;
}
@media (max-width:600px){
  #app .card.quiz-card{ --quiz-gap:18px; }
  #app .card.quiz-card #options{ grid-template-columns:minmax(0,1fr); }
  #app .card.quiz-card .word{
    height:42px !important;
    min-height:42px !important;
    max-height:42px !important;
    line-height:42px !important;
  }
}

/* ===== typing-compact-spacing ===== */
/* Thẻ Gõ pinyin: cùng khoảng cách chung với Flashcard/Trắc nghiệm giữa các phần (Bài /
   từ Việt / pinyin / ô nhập / dòng thông báo / các nút). Từ Việt, pinyin, ô nhập và dòng
   thông báo nằm trong ô cao cố định (pinyin ẩn vẫn giữ chỗ) nên chiều cao thẻ không đổi:
   các nút không dịch khi bấm "Xem pinyin"/"Xem chữ Hán" hay khi gặp từ dài (fitTypingLines
   trong js/typing.js thu nhỏ chữ). Chỉ áp cho .typing-card, không ảnh hưởng Luyện nói. */
#app .card.typing-card{
  --typing-gap:24px;
  display:flex;
  flex-direction:column;
  gap:var(--typing-gap);
  min-height:0 !important;
  padding-top:var(--typing-gap);
  padding-bottom:var(--typing-gap);
}
#app .card.typing-card > *{
  margin:0 !important;
  flex:none;
}
#app .card.typing-card .typing-word{
  display:block !important;
  height:36px !important;
  min-height:36px !important;
  max-height:36px !important;
  line-height:36px !important;
  white-space:nowrap;
  overflow:visible !important;
}
#app .card.typing-card .typing-word.is-wrapped{
  white-space:normal;
  line-height:1.1 !important;
}
#app .card.typing-card #typingPinyin,
#app .card.typing-card #typingPinyin[hidden]{
  display:block !important;
  height:27px !important;
  min-height:27px !important;
  max-height:27px !important;
  line-height:27px !important;
  white-space:nowrap;
  overflow:visible !important;
}
#app .card.typing-card #typingPinyin[hidden]{
  visibility:hidden;
}
#app .card.typing-card #typingPinyin{
  width:100%;
  align-self:center;
}
#app .card.typing-card .typing-input.typing-input{
  box-sizing:border-box;
  height:61px;
  align-self:center;
}
#app .card.typing-card #typingFeedback{
  height:27px !important;
  min-height:27px !important;
  max-height:27px !important;
  line-height:27px !important;
  white-space:nowrap;
}
#app .card.typing-card .typing-actions.typing-actions{
  width:100%;
  align-self:center;
}
@media (max-width:600px){
  #app .card.typing-card{ --typing-gap:18px; }
}

/* ===== speaking-compact-spacing ===== */
/* Thẻ Luyện nói: cùng khoảng cách chung với các thẻ khác giữa các phần (Bài / câu Việt /
   nút loa / pinyin / chữ Hán / các nút). Máy tính/tablet (>600px): câu Việt trong ô 2 dòng,
   pinyin và chữ Hán trong ô 1 dòng, cao cố định -> nút đứng yên ở mọi câu (fitSpeakingLines
   trong js/speaking.js thu nhỏ chữ nếu tràn ô). Điện thoại (<=600px): không ô cố định;
   pinyin/chữ Hán khi ẩn vẫn giữ đúng chỗ của nội dung thật (visibility:hidden) nên bấm hiện
   không làm nút dịch; nút chỉ dịch giữa các câu dài ngắn khác nhau. Chỉ áp cho .speaking-card. */
#app .card.speaking-card{
  --speaking-gap:24px;
  display:flex;
  flex-direction:column;
  gap:var(--speaking-gap);
  min-height:0 !important;
  padding-top:var(--speaking-gap);
  padding-bottom:var(--speaking-gap);
}
#app .card.speaking-card > *{
  margin:0 !important;
  flex:none;
}
#app .card.speaking-card .speaking-vi{
  width:100%;
  align-self:center;
  display:flex !important;
  align-items:center;
  justify-content:center;
  height:72px !important;
  min-height:72px !important;
  max-height:72px !important;
}
#app .card.speaking-card .speaking-vi > span{
  display:block;
}
#app .card.speaking-card .speaking-extra,
#app .card.speaking-card .speaking-extra[hidden]{
  display:block !important;
  white-space:nowrap;
}
#app .card.speaking-card .speaking-extra[hidden]{
  visibility:hidden !important;
}
#app .card.speaking-card .speaking-pinyin{
  height:27px !important;
  min-height:27px !important;
  max-height:27px !important;
  line-height:27px !important;
}
#app .card.speaking-card .speaking-han{
  height:36px !important;
  min-height:36px !important;
  max-height:36px !important;
  line-height:36px !important;
}
#app .card.speaking-card .flash-nav-actions{
  width:100%;
  align-self:center;
}
@media (max-width:600px){
  #app .card.speaking-card{ --speaking-gap:18px; }
  #app .card.speaking-card .speaking-vi{
    display:block !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
  }
  #app .card.speaking-card .speaking-extra,
  #app .card.speaking-card .speaking-extra[hidden]{
    white-space:normal;
  }
  #app .card.speaking-card .speaking-pinyin,
  #app .card.speaking-card .speaking-han{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
  }
  #app .card.speaking-card .speaking-pinyin{ line-height:1.5 !important; }
  #app .card.speaking-card .speaking-han{ line-height:1.4 !important; }
}