/* Bố cục trang chủ (thêm 02/11/2026) – đi cùng js/ks-layout.js.
   - Khoảng cách trên / dưới mỗi phần đều nhau và gọn hơn (trước 80px + 80px = 160px giữa 2 phần cùng màu).
   - Các phần tô xen kẽ 2 màu nền rõ ràng (trắng / tím nhạt), tràn hết chiều ngang màn hình.
   - Nút "lên đầu trang" nằm trong cụm nút nổi bên phải.
   - Chân trang có biểu tượng điện thoại + email. */

:root{
  --sec-py:clamp(44px,5.2vw,64px);            /* khoảng trống trên = dưới của mọi phần */
  --band-a:rgba(255,255,255,.88);              /* dải trắng */
  --band-b:rgba(232,218,246,.92);              /* dải tím nhạt (đậm hơn #F3EDF8 cũ để phân biệt rõ với trắng) */
  --band-line:#DCC8EE;                         /* đường kẻ mảnh ở ranh giới 2 dải */
}

/* ---------- Nốt nhạc bay: nổi lên TRÊN nền các phần (không bị dải màu che), vẫn nằm dưới thanh menu,
   nút nổi, khung xem ảnh; không bắt chuột nên không cản bấm. ---------- */
body.ks-bg[data-page="home"] .ks-notes{z-index:40}

/* ---------- Dải màu xen kẽ (data-band do js/ks-layout.js gán theo các phần đang hiện) ---------- */
body.ks-bg [data-band]{position:relative;background:var(--band-bg)!important;
  /* tô tràn hết chiều ngang (bóng đổ to); clip-path cắt gọn trên / dưới, không gây thanh cuộn ngang */
  box-shadow:0 0 0 100vmax var(--band-bg);clip-path:inset(0 -100vmax);
  /* đường kẻ mảnh ở mép trên, kéo dài hết chiều ngang */
  border-top:1px solid var(--band-line);border-image:linear-gradient(var(--band-line),var(--band-line)) 1 0 0 0 / 1px 0 0 0 / 0 100vmax}
body.ks-bg [data-band="a"]{--band-bg:var(--band-a)}
body.ks-bg [data-band="b"]{--band-bg:var(--band-b)}
/* phần ngay dưới dải môn học: không kẻ đường (2 phần cùng màu, đi liền nhau) */
body.ks-bg [data-sec="home.subjects"]+[data-band],body.ks-bg .ks-subj[data-band]{border-top:0;border-image:none}
/* dải tím nhạt: thẻ / ô bên trong nền trắng cho nổi */
body.ks-bg [data-band="b"] .gi.ph{background:linear-gradient(135deg,#fff,#F8F3FC)}

/* dải môn học ngay dưới slider: dùng padding thay margin để không hở 1 khe màu nền;
   cho bóng của khung môn học tràn xuống phần dưới (cùng màu) thay vì bị cắt */
.ks-subj{margin-top:0!important;padding-top:18px!important}
body.ks-bg .ks-subj[data-band]{box-shadow:none;clip-path:none}
body.ks-bg .ks-subj[data-band]::before{content:"";position:absolute;top:0;bottom:0;left:-100vmax;right:-100vmax;z-index:-1;background:var(--band-bg);pointer-events:none}
body.ks-bg>div:has(>[data-sec]){overflow-x:clip}   /* nền tràn ngang của dải môn học không tạo thanh cuộn ngang */
@media (max-width:860px){.ks-subj{padding-top:14px!important}}

/* ---------- Khoảng cách đều giữa các phần ---------- */
#hinh-thuc,#khoa-hoc>div,#thue-dan>div,#thu-dan,#trac-nghiem>div,#vi-sao,#khoanh-khac,#gioi-thieu>div,#lien-he,.ks-faq,#uu-dai>div:first-child{
  padding-top:var(--sec-py)!important;padding-bottom:var(--sec-py)!important}
[data-sec="home.intro"]{padding-top:clamp(28px,3.4vw,44px)!important;padding-bottom:var(--sec-py)!important}
/* tiêu đề → nội dung bên dưới: gọn lại một chút, đều nhau ở mọi phần */
#khoa-hoc [data-list="home.courses"],#thue-dan [data-list="home.rent_cards"],#hinh-thuc [data-list="home.modes"]{margin-top:clamp(24px,3.2vw,36px)!important}
.gal{margin-top:clamp(22px,3.2vw,36px)}
@media (max-width:600px){
  .ks-faq{padding-left:16px;padding-right:16px}
}

/* ---------- Nút "lên đầu trang" trong cụm nút nổi ---------- */
.fab .totop.in-fab{position:static;right:auto;bottom:auto!important;width:56px;height:56px;flex:0 0 auto;margin-right:0;box-shadow:0 8px 24px rgba(58,33,80,.35)}
@media (max-width:600px){.fab .totop.in-fab{width:46px;height:46px}}

/* ---------- Chân trang: điện thoại + email ---------- */
.ks-foot-ct{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;margin-top:16px}
.ks-foot-ct a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;text-decoration:none;font-size:16px;font-weight:600;line-height:1.2;overflow-wrap:anywhere}
.ks-foot-ct a:hover{background:rgba(242,183,5,.16);border-color:#F2B705;color:#fff;transform:none}
.ks-foot-ct svg{flex:0 0 auto;color:#F2B705}
@media (max-width:600px){.ks-foot-ct{flex-direction:column;align-items:center;gap:8px}.ks-foot-ct a{font-size:15px}}