/* ============================================================
 * bright.css — LỚP PHỦ giao diện SÁNG cho mohinhlai.com
 * Nạp SAU app.css nên được phép ghi đè. KHÔNG sửa app.css.
 *
 * Phong cách đích (giống bộ ảnh mạng xã hội + banner YouTube):
 *   - Nền sáng gradient + 2 vầng radial rất nhạt
 *   - Khối cầu 3D (đỏ san hô / xanh / vàng) là dấu hiệu nhận diện
 *   - Thẻ trắng bo lớn, shadow mềm
 *   - Tiêu đề rất đậm, một cụm từ tô gradient
 *   - Nút chính gradient xanh, bo tròn viên thuốc
 *
 * Nguyên tắc an toàn:
 *   - Mọi khối cầu đều pointer-events:none, z-index:0, nằm trong
 *     LỀ TRỐNG hai bên (ngoài .container) nhờ calc(50% - Npx),
 *     nên KHÔNG BAO GIỜ đè lên chữ.
 *   - Khối bọc có overflow:hidden để khối cầu không gây tràn ngang.
 *   - Nội dung luôn được nâng lên z-index:1.
 * ============================================================ */

/* ---------- 1. Biến màu: chuyển bảng màu sang tông sáng ---------- */
:root {
  --paper:       #F6FAFF;
  --surface:     #EDF4FF;
  --ink:         #0E2246;
  --ink-soft:    #5A6B87;
  --line:        rgba(29, 95, 214, .10);
  --accent:      #1D5FD6;
  --accent-dark: #123F96;
  --accent-soft: #E8F0FE;
  --amber:       #EC3A5F;
  --amber-soft:  #FFF1EC;
  --radius:      16px;
  --shadow:      0 22px 44px rgba(18, 63, 150, .13), inset 0 2px 0 rgba(255, 255, 255, .9);

  /* Gradient nền sáng dùng lại nhiều nơi */
  --bright-bg:   linear-gradient(168deg, #FBFDFF 0%, #EEF5FF 52%, #E7F0FF 100%);
  --card-shadow: 0 22px 44px rgba(18, 63, 150, .13), inset 0 2px 0 rgba(255, 255, 255, .9);
  --card-line:   1px solid rgba(29, 95, 214, .07);
}

/* Chặn tràn ngang toàn trang. Dùng clip (không phải hidden) để
   header position:sticky vẫn hoạt động bình thường. */
html { overflow-x: clip; }

body {
  background-color: #F6FAFF;
  background-image:
    radial-gradient(58rem 34rem at 96% 0%,  rgba(221, 235, 255, .85), rgba(221, 235, 255, 0) 62%),
    radial-gradient(50rem 32rem at 2% 100%, rgba(227, 246, 255, .90), rgba(227, 246, 255, 0) 64%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #0E2246;
}

/* ---------- 2. Chữ ---------- */
h1 { font-weight: 800; letter-spacing: -.035em; color: #0E2246; }
h2 { font-weight: 800; letter-spacing: -.03em;  color: #0E2246; }
h3 { font-weight: 700; letter-spacing: -.015em; color: #0E2246; }
.muted { color: #5A6B87; }
.crumbs, .crumbs a { color: #7C8CA6; }
.art-meta { color: #7C8CA6; }

/* Cụm từ tô gradient trong tiêu đề */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero .hero-slider .hl,
  .grad-blue {
    background: linear-gradient(120deg, #2F7BF6, #22D3EE);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* ---------- 3. Nhãn nhỏ dạng viên thuốc (nền vàng nhạt) ---------- */
.eyebrow,
.hero .eyebrow {
  display: inline-block;
  /* .card là flex column nên con trực tiếp bị kéo giãn hết bề ngang —
     hai dòng dưới giữ cho nhãn chỉ ôm vừa chữ */
  align-self: flex-start;
  max-width: max-content;
  margin-bottom: 1rem;
  padding: .34rem .9rem;
  border-radius: 999px;
  background: linear-gradient(120deg, #FFE9C2, #FFD79B);
  color: #B23A00;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .09em;
  box-shadow: 0 6px 14px rgba(240, 140, 27, .20), inset 0 1px 0 rgba(255, 255, 255, .8);
}

.pill {
  border-radius: 999px;
  padding: .22rem .72rem;
  font-weight: 700;
  background: linear-gradient(120deg, #E8F0FE, #DCEBFF);
  color: #123F96;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
.pill:hover { background: linear-gradient(135deg, #3B8BFF, #1D5FD6); color: #fff; }
.pill.amber { background: linear-gradient(120deg, #FFE9C2, #FFD79B); color: #B23A00; }
.pill.amber:hover { background: linear-gradient(135deg, #FFB020, #F08C1B); color: #fff; }

/* ---------- 4. Khối cầu 3D — dấu hiệu nhận diện ---------- */
/* Khung chung cho mọi khối cầu */
.hero::before, .hero::after,
.hero-visual::before,
.pagehead::before, .pagehead::after,
.section.alt::before, .section.alt::after,
.cta-band::before, .cta-band::after,
.site-footer::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Đỏ san hô */
.hero::before,
.hero-visual::before,
.cta-band::before {
  background: radial-gradient(circle at 32% 28%, #FFA48F, #FF5A5F 46%, #EC3A5F);
  box-shadow:
    0 46px 90px rgba(255, 90, 95, .30),
    inset -22px -26px 60px rgba(150, 20, 50, .32),
    inset 20px 22px 46px rgba(255, 255, 255, .42);
}
/* Xanh */
.hero::after,
.section.alt::after,
.site-footer::before {
  background: radial-gradient(circle at 34% 30%, #9BDBFF, #4FC3F7 48%, #2F7BF6);
  box-shadow:
    0 46px 90px rgba(47, 123, 246, .28),
    inset -22px -26px 60px rgba(12, 50, 120, .32),
    inset 20px 22px 46px rgba(255, 255, 255, .45);
}
/* Vàng */
.pagehead::after,
.section.alt::before,
.cta-band::after {
  background: radial-gradient(circle at 34% 30%, #FFE1A3, #FFB020 52%, #F08C1B);
  box-shadow:
    0 46px 90px rgba(240, 140, 27, .28),
    inset -22px -26px 60px rgba(150, 80, 10, .30),
    inset 20px 22px 46px rgba(255, 255, 255, .50);
}
/* Xanh nhạt phụ ở đầu trang con */
.pagehead::before {
  background: radial-gradient(circle at 34% 30%, #9BDBFF, #4FC3F7 48%, #2F7BF6);
  box-shadow:
    0 40px 80px rgba(47, 123, 246, .26),
    inset -18px -20px 46px rgba(12, 50, 120, .30),
    inset 16px 18px 36px rgba(255, 255, 255, .45);
}

/* .container rộng tối đa 72rem = 1152px, nên lề trống mỗi bên là
   calc(50% - 576px). Đặt khối cầu HOÀN TOÀN trong lề trống đó:
   cầu size S, chừa 16px  ->  offset = calc(50% - (592 + S)px).
   Khi màn hình hẹp, giá trị âm lớn đẩy cầu ra ngoài và bị
   overflow:hidden cắt đi — tự động ẩn, không cần media query. */

/* ---------- 5. Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 4.4rem 0 4rem;
  border-bottom: 1px solid rgba(29, 95, 214, .08);
  background:
    radial-gradient(38rem 26rem at 90% 4%,  rgba(221, 235, 255, .95), rgba(221, 235, 255, 0) 60%),
    radial-gradient(34rem 24rem at 2% 98%,  rgba(227, 246, 255, .95), rgba(227, 246, 255, 0) 62%),
    var(--bright-bg);
}
.hero > .container { position: relative; z-index: 1; }

/* Cầu đỏ san hô — lề phải phía trên */
.hero::before {
  width: 280px; height: 280px;
  right: calc(50% - 872px);
  top: 34px;
}
/* Cầu xanh — lề trái phía dưới */
.hero::after {
  width: 260px; height: 260px;
  left: calc(50% - 852px);
  bottom: 34px;
}

.hero h1 { color: #0E2246; font-weight: 800; letter-spacing: -.038em; }
.hero .lede { color: #5A6B87; }
.hero-note { color: #5A6B87; }
.hero .slider-dots button { background: rgba(29, 95, 214, .20); }
.hero .slider-dots button.on { background: linear-gradient(90deg, #3B8BFF, #1D5FD6); }

/* Nút phụ trong hero: nền trắng, viền mảnh (app.css để trắng-trên-navy) */
.hero .btn-ghost {
  background: #fff;
  border-color: rgba(29, 95, 214, .16);
  color: #123F96;
  box-shadow: 0 10px 22px rgba(18, 63, 150, .10), inset 0 2px 0 rgba(255, 255, 255, .9);
}
.hero .btn-ghost:hover { background: #F5F9FF; border-color: rgba(29, 95, 214, .34); }

/* ---------- 6. Cột phải hero: thẻ "lai" + thẻ nổi ---------- */
.hero-visual { position: relative; z-index: 1; }
/* Cầu đỏ nhỏ nấp sau góc dưới-trái của thẻ — luôn nằm dưới thẻ.
   Khe giữa hai cột là 2.5rem (40px) nên lấn trái tối đa 30px là
   vẫn nằm gọn trong khe, không bao giờ chạm chữ ở cột bên trái. */
.hero-visual::before {
  width: 124px; height: 124px;
  left: -30px; bottom: -46px;
  box-shadow:
    0 26px 48px rgba(255, 90, 95, .26),
    inset -12px -14px 28px rgba(150, 20, 50, .32),
    inset 10px 12px 22px rgba(255, 255, 255, .42);
}

.hero .lai-card,
.lai-card {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: #fff;
  border: var(--card-line);
  border-radius: 26px;
  box-shadow: var(--card-shadow);
}
.lai-card .half.old { background: linear-gradient(135deg, #FFF3EE, #FFE6DF); }
.lai-card .half.new { background: linear-gradient(135deg, #EDF4FF, #DCEBFF); }
.lai-card .old h4 { color: #C23B2B; }
.lai-card .new h4 { color: #123F96; }
.lai-card .join { color: #93A6C6; background: #fff; }

.mini-card {
  z-index: 3;
  border-radius: 16px;
  padding: .62rem 1.05rem;
  background: rgba(255, 255, 255, .97);
  border: var(--card-line);
  box-shadow: 0 18px 34px rgba(18, 63, 150, .16), inset 0 2px 0 rgba(255, 255, 255, .95);
}
.mini-card b { color: #123F96; }
.mini-card span { color: #5A6B87; }

/* ---------- 7. Header ---------- */
.site-header {
  background: rgba(250, 252, 255, .88);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(29, 95, 214, .10);
}
.brand { color: #0E2246; }
.nav a { color: #5A6B87; }
.nav a:hover, .nav a.on { color: #123F96; border-bottom-color: #2F7BF6; }
.tel { color: #0E2246; }
.lang-switch .lang { color: #7C8CA6; }
.lang-switch .lang.on { background: linear-gradient(120deg, #E8F0FE, #DCEBFF); color: #123F96; }
.lang-switch a.lang:hover { background: #EDF4FF; color: #123F96; }

/* ---------- 8. Nút ---------- */
.btn {
  border-radius: 999px;
  font-weight: 700;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-primary {
  background: linear-gradient(135deg, #3B8BFF 0%, #1D5FD6 55%, #123F96 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 12px 26px rgba(29, 95, 214, .30), inset 0 2px 0 rgba(255, 255, 255, .26);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #4B96FF 0%, #2468DE 55%, #164AAE 100%);
  box-shadow: 0 16px 32px rgba(29, 95, 214, .36), inset 0 2px 0 rgba(255, 255, 255, .28);
  transform: translateY(-1px);
}
.btn-ghost {
  background: #fff;
  border-color: rgba(29, 95, 214, .16);
  color: #123F96;
  box-shadow: 0 10px 22px rgba(18, 63, 150, .10), inset 0 2px 0 rgba(255, 255, 255, .9);
}
.btn-ghost:hover { background: #fff; border-color: rgba(29, 95, 214, .34); transform: translateY(-1px); }
.btn-big { padding: .95rem 2rem; font-size: 1.05rem; }

/* ---------- 9. Thẻ ---------- */
.card,
.form-card,
.faq details {
  background: #fff;
  border: var(--card-line);
  border-radius: 24px;
  box-shadow: var(--card-shadow);
}
.card {
  padding: 1.6rem;
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 58px rgba(18, 63, 150, .17), inset 0 2px 0 rgba(255, 255, 255, .9);
}
.card h3 a { color: #0E2246; }
.card h3 a:hover { color: #1D5FD6; }
.card .price { color: #123F96; font-weight: 800; }
.card .rep { color: #7C8CA6; }

.callout {
  background: #fff;
  border: var(--card-line);
  border-left: 4px solid #FF5A5F;
  border-radius: 18px;
  box-shadow: 0 16px 32px rgba(18, 63, 150, .10), inset 0 2px 0 rgba(255, 255, 255, .9);
  padding: 1.1rem 1.3rem;
}

.faq summary { color: #0E2246; padding: 1rem 1.15rem; }
.faq details p { color: #5A6B87; }

.prose blockquote { border-left: 4px solid #2F7BF6; color: #0E2246; }
.prose figure img { border-radius: 20px; box-shadow: 0 18px 36px rgba(18, 63, 150, .13); }
.prose figcaption { color: #7C8CA6; }

/* ---------- 10. Bảng giá ---------- */
.price-card.featured {
  border: 2px solid rgba(47, 123, 246, .40);
  box-shadow: 0 32px 60px rgba(18, 63, 150, .18), inset 0 2px 0 rgba(255, 255, 255, .95);
}
.price-card .badge {
  background: linear-gradient(135deg, #FF7A5C, #EC3A5F);
  box-shadow: 0 8px 18px rgba(236, 58, 95, .32);
  padding: .2rem .8rem;
}
.price-card .amount { color: #123F96; font-weight: 800; }

/* ---------- 11. Biểu mẫu ---------- */
.form-card { border-radius: 26px; padding: 2rem; }
.form-row label { color: #0E2246; }
.form-row input, .form-row select, .form-row textarea {
  background: #F7FAFF;
  border: 1px solid rgba(29, 95, 214, .14);
  border-radius: 14px;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: 2px solid #2F7BF6;
  border-color: #2F7BF6;
  background: #fff;
}
.form-ok {
  background: linear-gradient(120deg, #E8F0FE, #DCEBFF);
  border: 1px solid rgba(29, 95, 214, .20);
  border-radius: 16px;
  color: #123F96;
}

/* ---------- 12. Ảnh bài viết ---------- */
.art-thumb img {
  border-radius: 18px;
  border: 1px solid rgba(29, 95, 214, .08);
  box-shadow: 0 16px 30px rgba(18, 63, 150, .12);
}

/* ---------- 13. Đầu trang con (.pagehead) ---------- */
.pagehead {
  position: relative;
  overflow: hidden;
  padding: 3.4rem 0 2.2rem;
  border-bottom: 1px solid rgba(29, 95, 214, .08);
  background:
    radial-gradient(34rem 22rem at 94% 0%, rgba(221, 235, 255, .9), rgba(221, 235, 255, 0) 62%),
    var(--bright-bg);
}
.pagehead > .container { position: relative; z-index: 1; }
.pagehead h1 { color: #0E2246; }
.pagehead .lede { color: #5A6B87; }
/* Cầu vàng lề phải, cầu xanh nhỏ lề trái */
.pagehead::after {
  width: 170px; height: 170px;
  right: calc(50% - 762px);
  top: 28px;
}
.pagehead::before {
  width: 108px; height: 108px;
  left: calc(50% - 700px);
  bottom: 26px;
}

/* ---------- 14. Section ---------- */
.section { position: relative; overflow: hidden; }
.section > .container { position: relative; z-index: 1; }
.section.alt {
  background: var(--bright-bg);
  border-top: 1px solid rgba(29, 95, 214, .08);
  border-bottom: 1px solid rgba(29, 95, 214, .08);
}
.section.alt::before {
  width: 240px; height: 240px;
  left: calc(50% - 832px);
  top: 4rem;
}
.section.alt::after {
  width: 190px; height: 190px;
  right: calc(50% - 782px);
  bottom: 4rem;
}
.section-head h2 { color: #0E2246; }

/* ---------- 15. Dải kêu gọi hành động ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  padding: 3.2rem 0;
  background: linear-gradient(135deg, #3B8BFF 0%, #1D5FD6 46%, #123F96 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
.cta-band > .container { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #DCE8F5; }
.cta-band .btn {
  background: #fff;
  color: #123F96;
  border-color: transparent;
  box-shadow: 0 14px 30px rgba(4, 26, 70, .28), inset 0 2px 0 rgba(255, 255, 255, .9);
}
.cta-band .btn:hover { background: #F2F7FF; transform: translateY(-1px); }
.cta-band::before {
  width: 180px; height: 180px;
  right: calc(50% - 772px);
  top: 50%; margin-top: -90px;
}
.cta-band::after {
  width: 124px; height: 124px;
  left: calc(50% - 716px);
  bottom: 26px;
}

/* ---------- 16. Chân trang sáng ---------- */
.site-footer {
  position: relative;
  overflow: hidden;
  margin-top: 0;
  padding: 3rem 0 1.6rem;
  color: #5A6B87;
  border-top: 1px solid rgba(29, 95, 214, .10);
  background:
    radial-gradient(38rem 24rem at 96% 0%, rgba(221, 235, 255, .9), rgba(221, 235, 255, 0) 62%),
    linear-gradient(168deg, #F4F8FF 0%, #E9F1FF 58%, #E2ECFF 100%);
}
.site-footer > .container { position: relative; z-index: 1; }
.site-footer::before {
  width: 210px; height: 210px;
  left: calc(50% - 802px);
  bottom: 44px;
}
.foot-brand { color: #0E2246; }
.foot-desc { color: #5A6B87; }
.foot-contact a { color: #123F96; font-weight: 600; }
.foot-h { color: #0E2246; }
.site-footer nav a { color: #5A6B87; }
.site-footer nav a:hover { color: #123F96; }
.foot-legal { border-top: 1px solid rgba(29, 95, 214, .12); color: #7C8CA6; }

/* Giữ nguyên hàng nút mạng xã hội, chỉ làm mềm bóng đổ cho hợp nền sáng */
.soc { box-shadow: 0 10px 22px rgba(18, 63, 150, .20), inset 0 2px 0 rgba(255, 255, 255, .26); }
.fb-follow { box-shadow: 0 12px 24px rgba(29, 95, 214, .26), inset 0 2px 0 rgba(255, 255, 255, .28); }

/* ---------- 17. Khi hero xếp một cột (≤900px) ---------- */
/* Chuyển quả cầu nhỏ sang góc dưới-phải, chỉ lấn 16px vào phần đệm
   20px của .container nên không bao giờ tràn ngang. */
@media (max-width: 900px) {
  .hero-visual::before {
    width: 116px; height: 116px;
    left: auto; right: -16px; bottom: -16px;
  }
}

/* ---------- 17b. Máy tính bảng ---------- */
@media (max-width: 768px) {
  .hero { padding: 2.6rem 0 2.4rem; }
  .hero h1 { letter-spacing: -.03em; }
  .pagehead { padding: 2.2rem 0 1.5rem; }
  .card { padding: 1.3rem; border-radius: 20px; }
  .card:hover { transform: none; }
  .form-card { padding: 1.4rem; border-radius: 22px; }
  .btn-big { padding: .85rem 1.5rem; font-size: 1rem; }
  .cta-band { padding: 2.4rem 0; }
  .site-footer { padding: 2.4rem 0 1.4rem; }

  /* Thu nhỏ khối cầu: chỉ còn một quả nhỏ nấp sau thẻ bên phải,
     lấn tối đa 14px vào phần đệm 20px của .container -> không tràn ngang */
  .hero-visual::before {
    width: 104px; height: 104px;
    left: auto; right: -14px; bottom: -14px;
    box-shadow:
      0 20px 38px rgba(255, 90, 95, .26),
      inset -10px -12px 24px rgba(150, 20, 50, .32),
      inset 9px 10px 18px rgba(255, 255, 255, .42);
  }
  /* Các khối cầu lề đã tự nằm ngoài màn hình, ẩn hẳn cho chắc */
  .hero::before, .hero::after,
  .pagehead::before, .pagehead::after,
  .section.alt::before, .section.alt::after,
  .cta-band::before, .cta-band::after,
  .site-footer::before { display: none; }
}

/* ---------- 18. Điện thoại ---------- */
@media (max-width: 430px) {
  .container { padding: 0 1rem; }

  /* Header: gom vừa một hàng, không để tràn ngang ở 390px */
  .nav-row { gap: .55rem; }
  .brand { font-size: 1rem; gap: .35rem; }
  .brand img { width: 27px; height: 27px; }
  .nav-cta { gap: .35rem; }
  .nav-cta .btn { padding: .45rem .75rem; font-size: .82rem; }
  .lang-switch { gap: .05rem; }
  .lang-switch .lang { font-size: .66rem; padding: .14rem .26rem; }

  .hero { padding: 2rem 0 2.2rem; }
  .hero h1 { font-size: clamp(1.7rem, 8.2vw, 2.1rem); }
  .eyebrow, .hero .eyebrow { font-size: .66rem; padding: .3rem .75rem; margin-bottom: .8rem; }
  .hero .lede { font-size: 1rem; }
  .hero-visual::before { width: 84px; height: 84px; right: -12px; bottom: -12px; }
  .card { padding: 1.15rem; border-radius: 18px; }
  .lai-card { border-radius: 20px; }
  .cta-band { padding: 2rem 0; }
}

/* ---------- 19. Tôn trọng thiết lập giảm chuyển động ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn, .card { transition: none; }
  .btn-primary:hover, .btn-ghost:hover, .card:hover, .cta-band .btn:hover { transform: none; }
}