/* =============================================================================
   Trang chu va trang danh sach Tien ich.
   Nap SAU base.css.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding: 74px 0 44px;
  background: url(/assets/landing/banner-trang-chu.jpg);
  background-size: cover;
  background-position: 78% center;
  background-repeat: no-repeat;
  overflow: hidden;
}
/* Man hinh dien thoai: giam khoang cach giua menu va noi dung, sat len hon */
@media (max-width: 560px) { .hero { padding: 28px 0 32px; } }
.hero-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}

.hero-actions { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }

.hero-note {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px;
  font-size: 13.5px; color: var(--ink-2);
}
.hero-note svg { width: 16px; height: 16px; color: var(--green-600); flex: none; }

/* ---------------------------------------------------------------------------
   Dai so lieu
   --------------------------------------------------------------------------- */
.stat-strip {
  position: relative; z-index: 1;
  margin-top: 38px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px) { .stat-strip { grid-template-columns: repeat(4, 1fr); } }
.stat {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 18px 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 700px) { .stat { border-bottom: 0; } .stat:nth-child(4n) { border-right: 0; } }
@media (max-width: 699px) { .stat:nth-child(2n) { border-right: 0; } .stat:nth-last-child(-n+2) { border-bottom: 0; } }
.stat svg { width: 22px; height: 22px; color: var(--green-600); flex: none; margin-top: 2px; }
.stat-value { font-size: 15.5px; font-weight: 700; line-height: 1.25; }
.stat-label { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; line-height: 1.4; }

/* ---------------------------------------------------------------------------
   Luoi the van de (nen xanh dam)
   --------------------------------------------------------------------------- */
.problem-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  margin-top: 34px;
}
@media (min-width: 620px) { .problem-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .problem-grid { grid-template-columns: repeat(4, 1fr); } }
.problem-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  color: var(--ink);
}
.problem-card .icon-badge { margin: 0 auto 12px; }
.problem-card h3 { font-size: 15.5px; font-weight: 680; margin: 0 0 8px; line-height: 1.35; }
.problem-card p { font-size: 13px; color: var(--ink-2); margin: 0; line-height: 1.5; }

/* ---------------------------------------------------------------------------
   Cac buoc
   --------------------------------------------------------------------------- */
.steps {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  margin-top: 34px;
}
@media (min-width: 620px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  position: relative;
  overflow: hidden;
}
.step-card::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--green-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s;
}
.step-card:hover::before { transform: scaleX(1); }
.step-index {
  font-size: 12px; font-weight: 800; letter-spacing: .08em;
  color: var(--green-600);
  margin-bottom: 12px;
}
.step-card h3 { font-size: 16px; font-weight: 680; margin: 0 0 8px; }
.step-card p { font-size: 13.5px; color: var(--ink-2); margin: 0; line-height: 1.55; }

/* ---------------------------------------------------------------------------
   Luoi tien ich — the la mot banner anh 16:9, khong con chu/icon/gach dau
   dong de tren the nua: ten + mo ta da nam san trong chinh anh banner.
   --------------------------------------------------------------------------- */
.module-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin-top: 30px;
}
@media (min-width: 620px) { .module-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }

.module-card {
  position: relative;
  display: block;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  /* Anh banner nen nhat, mau gan voi nen trang: can bong ro ho hon
     --shadow-sm de khung khong bi chim vao nen. */
  box-shadow: var(--shadow);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, border-color .25s;
}
.module-card:hover, .module-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(15, 61, 36, .09), 0 20px 42px rgba(15, 61, 36, .14);
  border-color: var(--green-600);
}
.module-card:focus-visible { outline: 2px solid var(--green-500); outline-offset: 2px; }
.module-card.is-soon { opacity: .55; pointer-events: none; }

.module-banner {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .4s ease;
}
.module-card:hover .module-banner { transform: scale(1.03); }

.module-card.is-soon .pill-soon {
  position: absolute; top: 10px; right: 10px;
}

/* The "sap co them" — mot dai thong bao mong, khong chiem dien tich bang
   banner nua (truoc day la mot o trong to bang the ben canh). */
.module-placeholder {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 14px 20px;
  color: var(--ink-3);
  text-align: center;
}
.module-placeholder p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.module-placeholder svg { width: 20px; height: 20px; flex: none; }

