body[data-service-key="the-hoc-tieng-nhat"]{overflow-x:hidden}

/* Đồng bộ toàn bộ typography trang "Thẻ học tiếng Nhật" theo font chuẩn đang dùng ở đoạn mô tả minh họa bộ thủ. */
body[data-service-key="the-hoc-tieng-nhat"],
body[data-service-key="the-hoc-tieng-nhat"] *{
  font-family:"Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* Tăng độ tương phản chữ toàn bộ nội dung trang thẻ học */
body[data-service-key="the-hoc-tieng-nhat"] .section,
body[data-service-key="the-hoc-tieng-nhat"] .service-block,
body[data-service-key="the-hoc-tieng-nhat"] .product-module,
body[data-service-key="the-hoc-tieng-nhat"] .quick-note,
body[data-service-key="the-hoc-tieng-nhat"] .price-box,
body[data-service-key="the-hoc-tieng-nhat"] .payment-note-box,
body[data-service-key="the-hoc-tieng-nhat"] .order-form-block {
  color:#1a2f4a;
}

body[data-service-key="the-hoc-tieng-nhat"] .product-module__content h3,
body[data-service-key="the-hoc-tieng-nhat"] .price-box h3,
body[data-service-key="the-hoc-tieng-nhat"] .order-section-title,
body[data-service-key="the-hoc-tieng-nhat"] .order-form-title-below,
body[data-service-key="the-hoc-tieng-nhat"] .payment-note-box h3,
body[data-service-key="the-hoc-tieng-nhat"] .mini-price-table th,
body[data-service-key="the-hoc-tieng-nhat"] .quick-order__label,
body[data-service-key="the-hoc-tieng-nhat"] .perks-toggle summary {
  color:#0c2f57;
}

body[data-service-key="the-hoc-tieng-nhat"] .product-sub,
body[data-service-key="the-hoc-tieng-nhat"] .product-desc,
body[data-service-key="the-hoc-tieng-nhat"] .product-module__content ul,
body[data-service-key="the-hoc-tieng-nhat"] .quick-note,
body[data-service-key="the-hoc-tieng-nhat"] .mini-price-table td,
body[data-service-key="the-hoc-tieng-nhat"] .payment-card p,
body[data-service-key="the-hoc-tieng-nhat"] .fullset-note,
body[data-service-key="the-hoc-tieng-nhat"] .payment-note {
  color:#223f5f;
}

body[data-service-key="the-hoc-tieng-nhat"] .mini-price-table th:nth-child(2),
body[data-service-key="the-hoc-tieng-nhat"] .mini-price-table td:nth-child(2),
body[data-service-key="the-hoc-tieng-nhat"] .mini-price-table th:nth-child(3),
body[data-service-key="the-hoc-tieng-nhat"] .mini-price-table td:nth-child(3) {
  color:#0f56a9;
}

body[data-service-key="the-hoc-tieng-nhat"] .market-btn,
body[data-service-key="the-hoc-tieng-nhat"] .level-pill span,
body[data-service-key="the-hoc-tieng-nhat"] .quick-order__row--cards input[data-order-price],
body[data-service-key="the-hoc-tieng-nhat"] .order-contact-panel input,
body[data-service-key="the-hoc-tieng-nhat"] .order-contact-panel textarea {
  color:#1c3e63;
}

.thehoc-hero{position:relative;overflow:hidden;background:url('/assets/the-hoc-tieng-nhat-bg.jpg') right center/cover no-repeat;border:1px solid #3f5f8c;border-radius:18px;padding:24px;color:#f4f8ff}
.thehoc-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(3,12,28,.92) 0%,rgba(6,20,40,.88) 38%,rgba(8,26,50,.58) 62%,rgba(8,26,50,.30) 100%),linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 45%)}
.thehoc-hero > *{position:relative;z-index:1}
.thehoc-hero h1{margin:0 0 10px;font-size:clamp(22px,2.7vw,32px);line-height:1.15;text-shadow:0 2px 6px rgba(0,0,0,.45)}
.thehoc-hero .hero-title-main{display:block;font-size:1em;font-weight:800;letter-spacing:.2px}
.thehoc-hero .hero-title-sub{display:block;margin-top:4px;font-size:.65em;font-weight:700;letter-spacing:.15px;color:#dfeeff}
.thehoc-hero p{margin:0;max-width:min(920px,92%);padding:10px 12px;line-height:1.68;color:#eef6ff;text-shadow:0 1px 2px rgba(0,0,0,.35);background:rgba(5,18,36,.42);border:1px solid rgba(143,177,219,.28);border-radius:10px;backdrop-filter:blur(1.5px)}
.thehoc-hero__actions{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}

.quick-note{margin-top:14px;background:#f7fbff;border:1px solid #d6e3f3;border-radius:14px;padding:14px;color:#2f4b68;line-height:1.65}
.quick-note strong{color:#163a5f}

.product-module{display:grid;grid-template-columns:1.05fr 1fr;gap:14px;align-items:stretch;margin-top:16px;background:#fff;border:1px solid #d6e3f3;border-radius:14px;padding:14px;overflow:hidden}
.product-module__media{display:flex;flex-direction:column;gap:8px;min-width:0}
.product-module__content{min-width:0;display:flex;flex-direction:column;max-width:540px;margin:0 auto}
.product-main-wrap{border:1px solid #d5e2f1;border-radius:10px;overflow:hidden;background:#0f223d;aspect-ratio:1/1;touch-action:pan-y}
.product-photo{width:100%;height:100%;object-fit:cover;display:block;transform:scale(.94);transform-origin:center center}

.thumb-strip-wrap{display:grid;grid-template-columns:36px 1fr 36px;gap:8px;align-items:center;min-width:0}
.thumb-arrow{width:36px;height:74px;border:none;border-radius:8px;background:#f0f5ff;color:#2a4e77;font-weight:700;cursor:pointer}
.thumb-track{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px;max-width:100%}
.thumb-track::-webkit-scrollbar{display:none}
.thumb-item{flex:0 0 68px;height:68px;border:2px solid #d1deef;border-radius:8px;padding:0;overflow:hidden;background:#fff;cursor:pointer}
.thumb-item img{width:100%;height:100%;object-fit:cover;display:block}
.thumb-item.active{border-color:#ef3d2f;box-shadow:0 0 0 1px rgba(239,61,47,.18)}

.product-module__content h3{margin:0 0 8px;color:#12365b;font-size:17px}
.product-sub{margin:0 0 6px;color:#355777;font-weight:600;font-size:14px}
.product-desc{margin:0 0 8px;color:#46617c;line-height:1.55;font-size:13.5px}
.product-module__content ul{margin:0 0 10px;padding-left:18px;color:#2f4a68;line-height:1.62;font-size:13.5px}

.price-mini-wrap{margin:8px 0 10px}
.mini-price-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid #d6e3f3;border-radius:10px;overflow:hidden;background:#fcfdff;table-layout:fixed}
.mini-price-table th,.mini-price-table td{padding:7px 8px;border-bottom:1px solid #e8eef7;font-size:12.5px}
.mini-price-table th{background:#eef4fb;color:#21466e;text-align:left;font-weight:700}
.mini-price-table th:nth-child(1){width:32%}
.mini-price-table th:nth-child(2){width:34%}
.mini-price-table th:nth-child(3){width:34%}
.mini-price-table tr:last-child td{border-bottom:none}
.mini-price-table td{color:#2f4a68}
.mini-price-table th:nth-child(2),.mini-price-table td:nth-child(2){white-space:nowrap;color:#1f6bc2;text-align:center;padding:8px 10px}
.mini-price-table th:nth-child(3){white-space:nowrap;font-weight:700;color:#1f6bc2;text-align:center;padding:8px 10px}
.mini-price-table td:nth-child(3){white-space:nowrap;color:#1f6bc2;text-align:center;padding:8px 10px;font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}

.quick-order-box{margin:10px 0 0;padding:8px;border:1px solid #d7e1ee;border-radius:10px;background:#f5f8fc;margin-top:auto}
.quick-order__label{font-size:12.5px;font-weight:700;color:#234b75;margin-bottom:6px}
.order-builder .quick-order__label{font-size:17px;line-height:1.2;color:#173a5f;font-family:inherit;letter-spacing:.2px;display:block;margin:0 0 10px}
.quick-order__row{display:grid;grid-template-columns:1fr 68px auto;gap:8px}
.quick-order__row select,.quick-order__row input{width:100%;padding:8px;border:1px solid #c9d9ea;border-radius:8px;background:#fff;color:#1f3958}

.quick-order-box--cards{border-color:#f0b188;background:#fff8f3}
.quick-order__levels{display:grid;grid-template-columns:repeat(var(--quick-cols,5),minmax(0,1fr));gap:8px;margin-bottom:8px}
.level-pill{position:relative;cursor:pointer}
.level-pill input{position:absolute;opacity:0;pointer-events:none}
.level-pill span{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 8px;min-height:36px;border:1px solid #d7dfeb;border-radius:10px;background:#fff;color:#234b75;font-size:12.5px;font-weight:400;line-height:1.1}
.level-pill span::before{content:'';width:12px;height:12px;border:1.5px solid #98abc4;border-radius:2px;display:inline-block;background:#fff}
.level-pill input:checked + span{border-color:#4f83c7;background:#edf4ff;color:#0f56a9}
.level-pill input:checked + span::before{content:'✓';font-size:10px;line-height:12px;text-align:center;color:#fff;background:#1f7dff;border-color:#1f7dff;font-weight:800}

.market-buttons{display:flex;gap:8px}
.market-btn{height:30px;padding:0 6px;border:1px solid #cfdced;border-radius:8px;background:#fff;color:#234b75;font-weight:400;font-size:12.5px;line-height:1.15;white-space:nowrap;cursor:pointer}
.market-btn.active{background:#eaf2ff;border-color:#6b96d0;color:#114f9a}

.quick-order__row--cards{grid-template-columns:minmax(0,1fr) 58px 106px 94px;align-items:center;column-gap:5px}
.quick-order__row--cards > *{min-width:0}
.quick-order__row--cards .market-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.quick-order__row--cards input[data-order-qty]{height:30px;text-align:center;padding:0 4px;font-size:11px}
.quick-order__row--cards input[data-order-qty]::placeholder{color:#577391;font-size:11px}
.quick-order__row--cards .btn-primary{width:100%;padding:0 5px;border-radius:8px;min-width:0;height:30px;font-size:11px;background:#fff;border:1px solid #f0b9b9;color:#d02222;display:inline-flex;align-items:center;justify-content:center;gap:3px;font-weight:400;white-space:nowrap}
.quick-order__row--cards .btn-primary svg{width:14px;height:14px}
.quick-order__row--cards .btn-primary.is-added{background:#e9f9ee;border-color:#49b66a;color:#1f9a45}
.quick-order__row--cards .btn-outline{width:100%;height:30px;padding:0 6px;font-size:11px;white-space:nowrap;background:linear-gradient(180deg,#2c7ee4,#246ed0);color:#fff;border-color:#1f5fb4;font-weight:700}

.perks-toggle summary{list-style:none;cursor:pointer;font-size:20px;font-weight:800;color:#173a5f;letter-spacing:.2px;margin:2px 0 10px}
.perks-toggle summary::-webkit-details-marker{display:none}
.perks-toggle:not([open]) .price-layout{display:none}


.thehoc-admin-box{margin-top:8px;padding:10px;border:1px dashed #9eb6d3;border-radius:10px;background:#f6fbff;display:grid;gap:6px}
.thehoc-admin-box strong{font-size:12px;color:#2f4f72}
.thehoc-admin-box input,.thehoc-admin-box textarea{width:100%;padding:8px;border:1px solid #c9d9ea;border-radius:8px;font-size:13px;font-family:inherit}
.thehoc-admin-box .btn-outline{height:34px;font-size:13px}
.thehoc-admin-hint{font-size:11px;color:#4f6d8f}
.thehoc-admin-status{margin:0;font-size:12px;color:#48698f}
.thehoc-admin-status.is-ok{color:#1d6e3e}
.thehoc-admin-status.is-err{color:#b23a2c}

.price-layout{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.price-box{background:#fff;border:1px solid #d6e3f3;border-radius:14px;padding:14px}
.price-box h3{margin:0 0 8px;color:#173a5f;font-size:16px}
.price-box ul{margin:0;padding-left:18px;color:#2f4a68;line-height:1.65}

.template-box{margin-top:14px;background:#0e233f;border:1px solid #34567e;color:#f0f6ff;border-radius:14px;padding:14px}
.template-box h3{margin:0 0 8px;color:#fff}
.template-text{white-space:pre-line;line-height:1.7;color:#e5efff;overflow-wrap:anywhere;word-break:break-word}

.payment-note-box{display:none;margin-top:12px;padding:14px;border:1px solid #d8e2ef;border-radius:14px;background:#f9fbff}
.payment-note-box.is-visible{display:block}
.payment-note-box h3{margin:0 0 6px;color:#153b62;font-size:22px;line-height:1.2}
.payment-note-box>p{margin:0 0 12px;color:#355777;line-height:1.5;font-size:14px}
.payment-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.payment-card{border:1px solid #dbe5f1;border-radius:12px;padding:12px;background:#fff;display:grid;gap:6px;align-content:start}
.payment-card h4{margin:0 0 2px;font-size:16px;color:#1b446e;line-height:1.25}
.payment-card p{margin:0;color:#3d5a78;font-size:14px;line-height:1.4}
.payment-vn-meta{display:grid;gap:6px}
.payment-note{margin-top:12px;padding-top:10px;border-top:1px solid #e3ebf5;font-size:14px;color:#2f4f72}

.order-form-block{margin-top:16px}
.service-form--order{grid-template-columns:1fr 1fr;gap:8px}
.order-builder{margin-top:2px;font-family:inherit}
.order-builder *{font-family:inherit}
.order-section-title{font-size:14px;font-weight:700;color:#2a4e77;margin:10px 0 6px}
.order-levels-4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Tránh xuống dòng tên sách trong block Chọn sách (mobile/desktop) */
.order-levels-4 .level-pill span{justify-content:flex-start;white-space:nowrap;padding:8px 10px;gap:6px}
.order-levels-4 .level-pill span::before{flex:0 0 12px}
.order-market{margin-bottom:8px}
.order-footer-row{display:grid;grid-template-columns:1fr minmax(190px,250px);gap:12px;align-items:start;margin-top:8px}
.order-footer-left .btn-outline{height:34px;font-size:12.5px;font-weight:400;line-height:1.1;padding:0 10px}
#fullSetBtn{font-weight:400 !important}
.order-action-stack{display:grid;grid-template-columns:1fr;gap:8px}
.order-action-stack input[data-form-price]{height:38px;text-align:center;padding:0 8px;color:#174b84;font-weight:700}
.btn-buy-now-strong{height:40px !important;background:linear-gradient(180deg,#2f86e7,#226ece) !important;border-color:#1f5fb4 !important;color:#fff !important;font-weight:700 !important;box-shadow:0 4px 10px rgba(34,110,206,.20)}
.order-form-title-below{margin:0 0 8px;color:#173a5f;font-size:18px;letter-spacing:.1px;font-family:inherit}
.order-contact-panel{display:none;margin-top:10px;padding:12px;border:1px solid #d6e2f0;border-radius:12px;background:#f9fcff}
.order-contact-panel.is-visible{display:block}
.order-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.order-contact-grid .full{grid-column:1 / -1}
.order-contact-panel input,.order-contact-panel textarea{font-family:inherit;font-size:15px;line-height:1.35}
.order-contact-panel textarea{margin-top:8px}
.order-hidden-inputs{display:none}
.fullset-note{margin:6px 0 0;font-size:13px;color:#3b5f86;line-height:1.35}

/* Ô ghi chú + nút copy đặt trong cùng block để thao tác nhanh trên mobile/desktop. */
.note-wrap{position:relative}
.note-wrap textarea{width:100%;padding:10px 12px 34px;border:1px solid #d8e3f0;border-radius:10px;background:#fff;color:#1f3958;font-family:inherit;font-size:14px;line-height:1.35;min-height:92px;resize:vertical}
.btn-copy-note{position:absolute;right:12px;bottom:12px;height:24px;min-width:52px;padding:0 8px;font-size:12px;font-weight:500;border-radius:7px;background:#f7fbff;border:1px solid #bfd2e8;color:#2b5c93;box-shadow:none}

.form-actions--triple{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
.form-actions--triple .btn-primary,
.form-actions--triple .btn-outline{height:38px;padding:0 10px;font-size:14px;font-weight:600;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;line-height:1;text-decoration:none;text-align:center}
.btn-action-confirm{grid-column:1 / -1;background:#1f7dff;border:1px solid #1d69cf;color:#fff}
.btn-action-fb{background:#edf4ff;border:1px solid #8fb0da;color:#1d4f8f}
.btn-action-zalo{background:#e9f8ff;border:1px solid #86c8e8;color:#0c6ea6}
.btn-action-zalo.is-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}

/* Tránh iOS Safari tự zoom khi submit/focus input */
.service-form--order input,
.service-form--order textarea,
.service-form--order select{font-size:16px}

@media (max-width:900px){
  .thehoc-hero{padding:14px 12px;background-position:68% center}
  .thehoc-hero h1{margin-bottom:8px;font-size:clamp(20px,6.2vw,28px)}
  .thehoc-hero .hero-title-main{font-size:clamp(20px,5.6vw,24px);white-space:nowrap;letter-spacing:.05px}
  .thehoc-hero .hero-title-sub{font-size:.58em}
  .thehoc-hero p{max-width:100%;padding:8px 10px;line-height:1.55;font-size:14px}

  .product-module{grid-template-columns:1fr}
  .product-module__content{max-width:100%}
  .product-photo{transform:scale(.96)}
  .thumb-strip-wrap{grid-template-columns:32px 1fr 32px}
  .thumb-arrow{height:64px}
  .thumb-item{flex:0 0 60px;height:60px}
  .quick-order__row{grid-template-columns:1fr}
  .quick-order__levels{grid-template-columns:repeat(3,minmax(0,1fr))}
  .order-levels-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .order-levels-4 .level-pill{width:100%}
  .order-levels-4 .level-pill span{width:100%;font-size:12px;justify-content:flex-start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* Quick-order trong từng block sách trên mobile: tối đa 2 cột, không để nút co hẹp */
  .product-module[data-key="bo-thu"] .quick-order__levels,
  .product-module[data-key="kanji-660"] .quick-order__levels,
  .product-module[data-key="cam-nang"] .quick-order__levels{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .product-module[data-key="bo-thu"] .quick-order__levels .level-pill,
  .product-module[data-key="kanji-660"] .quick-order__levels .level-pill,
  .product-module[data-key="cam-nang"] .quick-order__levels .level-pill{
    display:block;
    width:100%;
  }
  .product-module[data-key="bo-thu"] .quick-order__levels .level-pill span,
  .product-module[data-key="kanji-660"] .quick-order__levels .level-pill span,
  .product-module[data-key="cam-nang"] .quick-order__levels .level-pill span{
    width:100%;
    justify-content:flex-start;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .quick-order__row--cards{grid-template-columns:1fr 1fr}
  .order-footer-row{grid-template-columns:1fr}
  .order-contact-grid{grid-template-columns:1fr}
  .btn-copy-note{right:8px;bottom:8px}
  .form-actions--triple{grid-template-columns:1fr}
  .market-buttons{display:grid;grid-template-columns:1fr 1fr;grid-column:1 / -1}
  .market-btn{font-size:12.5px;padding:0 8px;font-weight:400}
  .quick-order__row--cards .btn-primary,
  .quick-order__row--cards .btn-outline{width:100%}
  .quick-order__row--cards .btn-primary{font-size:13px;font-weight:500}
  .quick-order__row--cards input[data-order-price]{height:30px;text-align:center;padding:0 6px;font-size:12.5px;color:#5a7390;font-weight:500;background:#fff;border:1px solid #cfdced;border-radius:8px}
  .quick-order__row--cards input[data-order-price].has-price{color:#174b84}
  .mini-price-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .mini-price-table th,.mini-price-table td{white-space:nowrap}
  .price-layout{grid-template-columns:1fr}
  .payment-note-box{padding:10px;border-radius:12px}
  .payment-note-box h3{font-size:18px}
  .payment-note-box>p{font-size:13px;margin-bottom:10px}
  .payment-grid{grid-template-columns:1fr;gap:10px}
  .payment-card{padding:10px}
  .payment-card h4{font-size:14px}
  .payment-card p,.payment-note{font-size:13px}
  .qr-image{max-width:140px}
}

/* Màn rất hẹp: vẫn giữ tối đa 2 cột theo yêu cầu, giảm nhẹ cỡ chữ để không vỡ layout */
@media (max-width:360px){
  .order-levels-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .order-levels-4 .level-pill span{font-size:11.5px}
  .product-module[data-key="bo-thu"] .quick-order__levels,
  .product-module[data-key="kanji-660"] .quick-order__levels,
  .product-module[data-key="cam-nang"] .quick-order__levels{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .product-module[data-key="bo-thu"] .quick-order__levels .level-pill span,
  .product-module[data-key="kanji-660"] .quick-order__levels .level-pill span,
  .product-module[data-key="cam-nang"] .quick-order__levels .level-pill span{
    font-size:11.5px;
  }
}