/* Đợt 9 — CSS dùng chung (astra/a0-b9-base.css, nạp trước CSS trang của site). Biến đặt ở CSS site:
   --c1 màu chính, --c1d đậm, --c2 phụ, --ink chữ, --mu chữ phụ, --bg2 nền nhạt, --ft nền footer, --hf font tiêu đề, --bf font thân, --r bo góc */
/* --c1t: màu chữ thương hiệu đọc được trên nền trắng (c1 nhạt như vàng thì site đặt tối hơn); --c1on: chữ trên nền c1 (mặc định trắng; c1 nhạt -> #1d1d1d) — low_contrast_text 10-11 */
:root { --c1: #e41e31; --c1d: #c3121f; --c2: #1b1b1f; --ink: #16181d; --mu: #5d6470; --bg2: #f5f6f8; --ft: #1b1b1f; --ftc: #fff; --line: #e6e8ec; --hf: Inter, sans-serif; --bf: Inter, sans-serif; --r: 10px; --b9-ib: #222; }
html { background: #fff; }
body, p, li, a, input, select, textarea, button, .nav > li > a, .button { font-family: var(--bf) !important; }
h1, h2, h3, h4, .b9-h { font-family: var(--hf) !important; color: var(--ink); }
h1 a, h2 a, h3 a, h4 a { font-family: inherit !important; color: inherit; }
.b9-ic { width: 1em; height: 1em; display: inline-block; vertical-align: -.14em; flex: none; }
.b9-w { max-width: 1240px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; width: 100%; }
.b9-sec .section-content, .b9-sec .row { max-width: none; }
/* Tiêu đề khối + "Xem tất cả" */
.b9-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 0 0 22px; }
.b9-hd h2 { flex: 0 1 auto; width: auto; min-width: 0; margin: 0; font-size: 34px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
.b9-hd p { margin: 6px 0 0; color: var(--mu); font-size: 16px; }
.b9-all { flex: none; color: var(--c1t, var(--c1)) !important; font-weight: 600; font-size: 15px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.b9-all:hover { text-decoration: underline; }
/* Nút */
a.b9-btn, .b9-btn, a.b9-btn-o, .b9-btn-o, a.b9-btn-w, .b9-btn-w { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; border-radius: var(--rb, 6px); font-weight: 600; font-size: 15px; line-height: 1.1; text-transform: none; letter-spacing: 0; cursor: pointer; transition: background .2s, color .2s, border-color .2s; box-sizing: border-box; white-space: nowrap; text-decoration: none; }
a.b9-btn, .b9-btn { background: var(--c1); color: var(--c1on, #fff) !important; border: 1.5px solid var(--c1); }
a.b9-btn:hover, .b9-btn:hover { background: var(--c1d); border-color: var(--c1d); }
a.b9-btn-o, .b9-btn-o { background: #fff; color: var(--c1t, var(--c1)) !important; border: 1.5px solid var(--c1); }
a.b9-btn-o:hover, .b9-btn-o:hover { background: var(--c1); color: var(--c1on, #fff) !important; }
a.b9-btn-w, .b9-btn-w { background: transparent; color: #fff !important; border: 1.5px solid rgba(255,255,255,.85); }
a.b9-btn-w:hover, .b9-btn-w:hover { background: #fff; color: var(--ink) !important; }
.b9-btn .b9-ic, .b9-btn-o .b9-ic, .b9-btn-w .b9-ic, .b9-more .b9-ic, .b9-all .b9-ic { width: 16px; height: 16px; }
/* Thẻ SP */
.b9-pc { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; height: 100%; box-sizing: border-box; }
.b9-pc-img { display: block; overflow: hidden; aspect-ratio: var(--pc-ar, 1 / 1); background: var(--pc-bg, #fff); padding: var(--pc-pad, 10px); box-sizing: border-box; }
.b9-pc-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.b9-pc-b { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.b9-pc-cat { color: var(--mu); font-size: 13px; margin-bottom: 4px; }
.b9-pc-t { font-size: 16px; line-height: 1.35; font-weight: 600; margin: 0 0 6px; font-family: var(--bf) !important; }
.b9-pc-t a { color: var(--ink); }
.b9-pc-p { color: var(--c1t, var(--c1)); font-weight: 700; font-size: 18px; margin-bottom: 14px; }
.b9-pc-p .amount, .b9-pc-p bdi { color: inherit; font-weight: inherit; }
.b9-pc-p del { color: #9aa0a8; font-weight: 400; font-size: 14px; margin-right: 6px; }
.b9-pc-p ins { text-decoration: none; }
.b9-pc-ct { font-size: 15px; }
.b9-pc-btn { margin-top: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.b9-pc-btn a { min-height: 38px; padding: 0 8px; font-size: 13.5px; }
.b9-pc-btn a.added { display: inline-flex; }
.b9-pc-btn .added_to_cart { display: none !important; }
/* Thẻ bài */
.b9-po { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; height: 100%; display: flex; flex-direction: column; box-sizing: border-box; }
.b9-po-img { display: block; aspect-ratio: var(--po-ar, 16 / 8.5); overflow: hidden; }
.b9-po-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.b9-po:hover .b9-po-img img { transform: scale(1.03); }
.b9-po-b { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.b9-po-tag { align-self: flex-start; background: var(--c1); color: var(--c1on, #fff); font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 4px; margin-bottom: 10px; }
.b9-po-t { font-size: 18px; line-height: 1.35; margin: 0 0 8px; font-weight: 700; }
.b9-po-t a { color: var(--ink); }
.b9-po-e { color: var(--mu); font-size: 14.5px; line-height: 1.55; margin-bottom: 12px; }
.b9-more { margin-top: auto; color: var(--c1t, var(--c1)) !important; font-weight: 600; font-size: 14.5px; display: inline-flex; align-items: center; gap: 6px; }
/* Lưới */
.b9-g { display: grid; gap: var(--gap, 20px); grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.b9-g > * { min-width: 0; }
/* Footer */
.b9-ft { background: var(--ft); color: var(--ftc); }
.b9-ft-in { max-width: 1240px; margin: 0 auto; padding: 44px 20px 30px; display: grid; grid-template-columns: 1.35fr 1fr 1.3fr 1fr; gap: 36px; box-sizing: border-box; }
.b9-ft-logo img { height: var(--ftlogo, 60px); width: auto; display: block; }
.b9-ft-desc { margin-top: 16px; font-size: 16px; line-height: 1.6; opacity: .85; max-width: 300px; }
.b9-ft-h { font-weight: 700; font-size: 18.5px; margin-bottom: 14px; color: var(--ftc); }
.b9-ft ul { list-style: none; margin: 0; padding: 0; }
.b9-ft li { margin: 0 0 10px; font-size: 16.5px; line-height: 1.5; }
.b9-ft a { color: var(--ftc) !important; opacity: .88; }
.b9-ft a:hover { opacity: 1; text-decoration: underline; }
.b9-ft-ct li { display: flex; gap: 10px; align-items: flex-start; }
.b9-ft-ct .b9-ic { width: 18px; height: 18px; margin-top: 2px; }
.b9-ft-ct a, .b9-ft-ct span { overflow-wrap: anywhere; }
.b9-ft-soc li a { display: inline-flex; align-items: center; gap: 10px; }
.b9-ft-soc .b9-ic { width: 28px; height: 28px; color: #fff; --b9-ib: var(--ft); }
.b9-ft-soc-row { display: flex; gap: 12px; }
.b9-ft-copy { border-top: 1px solid rgba(255,255,255,.14); max-width: 1200px; margin: 0 auto; text-align: center; font-size: 13.5px; padding: 16px 20px 20px; opacity: .8; }
#footer .absolute-footer { display: none !important; }
/* Header chung */
.header-nav-main > li > a { white-space: nowrap; }
#logo { margin: 0 !important; top: 0 !important; }
#logo a { top: 0 !important; margin: 0 !important; }
.header-wrapper { box-shadow: none; }
/* Form tĩnh */
.b9-form input, .b9-form select, .b9-form textarea { width: 100%; height: 44px; border: 1px solid var(--line); border-radius: 6px; padding: 0 14px; font-size: 14.5px; box-shadow: none; margin: 0; background: #fff; color: var(--ink); box-sizing: border-box; }
.b9-form textarea { height: 84px; padding: 10px 14px; }
.b9-form label { font-size: 13.5px; font-weight: 500; margin: 0 0 6px; display: block; color: inherit; }
.b9-form-msg { font-size: 14px; margin-top: 8px; }
@media (max-width: 849px) {
  .b9-hd h2 { font-size: 26px; }
  .b9-hd { margin-bottom: 16px; }
  .b9-g { grid-template-columns: repeat(var(--nm, 2), minmax(0, 1fr)); gap: 12px; }
  .b9-ft-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px 18px; padding: 34px 16px 22px; }
  .b9-ft-brand { grid-column: 1 / -1; }
  .b9-pc-btn { grid-template-columns: minmax(0, 1fr); }
  .b9-pc-b { padding: 12px; }
  .b9-pc-t { font-size: 14.5px; }
  .b9-pc-p { font-size: 16px; margin-bottom: 10px; }
}
@media (max-width: 480px) { .b9-ft-in { grid-template-columns: minmax(0, 1fr); } }
/* chặn CSS footer/list của theme con cũ (agency3: dải gradient trên footer, li::before mũi tên, logo bị ép rộng) */
#footer.footer-wrapper { background: none !important; padding: 0 !important; margin: 0 !important; border: 0 !important; }
#footer.footer-wrapper::before, #footer.footer-wrapper::after { display: none !important; content: none !important; }
.b9-ft li::before, .b9-ft li::after { display: none !important; content: none !important; }
.b9-ft li { list-style: none !important; padding: 0 !important; }
.b9-ft-logo img { width: auto !important; max-width: 100% !important; height: var(--ftlogo, 60px) !important; object-fit: contain; object-position: left center; }
.b9-form button, .b9-btn, .b9-btn-o { text-transform: none !important; letter-spacing: 0 !important; }
.b9-form select { -webkit-appearance: none; appearance: none; padding-right: 36px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 16px 16px !important; }
/* ===== CANH ĐỀU / GỌN NHƯ MOCKUP (10-11, LESSONS 371 — kiểm _layout_check.py) =====
   1. Section dựng [row][col span 12]: Flatsome để .col padding-bottom 30px -> MỌI băng thừa 30px đáy (band_bloat dưới > trên). */
.section[class*="-sec"] > .section-content > .row > .col.large-12, .section[class*="b9i"] > .section-content > .row > .col.large-12 { padding-bottom: 0; }
@media (min-width: 850px) { /* hàng 2-3 cột cạnh nhau (6+6, 4+4+4): padding đáy 30px chỉ để xếp dọc ở mobile */
  .section[class*="-sec"] > .section-content > .row:not(:has(> .col:nth-child(4))) > .col, .section[class*="b9i"] > .section-content > .row:not(:has(> .col:nth-child(4))) > .col { padding-bottom: 0; } }
.section[class*="-sec"] > .section-content > .row, .section[class*="b9i"] > .section-content > .row { margin-bottom: 0; }
/* 2. form Flatsome margin-bottom 1.3em -> hàng CTA chữ | form lệch tâm dọc (row_misalign). */
form.b9-form, .b9-form { margin-bottom: 0; }
.b9-form .b9-form-msg:empty { display: none; margin: 0; }
/* 3. Header MỘT hàng: logo | menu | nút cùng tâm dọc, không rớt dòng (header_wrap). Hàng chật thì site giảm khoảng menu, KHÔNG để nút xuống dòng. */
.header-main .header-inner { flex-wrap: nowrap !important; align-items: center; }
.header-main .flex-col { align-items: center; }
.header-main .header-nav { flex-wrap: nowrap !important; align-items: center; margin-top: 0 !important; margin-bottom: 0 !important; }
.header-main .header-nav > li { margin-top: 0; margin-bottom: 0; }
.header-main .header-nav > li > a { line-height: 1.2; padding-top: 0; padding-bottom: 0; }
.header-main .header-button .button, .header-main .html .b9-btn { margin: 0 !important; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; line-height: 1.1; }
#logo { display: flex; align-items: center; }
/* 4. Icon cạnh chữ (liên hệ footer, ý cam kết): tâm icon = tâm dòng đầu (uneven_items ±3px). */
.b9-ft-ct li { align-items: flex-start; }
.b9-ft-ct li .b9-ic { margin-top: calc((1.5em - 18px) / 2); }
.b9-ft-soc li a { align-items: center; }
/* 5. Icon MXH footer THEO MOCKUP: glyph trắng đơn sắc (mặc định) hoặc huy hiệu MÀU thương hiệu (b9_cfg soc_color=1 -> ul.b9-soc-color;
   _canh/apply.py đặt từ _new10_spec/<site>-cfg.json "canh": {"soc_color": 1}). Người dùng 10-11 (edukid/gaubong): mockup màu mà dựng trắng = "trắng nhợt". */
.b9-ft-soc.b9-soc-color .b9-ic-fb { color: #1877f2; --b9-ib: #fff; }
.b9-ft-soc.b9-soc-color .b9-ic-yt { color: #ff0033; --b9-ib: #fff; }
.b9-ft-soc.b9-soc-color .b9-ic-zalo { color: #0068ff; --b9-ib: #fff; }
.b9-ft-soc.b9-soc-color .b9-ic-tt { color: #fff; background: #111; border-radius: 50%; padding: 4px; box-sizing: border-box; filter: drop-shadow(1px 0 0 #25f4ee) drop-shadow(-1px 0 0 #fe2c55); }
.b9-ft-soc.b9-soc-color .b9-ic-ig { color: #fff; background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); border-radius: 8px; padding: 3px; box-sizing: border-box; }
/* 6. Ảnh thẻ bài/ảnh có người: khung ngang hẹp mà cover giữa ảnh -> cắt đầu (person_cut, người dùng 10-11 hocvothuat). Lấy lệch lên 30%. */
.b9-po-img img { object-position: 50% 30%; }
/* 7. Footer GỌN theo mockup (người dùng 10-11: footer cao/thưa hơn mockup ở mọi site): đệm 30/18, dòng cách 6, bản quyền 10/12 */
.b9-ft-in { padding: 30px 20px 18px; }
.b9-ft li { margin-bottom: 6px; }
.b9-ft-h { margin-bottom: 10px; }
.b9-ft-desc { margin-top: 10px; line-height: 1.5; }
.b9-ft-copy { padding: 10px 20px 12px; }