/* ---------------------------------------------------------------------------
   Dai CTA cuoi trang
   --------------------------------------------------------------------------- */
.cta-band {
  background: linear-gradient(135deg, var(--green-800) 0%, var(--green-700) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 40px 30px;
  text-align: center;
  margin-top: 20px;
}
.cta-band h2 { color: #fff; margin: 0 0 10px; }
.cta-band p { color: rgba(255, 255, 255, .84); margin: 0 auto; max-width: 52ch; }
.cta-band .btn { margin-top: 22px; }

/* ---------------------------------------------------------------------------
   Loi vao "tai anh truoc, AI goi y sau"  —  dau trang /tien-ich

   Trang danh muc co mot cho hong co san: khach phai chon tien ich TRUOC khi
   he thong nhin thay anh, ma tien ich nao dung duoc lai phu thuoc vao chinh
   tam anh do. Khoi nay la duong vong cho nguoi chua biet chon gi.
   --------------------------------------------------------------------------- */
.start-band {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding: 20px 22px;
  border: 1px solid var(--green-400);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #f3fbf5 0%, #eaf6ee 100%);
}
.start-band-text { flex: 1 1 300px; min-width: 0; }
.start-band-title {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  color: var(--green-700);
}
.start-band-sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}
.start-band-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}
.start-band-btn svg { width: 18px; height: 18px; }

/* Man hinh hep: nut xuong dong rieng va trai het chieu ngang cho de bam */
@media (max-width: 560px) {
  .start-band { padding: 18px; gap: 14px; }
  .start-band-btn { width: 100%; justify-content: center; }
}

.grid-lead {
  margin: 30px 0 -10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-2);
}

/* --- Trang /tien-ich -----------------------------------------------------------
   Dau trang co anh nen (song xanh + cay) va minh hoa truoc/sau; khoi "Chua biet chon
   cong cu nao?" de len minh hoa. Moi mang mot khung bo tron noi tren nen, mau rieng
   (cung bo mau voi trang chu, xem .bcc-mang--*). The cong cu: chu ben trai, anh ben phai.
   ------------------------------------------------------------------------------ */
/* Anh nen (song xanh + cay) phu ca dau trang va lan xuong sau khung mang dau tien;
   phan duoi anh da duoc lam mo sang mau nen #f5faf2 nen khong co vet cat ngang. */
.dm {
  background:
    url(/assets/landing/tien-ich-nen-2170.jpg) center top / max(100%, 1500px) auto no-repeat,
    linear-gradient(180deg, #f5faf2 0%, #eef6ea 100%);
  padding-bottom: 44px;
}
@media (max-width: 760px) {
  .dm { background-image: url(/assets/landing/tien-ich-nen-1200.jpg), linear-gradient(180deg, #f5faf2 0%, #eef6ea 100%);
        background-size: auto 520px, auto; background-position: 22% top, 0 0; }
}

.dm-hero { position: relative; padding: 44px 0 6px; overflow-x: clip; }
.dm-hero-wrap { position: relative; }
.dm-hero-chu { position: relative; z-index: 1; max-width: 560px; }
.dm-tieu-de { margin: 0; font-size: clamp(30px, 4.4vw, 48px); line-height: 1.1; font-weight: 780; letter-spacing: -.025em; }
.dm-tieu-de span { color: var(--green-600); }
.dm-lead { margin-top: 14px; font-size: 16.5px; line-height: 1.6; max-width: 54ch; }
/* Minh hoa truoc/sau: mo dan o mep de hoa vao anh nen */
.dm-hero-anh {
  position: absolute; z-index: 0; right: 20px; top: -26px;
  width: min(46%, 540px); height: auto;
  pointer-events: none; user-select: none;
  filter: drop-shadow(0 18px 30px rgba(15, 61, 36, .14));
  /* Mo dan o goc (radial) VA o hai mep trai/phai (linear): mang nen xanh trong anh cham
     mep phai, dat sat le thi lo mot duong cat thang dung (ra soat 12/10/2026). */
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 55% 48%, #000 62%, transparent 100%),
                      linear-gradient(90deg, transparent 0, #000 3%, #000 95%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: radial-gradient(ellipse 72% 70% at 55% 48%, #000 62%, transparent 100%),
                      linear-gradient(90deg, transparent 0, #000 3%, #000 95%, transparent 100%);
          mask-composite: intersect;
}

/* Khoi goi y tren dau trang Tien ich: kinh mo trang de len minh hoa */
.dm-hero .start-band {
  position: relative; z-index: 1;
  margin-top: 22px;
  flex-wrap: nowrap; gap: 14px;
  padding: 14px 16px;
  border: 1.5px solid #9fd2a9;
  border-radius: 20px;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(15, 61, 36, .08);
}
.start-band-icon {
  flex: none; width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--green-100); color: var(--green-700);
}
.start-band-icon svg { width: 24px; height: 24px; }
.dm-hero .start-band-title { color: var(--ink); font-size: 16.5px; margin-bottom: 2px; }
.dm-hero .start-band-sub { font-size: 13px; line-height: 1.5; }
.dm-hero .start-band-btn {
  background: linear-gradient(180deg, #22844a 0%, var(--green-700) 100%);
  border-color: var(--green-700);
  box-shadow: 0 8px 18px rgba(26, 102, 56, .26);
  padding: 12px 18px; font-size: 14.5px;
}
.dm-hero .start-band-btn:hover { background: var(--green-800); border-color: var(--green-800); }
.dm-hero .start-band-btn .start-band-tai { width: 19px; height: 19px; }
.dm-hero .grid-lead { margin: 26px 0 18px; color: var(--ink-1); }
/* May tinh (>= 900px): hai cot — chu + thanh goi y ben trai, minh hoa ben phai, mep
   phai minh hoa thang le. Thanh goi y KHONG de len minh hoa (12/10/2026: rong het le
   thi che gan nua anh). */
@media (min-width: 900px) {
  .dm-hero-wrap {
    display: grid; column-gap: 36px; align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
    grid-template-areas: "chu anh" "thanh anh" "lead lead";
    /* Minh hoa cao hon cot chu: phan du don xuong DUOI thanh goi y, thanh nam sat doan mo ta */
    grid-template-rows: auto 1fr auto;
  }
  .dm-hero-chu { grid-area: chu; max-width: none; }
  .dm-hero-anh {
    grid-area: anh; position: static; align-self: center; justify-self: end;
    width: 100%; max-width: 500px; margin-top: -24px;
  }
  .dm-hero .start-band { grid-area: thanh; }
  .dm-hero .grid-lead { grid-area: lead; }
}
/* Man 900–1179px: cot chu hep, minh hoa nho lai; nut tu xuong dong khi khong du cho
   thay vi bop chu thanh cot hep cao vong. */
@media (min-width: 900px) and (max-width: 1179px) {
  .dm-hero-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 37%); column-gap: 28px; }
  .dm-hero .start-band { flex-wrap: wrap; }
  .dm-hero .start-band-text { flex-basis: 240px; }
}

/* Moi mang: mot khung bo tron, mau rieng. Mep khung thang le noi dung chung
   (.wrap: 1180 - 2 x 20), chu ben trong thut vao 28px. */
.mang-khoi {
  position: relative;
  width: calc(100% - 40px); max-width: calc(var(--wrap) - 40px);
  margin: 0 auto 26px;
  padding: 30px 0 34px;
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 2px 6px rgba(15, 61, 36, .04), 0 22px 50px rgba(15, 61, 36, .08);
}
.mang-khoi > .wrap { max-width: none; padding: 0 28px; }
.mang-khoi-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px 24px; flex-wrap: wrap;
}
.mang-khoi-dau { display: flex; align-items: center; gap: 18px; min-width: 0; }
/* the .mang-khoi phia truoc: thang quy tac chung .bcc-mang-icon, .mang-khoi-icon nam phia duoi file */
.mang-khoi .mang-khoi-icon { width: 66px; height: 66px; border-radius: 19px; }
.mang-khoi .mang-khoi-icon svg { width: 31px; height: 31px; }
.mang-khoi-ten { margin: 0; font-size: clamp(26px, 3vw, 38px); font-weight: 780; letter-spacing: -.022em; line-height: 1.12; }
.mang-khoi-sub { margin: 5px 0 0; color: var(--ink-2); font-size: 15.5px; }
.mang-khoi-btn { gap: 8px; padding: 14px 26px; }
.mang-khoi-btn svg { width: 17px; height: 17px; }

/* Luoi the: 3 cot may tinh, 2 cot may tinh bang, 1 cot dien thoai */
.mang-khoi .module-grid { margin-top: 24px; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .mang-khoi .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mang-khoi .module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.dm-the {
  position: relative; overflow: hidden;
  /* Chu rong hon anh: ten cong cu dai ("Bóc tách & dự toán") van giu duoc hai dong */
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center;
  min-height: 172px;
  /* Co chu ten cong cu theo be ngang CHINH the (xem .dm-the-ten) */
  container-type: inline-size;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(15, 61, 36, .05), 0 10px 26px rgba(15, 61, 36, .07);
  color: var(--ink); text-decoration: none;
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s, border-color .2s;
}
.dm-the:hover {
  transform: translateY(-3px);
  border-color: var(--bcc-vien, var(--green-200));
  box-shadow: 0 4px 10px rgba(15, 61, 36, .07), 0 20px 40px var(--bcc-bong, rgba(15, 61, 36, .16));
}
.dm-the:focus-visible { outline: 3px solid var(--bcc-mau-dam, var(--green-600)); outline-offset: 2px; }
.dm-the.is-soon { opacity: .55; pointer-events: none; }
.dm-the.is-soon .pill-soon { position: absolute; top: 10px; right: 10px; }
.dm-the-chu { display: flex; flex-direction: column; align-items: flex-start; padding: 18px 6px 18px 22px; min-width: 0; }
/* The rong 290-460px tuy man hinh: chu co theo the de ten dai nhat ("Bóc tách & dự toán")
   van giu hai dong (the 349px -> 18px, 326px -> 17px). */
.dm-the-ten { display: block; font-size: 17.5px; font-size: clamp(15px, 5.2cqi, 19px); font-weight: 780; line-height: 1.18; letter-spacing: -.012em; }
.dm-the-ten-2 { display: block; color: var(--bcc-mau-dam, var(--green-700)); }
.dm-the-mo-ta { display: block; margin-top: 7px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.dm-the-mui {
  margin-top: 12px;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bcc-nhat, var(--green-50)); color: var(--bcc-mau-dam, var(--green-700));
  transition: transform .15s, background .15s, color .15s;
}
.dm-the-mui svg { width: 17px; height: 17px; }
.dm-the:hover .dm-the-mui { background: var(--bcc-mau-dam, var(--green-700)); color: #fff; transform: translateX(3px); }
.dm-the-anh {
  display: block; width: 100%; height: 100%; max-height: 190px;
  object-fit: contain; object-position: right center;
  padding: 8px 8px 8px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14%);
  transition: transform .35s ease;
}
.dm-the:hover .dm-the-anh { transform: scale(1.03); }
/* Ba cot (>= 1100px): khung mang da chan o be ngang .wrap nen the hep nhat, sat chu vao anh */
@media (min-width: 1100px) { .dm-the-chu { padding-right: 2px; } }

/* Khung cuoi chay sat chan trang, khong de mot khoang nen nhat o giua */
main.dm + .site-footer { margin-top: 0; }

/* May tinh nho / may tinh bang: minh hoa xuong duoi phan chu, khong de len khoi goi y */
@media (max-width: 899px) {
  .dm-hero { padding-top: 34px; }
  .dm-hero-chu { max-width: none; }
  .dm-hero-anh {
    position: static; display: block;
    width: min(100%, 520px); margin: 14px auto 10px;
  }
  .dm-hero .start-band { margin-top: 0; flex-wrap: wrap; }
}
@media (max-width: 619px) {
  .dm-tieu-de { font-size: clamp(28px, 8vw, 34px); }
  .dm-lead { font-size: 15.5px; }
  .dm-hero .start-band { padding: 16px; gap: 12px; }
  .start-band-icon { width: 46px; height: 46px; border-radius: 14px; }
  .start-band-icon svg { width: 24px; height: 24px; }
  .dm-hero .start-band-text { flex: 1 1 0; }
  .dm-hero .start-band-btn { width: 100%; justify-content: center; }
  .mang-khoi { border-radius: 24px; padding: 24px 0 26px; margin-bottom: 16px; }
  .mang-khoi > .wrap { padding: 0 16px; }
  .mang-khoi .mang-khoi-icon { width: 54px; height: 54px; border-radius: 16px; }
  .mang-khoi .mang-khoi-icon svg { width: 26px; height: 26px; }
  .mang-khoi-btn { width: 100%; justify-content: center; }
  .dm-the { min-height: 150px; border-radius: 16px; }
  .dm-the-chu { padding: 14px 4px 14px 16px; }
  .dm-the-ten { font-size: 17px; }
  .dm-the-mo-ta { font-size: 12.5px; }
  .dm-the-mui { width: 34px; height: 34px; margin-top: 10px; }
}
/* Dien thoai: .wrap con le 14px (base.css), khung mang theo dung le do */
@media (max-width: 560px) { .mang-khoi { width: calc(100% - 28px); } }

/* --- Trang chu: "Bo cong cu AI" — dau muc co hinh phac thao, moi mang mot dai ----
   May tinh (>= 1000px): chu + luoi cong cu mot ben, anh minh hoa ben kia; mang giua
   doi ben (.is-dao). Hep hon: xep doc ten mang -> anh -> cong cu -> nut.
   ------------------------------------------------------------------------------ */
/* Mau nhan: xanh la logo buildX #84c03c -> #30783c (ngoi nha), cam #f28e3c (mau cam thuong hieu) */
.bcc { position: relative; overflow: hidden; }
/* Dung chung .wrap voi moi section (le trai/phai thang hang ca trang, 12/10/2026). */

.bcc-dau {
  position: relative;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(214, 236, 214, .7), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, #f9fcf7 35%, #f1f7ed 100%);
}
.bcc-dau-wrap { position: relative; display: flex; align-items: center; min-height: 250px; padding-top: 48px; padding-bottom: 40px; }
.bcc-dau-chu { position: relative; z-index: 1; max-width: min(640px, 55%); }
.bcc-tieu-de { font-size: clamp(28px, 4vw, 44px); line-height: 1.12; letter-spacing: -.022em; }
.bcc-lead { max-width: none; margin-top: 14px; font-size: 16.5px; line-height: 1.65; }
.bcc-lead-dong { display: block; }
/* Hinh phac thao "Tu y tuong den hien thuc": nen trang tri, mo dan sang trai va xuong
   duoi de hoa vao nen; khong nhan chuot, khong doc bang trinh doc man hinh. */
.bcc-phac-thao {
  position: absolute; right: 20px; bottom: 0;
  width: min(52%, 600px); height: auto;
  pointer-events: none; user-select: none;
  /* Mo ca mep TREN: nen anh sang hon nen section, cat thang o tren lo mot duong ngang */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 88%, transparent 100%),
                      linear-gradient(0deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 88%, transparent 100%),
                      linear-gradient(0deg, transparent 0, #000 16%, #000 84%, transparent 100%);
          mask-composite: intersect;
}

/* Moi mang mot dai mau rieng lay tu logo: Noi that xanh la non, Ngoai that cam,
   Boc tach – du toan xanh la dam. Moi dai tu dat bo mau nhan cua no (o vuong bieu
   tuong, bieu tuong the, nut, bong anh) qua cac bien --bcc-* ben duoi.
   Chu tren nen: #17251d / #4d5c53 dat tuong phan >= 5,2:1 tren ca ba nen. */
.bcc-mang { position: relative; padding: 52px 0; }
.bcc-mang--noi-that,
.mang-khoi--noi-that {
  --bcc-mau: #6aaa36;
  --bcc-mau-dam: #3f8a2c;
  --bcc-nhat: #e9f5da;
  --bcc-vien: #c7e3a6;
  --bcc-nut-tren: #4a9631;
  --bcc-nut-duoi: #2f7322;
  --bcc-bong: rgba(63, 138, 44, .28);
  background:
    radial-gradient(560px 380px at 6% 8%, rgba(132, 192, 60, .30), transparent 70%),
    radial-gradient(640px 440px at 96% 96%, rgba(132, 192, 60, .26), transparent 70%),
    linear-gradient(135deg, #f2f9e8 0%, #d8eec2 100%);
}
.bcc-mang--ngoai-that,
.mang-khoi--ngoai-that {
  /* Cam #f28e3c: chu trang tren nen nay chi dat 2,4:1, nen nut cam dung chu nau dam
     (#2b1605, 7,1:1). Net bieu tuong nho dung ban dam hon cung tong mau (#c9661c,
     3,4:1 tren nen the) de con nhin ra. */
  --bcc-mau: #f28e3c;
  --bcc-mau-dam: #c9661c;
  --bcc-o-duoi: #e8802f;
  --bcc-nhat: #fdeedf;
  --bcc-vien: #f8cfa7;
  --bcc-nut-tren: #f5a055;
  --bcc-nut-duoi: #f28e3c;
  --bcc-nut-chu: #2b1605;
  --bcc-bong: rgba(242, 142, 60, .36);
  background:
    radial-gradient(600px 400px at 94% 8%, rgba(242, 142, 60, .26), transparent 70%),
    radial-gradient(560px 400px at 4% 96%, rgba(242, 142, 60, .2), transparent 70%),
    linear-gradient(135deg, #fff8f1 0%, #fce1c9 100%);
}
.bcc-mang--du-toan,
.mang-khoi--du-toan {
  --bcc-mau: #3c8f45;
  --bcc-mau-dam: #23703a;
  --bcc-nhat: #e1f1e3;
  --bcc-vien: #b9dcc0;
  --bcc-nut-tren: #22844a;
  --bcc-nut-duoi: #1a6638;
  --bcc-bong: rgba(26, 102, 56, .3);
  background:
    radial-gradient(580px 400px at 5% 8%, rgba(48, 120, 60, .24), transparent 70%),
    radial-gradient(460px 320px at 96% 94%, rgba(242, 142, 60, .14), transparent 70%),
    linear-gradient(135deg, #ecf6ee 0%, #c9e5cf 100%);
}
/* Dai mau chay sat nhau: mot duong sang mong tach hai dai */
.bcc-mang + .bcc-mang,
.mang-khoi + .mang-khoi { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); }

.bcc-mang-luoi {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "dau" "anh" "cc" "nut";
  gap: 22px;
}
.bcc-mang-dau { grid-area: dau; display: flex; align-items: center; gap: 18px; }
.bcc-anh { grid-area: anh; }
.bcc-cc-luoi { grid-area: cc; }
.bcc-btn { grid-area: nut; }

.bcc-mang-icon,
.mang-khoi-icon {
  flex: none; width: 72px; height: 72px; border-radius: 20px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--bcc-mau, var(--green-500)) 0%, var(--bcc-o-duoi, var(--bcc-mau-dam, var(--green-700))) 100%);
  color: #fff;
  border: 3px solid rgba(255, 255, 255, .85);
  box-shadow: 0 10px 24px var(--bcc-bong, rgba(15, 61, 36, .2));
}
.bcc-mang-icon svg,
.mang-khoi-icon svg { width: 34px; height: 34px; }
.bcc-mang-ten { margin: 0; font-size: clamp(26px, 3vw, 38px); font-weight: 760; letter-spacing: -.02em; line-height: 1.15; }
.bcc-mang-ten a { color: inherit; text-decoration: none; }
.bcc-mang-ten a:hover { color: var(--green-700); }
.bcc-mang-sub { margin: 6px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }

/* Luoi cong cu: hai cot, xep theo COT (cot trai het roi moi sang cot phai) */
.bcc-cc-luoi {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px;
  grid-template-columns: minmax(0, 1fr);
}
.bcc-cc-luoi > li { display: flex; min-width: 0; }
.bcc-cc {
  flex: 1; min-width: 0;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(214, 228, 212, .9);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 61, 36, .04), 0 6px 16px rgba(15, 61, 36, .05);
  color: var(--ink); text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s, background .15s;
}
.bcc-cc:hover { background: #fff; border-color: var(--bcc-vien, var(--green-200)); box-shadow: 0 2px 4px rgba(15, 61, 36, .05), 0 12px 24px rgba(15, 61, 36, .08); transform: translateY(-1px); }
.bcc-cc:focus-visible, .bcc-btn:focus-visible, .bcc-mang-ten a:focus-visible { outline: 3px solid var(--green-400); outline-offset: 2px; }
.bcc-cc.is-soon { opacity: .55; pointer-events: none; }
.bcc-cc-icon {
  flex: none; width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--bcc-nhat, var(--green-50)); color: var(--bcc-mau-dam, var(--green-700));
}
.bcc-cc-icon svg { width: 19px; height: 19px; }
.bcc-cc-chu { min-width: 0; }
.bcc-cc-chu b { display: block; font-size: 14.5px; font-weight: 680; line-height: 1.35; }
.bcc-cc-chu small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.bcc-cc .pill-soon { margin-left: auto; align-self: center; }

.bcc-btn { justify-self: start; padding: 16px 34px; min-width: 270px; font-size: 15.5px; }
.bcc-btn,
.mang-khoi-btn {
  color: var(--bcc-nut-chu, #fff);
  background: linear-gradient(180deg, var(--bcc-nut-tren, #22844a) 0%, var(--bcc-nut-duoi, var(--green-700)) 100%);
  border-color: var(--bcc-nut-duoi, var(--green-700));
  box-shadow: 0 8px 20px var(--bcc-bong, rgba(26, 102, 56, .28));
  text-shadow: 0 1px 1px rgba(0, 0, 0, .12);
}
.bcc-btn:hover,
.mang-khoi-btn:hover { background: var(--bcc-nut-duoi, var(--green-800)); border-color: var(--bcc-nut-duoi, var(--green-800)); color: var(--bcc-nut-chu, #fff); }
/* Nut cam chu toi: bo bong chu (danh cho chu trang) va dam nen hon chut khi re chuot */
.bcc-mang--ngoai-that .bcc-btn, .mang-khoi--ngoai-that .mang-khoi-btn { text-shadow: none; }
.bcc-mang--ngoai-that .bcc-btn:hover, .mang-khoi--ngoai-that .mang-khoi-btn:hover { background: #e8802f; border-color: #e8802f; }
.bcc-btn .btn-icon, .mang-khoi-btn svg { transition: transform .15s; }
.bcc-btn:hover .btn-icon, .mang-khoi-btn:hover svg { transform: translateX(3px); }

.bcc-anh {
  display: block; position: relative;
  border-radius: 26px; overflow: hidden;
  border: 4px solid rgba(255, 255, 255, .9);
  background: #fff;
  box-shadow: 0 2px 6px rgba(15, 61, 36, .06), 0 22px 48px var(--bcc-bong, rgba(15, 61, 36, .14));
  aspect-ratio: 16 / 9;
}
.bcc-anh img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.bcc-anh:hover img { transform: scale(1.025); }

/* May tinh bang ngang / dien thoai lon: luoi cong cu hai cot */
@media (min-width: 560px) {
  .bcc-cc-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(var(--hang, 3), auto); }
}

/* May tinh: hai cot chu | anh, mang giua doi ben */
@media (min-width: 1000px) {
  .bcc-mang { padding: 56px 0; }
  .bcc-mang-luoi {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "dau anh" "cc anh" "nut anh";
    column-gap: 40px; row-gap: 24px;
  }
  .bcc-mang.is-dao .bcc-mang-luoi { grid-template-areas: "anh dau" "anh cc" "anh nut"; }
  .bcc-anh { align-self: center; }
  .bcc-btn { align-self: start; margin-top: 4px; }
}
/* May tinh nho (1000–1199px): chua du cho hai nua bang nhau — chu rong hon de the
   cong cu khong xuong dong ba dong, anh hep lai mot chut. */
@media (min-width: 1000px) and (max-width: 1199px) {
  .bcc-mang-luoi { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); column-gap: 32px; }
  .bcc-mang.is-dao .bcc-mang-luoi { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
}
@media (max-width: 999px) { .bcc-lead-dong { display: inline; } }

/* Hep: dau muc chi co chu, hinh phac thao xuong duoi lam nen mo */
@media (max-width: 759px) {
  .bcc-dau-wrap { display: block; min-height: 0; padding-top: 36px; padding-bottom: 0; }
  .bcc-dau-chu { max-width: none; }
  .bcc-tieu-de { font-size: clamp(27px, 7.4vw, 34px); }
  .bcc-lead { font-size: 15.5px; }
  .bcc-lead-dong { display: inline; }
  .bcc-phac-thao {
    position: static; display: block;
    /* tran het be ngang man hinh, khong phu thuoc le cua .wrap */
    width: 100vw; max-width: none; margin: 8px 0 0 calc(50% - 50vw);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 85%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 85%, transparent 100%);
  }
  .bcc-mang { padding: 36px 0; }
  .bcc-mang-icon { width: 56px; height: 56px; border-radius: 17px; }
  .bcc-mang-icon svg { width: 27px; height: 27px; }
  .bcc-mang-sub { font-size: 14.5px; }
  .bcc-anh { border-radius: 20px; border-width: 3px; }
  .bcc-btn { justify-self: stretch; justify-content: center; }
}