/* =============================================================================
   SMOCARD BNI — lop bo sung cho the loai the BNI (bang GAINS 2.0).

   Dung y nguyen he giao dien cua the thuong: bien --c-*, chu Inter, cac lop
   sc-*. File nay chi them cach trinh bay cho nhung khoi ma the thuong khong co.

   Mot net rieng duy nhat: chu cai G-A-I-N-S lam dau moi phan. Do khong phai
   trang tri — nguoi trong BNI nhin chu cai la biet ngay dang doc muc nao, va
   no la ly do bang nay ton tai.

   File chi duoc tai khi the thuoc the loai BNI.
   ============================================================================= */

/* -------------------------------------------------------------------------
   0. Bo mau BNI
   -------------------------------------------------------------------------
   The BNI dung bo nhan dien cua BNI chu khong dung bo mau cua mau giao dien
   chu the chon. Ly do: tam the nay di ra ngoai voi tu cach mot thanh vien BNI
   — mot the mau tim hay mau xanh la mang chu "BNI" thi nguoi trong hoi nhin ra
   ngay la khong dung, va do la thu duy nhat ho de y.

   Do BNI: #CF2030. Chu trang tren nen do nay dat 5.39:1, qua nguong doc de.

   Nen giu MOT sac xam trung tinh (do + trang + xam la ba mau cua BNI), va co
   tinh de --c-background khac --c-surface-container-lowest mot bac: hai nhom
   khoi "khoe" va "tra cuu" cua trang the phan biet nhau bang dung hai bien do,
   dat bang nhau la ca viec phan nhom thanh vo nghia.

   KHONG dat lai --c-radius-card va --c-shadow-card: hai bien do van lay tu mau
   giao dien, nen chu the doi mau van thay hinh dang trang doi. Chi mau la co
   dinh.

   Khai o body.bni, dat SAU smocard-templates.css trong Index.cshtml: cung do
   uu tien voi body.tpl-*, thang nho dung sau. *@
   ------------------------------------------------------------------------- */

body.bni {
    --c-background: #f6f6f7;
    --c-on-background: #16161a;

    --c-surface: #f6f6f7;
    --c-surface-dim: #e2e2e5;
    --c-surface-bright: #ffffff;
    --c-surface-variant: #ededee;
    --c-surface-tint: #cf2030;
    --c-surface-container-lowest: #ffffff;
    --c-surface-container-low: #fafafa;
    --c-surface-container: #f2f2f3;
    --c-surface-container-high: #ebebec;
    --c-surface-container-highest: #e4e4e6;

    --c-on-surface: #16161a;
    --c-on-surface-variant: #4b4b53;

    --c-primary: #cf2030;
    --c-on-primary: #ffffff;
    --c-primary-container: #b21b29;
    --c-on-primary-container: #ffe3e5;
    --c-primary-fixed: #fde7e9;
    --c-primary-fixed-dim: #f6c5ca;
    --c-inverse-primary: #f6c5ca;

    --c-secondary: #4b4b53;
    --c-on-secondary: #ffffff;
    --c-secondary-container: #e4e4e6;
    --c-on-secondary-container: #3a3a41;
    --c-secondary-fixed: #e4e4e6;
    --c-secondary-fixed-dim: #c9c9cd;

    --c-tertiary: #8f1420;
    --c-on-tertiary: #ffffff;
    --c-tertiary-container: #b21b29;
    --c-on-tertiary-container: #ffe3e5;
    --c-tertiary-fixed: #fde7e9;
    --c-tertiary-fixed-dim: #f6c5ca;

    --c-outline: #7a7a83;
    --c-outline-variant: #dcdce0;

    --c-inverse-surface: #2a2a2f;
    --c-inverse-on-surface: #f2f2f3;
}

/* Nut "Goi dien" van giu xanh la kieu he dieu hanh (xem --c-call trong
   public-card.css): y nghia "goi dien" gan voi thoi quen dien thoai chu khong
   phai voi thuong hieu, doi no sang do la mat cai do. */

/* -------------------------------------------------------------------------
   1. Dau moi phan
   -------------------------------------------------------------------------
   Truoc day moi phan la mot o do 42px co do bong, cong mot dong tieng Anh viet
   hoa gian chu .14em. Xep nam phan lien nhau thi thanh nam mang do to bang
   nhau, khong cai nao la chinh, va dong tieng Anh — thu chi de doi chieu —
   lai keu hon ca ten muc.

   Gio: dau nho lai, bo do bong, dong tieng Anh giam xuong mot bac va mot duong
   ke mong dat duoi ca cum. Duong ke lam viec ma cai o to tung lam: no noi
   "phan moi bat dau tu day", nhung khong tranh cho voi noi dung.
   ------------------------------------------------------------------------- */

.bni-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 13px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--c-outline-variant);
}

.bni-letter {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--c-primary);
    color: var(--c-on-primary);
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.01em;
}
/* Dau muc khong thuoc bo GAINS: gach do doc, dung nguyen kich thuoc cua
   .sc-title (3x17px, cach chu 9px) nen no thang hang voi moi khoi khac cua
   site. Truoc day cho nay la mot o vuong dung bieu tuong — thanh loai dau muc
   THU BA tren cung mot trang, canh chu cai GAINS va gach do cua cac khoi
   chung. */
.bni-head--gach .bni-title {
    display: flex;
    align-items: center;
    gap: 9px;
}
.bni-head--gach .bni-title::before {
    content: '';
    flex: none;
    width: 3px;
    height: 17px;
    border-radius: 2px;
    background: var(--c-primary);
}
/* Dong tieng Anh thut vao cho bang chu, khong bang gach. */
.bni-head--gach .bni-title-en { padding-left: 12px; }

.bni-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--c-on-surface);
}
.bni-title-en {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    /* KHONG dung --c-outline: bien do danh cho duong ke. O co chu 11px tren nen
       trang no chi dat 3.94:1, duoi nguong 4.5:1 — do duoc bang trinh duyet
       tren chinh trang nay. Chu nho va nhat la thu dau tien bien mat ngoai
       nang, ma day lai la tam the nguoi ta mo giua buoi gap. */
    color: var(--c-on-surface-variant);
}

/* -------------------------------------------------------------------------
   2. Danh sach — MOT kieu duy nhat cho moi khoi
   -------------------------------------------------------------------------
   Truoc day ba kieu khac nhau nam tren cung mot tam the: muc tieu / ky nang la
   danh sach co duong doc va cham tron; dich vu la moi dong mot the rieng co
   bong; khach hang muc tieu la the chua nhan do chua hop xam — ba lop long
   nhau, dung kieu long hop ma trang the thuong da phai bo mot lan.

   Gio tat ca la mot: mot khung trang, cac dong ngan cach bang duong ke toc.
   Dau dong la mot o vuong do nho — vuong chu khong tron, de an theo net goc
   canh cua chu BNI.
   ------------------------------------------------------------------------- */

/* Danh sach de PHANG tren nen trang, khong khung.

   Mot tam the BNI co tren muoi khoi. Cho moi khoi mot khung trang co vien va
   bong thi cuon xuong la mot chuoi hop giong het nhau, mat khong co cho nghi va
   khong khoi nao la chinh — do la cai "roi" ma nguoi dung noi. Chu cai GAINS da
   la moc dieu huong roi, khung chi them mot lop vien nua quanh no.

   Khung chi con danh cho khoi TRA CUU (bang thanh vien, doanh nghiep): o do
   khung co viec that la gom mot bang so lieu lai. */
.bni-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bni-item {
    display: flex;
    gap: 11px;
    padding: 9px 0;
}

.bni-item-mark {
    flex: none;
    width: 6px;
    height: 6px;
    /* Canh theo DONG CHU dau tien chu khong theo giua o: dong hai chu va dong
       ba chu phai co dau ngang nhau. */
    margin-top: .62em;
    border-radius: 2px;
    background: var(--c-primary);
}

/* Anh minh hoa cua mot dong (dich vu), dat vao cho cua dau vuong do.

   Khong keo anh bang le am cho thang hang voi cac dong chi co dau vuong: lam
   the la anh tran ra ngoai le trai cua ca trang. Trong MOT khoi thi hoac moi
   dong deu co anh, hoac deu khong — le khac nhau giua hai KHOI la binh thuong,
   le so le trong cung mot khoi moi la loi. */
.bni-item-anh {
    flex: none;
    width: 40px;
    height: 40px;
    margin-top: 1px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--c-surface-container);
}

.bni-line-text {
    display: block;
    font-size: var(--t-body);
    line-height: 1.5;
    font-weight: 600;
    color: var(--c-on-surface);
}
.bni-line-note {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 400;
    color: var(--c-on-surface-variant);
}

/* -------------------------------------------------------------------------
   3. Dai BNI + bang thong tin thanh vien
   ------------------------------------------------------------------------- */

.bni-stamp {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    margin-bottom: 14px;
    border-radius: var(--c-radius-card);
    background: var(--c-primary-fixed);
    border: 1px solid var(--c-primary-fixed-dim);
}
.bni-stamp-mark {
    flex: none;
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--c-primary);
    color: var(--c-on-primary);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .08em;
}
.bni-stamp-chapter {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--c-on-surface);
}
.bni-stamp-date {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--c-on-surface-variant);
}

.bni-panels { display: flex; flex-direction: column; gap: 12px; }
/* Cung mot khung voi .bni-list: truoc day panel dung .sc-card nen ra nen xam,
   nam ngay canh cac danh sach nen trang — hai loai nen cho cung mot vai tro. */
.bni-panel {
    padding: 14px 15px 13px;
    background: var(--c-surface-container-lowest);
    border: 1px solid var(--c-outline-variant);
    border-radius: var(--c-radius-card);
    box-shadow: var(--c-shadow-card);
}
.bni-panel-head {
    display: block;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--c-primary);
}

.bni-facts { margin: 0; padding: 0; list-style: none; }

/* Dong chi co mot cot chu (chang duong truoc day) — van la mot .bni-fact de
   an theo duong ke toc cua bang, nhung xep ngang voi dau vuong do. */
.bni-fact--dong {
    display: flex;
    align-items: flex-start;
    /* Phai ghi de justify-content cua .bni-fact. Luat goc dat space-between de
       day nhan sang trai va gia tri sang phai; o dong mot cot thi no day phan
       CHU sang tan mep phai — dong ngan bi day nhieu, dong dai chiem het chieu
       ngang nen khong nhuc nhich, va ket qua la cac dong so le nhau. */
    justify-content: flex-start;
    gap: 11px;
    font-size: var(--t-sm);
    line-height: 1.55;
    color: var(--c-on-surface);
}
/* Chu chiem het cho con lai — khong thi dong ngan van co the bi keo gian. */
.bni-fact--dong > :last-child { flex: 1 1 auto; }
.bni-fact--dong .bni-item-mark { margin-top: .55em; }
.bni-fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    border-top: 1px solid var(--c-outline-variant);
}
.bni-fact:first-child { border-top: 0; padding-top: 0; }
.bni-fact dt {
    flex: none;
    font-size: var(--t-label);
    color: var(--c-on-surface-variant);
}
.bni-fact dd {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    text-align: right;
    color: var(--c-on-surface);
    overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------
   4. Khach hang muc tieu
   -------------------------------------------------------------------------
   Ten nhom truoc day la mot vien thuoc do dac nam BEN TRONG the, va cac muc
   lai la nhung hop xam ben trong nua — ba lop hop long nhau cho mot danh sach
   hai dong. Gio ten nhom la mot dong chu do nho dat NGOAI khung, con cac muc
   dung chung .bni-list nhu moi khoi khac.
   ------------------------------------------------------------------------- */

.bni-groups { display: flex; flex-direction: column; gap: 16px; }

.bni-group-name {
    display: block;
    margin: 0 0 7px 2px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-primary);
}

/* -------------------------------------------------------------------------
   5. San pham / Dich vu
   -------------------------------------------------------------------------
   Dung chung .bni-list. Truoc day moi dich vu la mot the rieng co vien va bong,
   nen mot the co bon dich vu thanh bon khoi noi nhau — nang hon han phan Muc
   tieu ngay ben tren no, trong khi hai phan quan trong ngang nhau.
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   6. Danh tinh + loi moi gioi thieu
   ------------------------------------------------------------------------- */

.bni-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--c-primary);
    color: var(--c-on-primary);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    vertical-align: middle;
}
.bni-chapter {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--c-primary-fixed);
    font-size: var(--t-label);
    font-weight: 600;
    color: var(--c-primary);
}

.bni-referral {
    padding: 24px 18px 20px;
    text-align: center;
    border-radius: var(--c-radius-card);
    background: var(--c-primary-fixed);
    border: 1px solid var(--c-primary-fixed-dim);
}
.bni-referral-mark {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--c-primary);
    color: var(--c-on-primary);
}
.bni-referral-text {
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--c-on-surface);
}

/* -------------------------------------------------------------------------
   7. Chuyen dong
   ------------------------------------------------------------------------- */

/* Cac dong hien lan luot chu khong cung mot luc: mat doc theo dung thu tu
   thay vi bi ca khoi dap vao. */
.pm-reveal-on .bni-item[data-reveal] { transition-duration: .45s; }
.pm-reveal-on .bni-item:nth-child(2)[data-reveal] { transition-delay: .05s; }
.pm-reveal-on .bni-item:nth-child(3)[data-reveal] { transition-delay: .10s; }
.pm-reveal-on .bni-item:nth-child(4)[data-reveal] { transition-delay: .15s; }
.pm-reveal-on .bni-item:nth-child(5)[data-reveal] { transition-delay: .20s; }
.pm-reveal-on .bni-item:nth-child(n+6)[data-reveal] { transition-delay: .25s; }

@media (prefers-reduced-motion: reduce) {
    .pm-reveal-on .bni-item[data-reveal] { transition: none; }
}

/* -------------------------------------------------------------------------
   8. Tieu de cac khoi CHUNG tren the BNI
   -------------------------------------------------------------------------
   Tren tam the BNI, khoi cua bang GAINS dung .bni-head (o chu + duong ke duoi)
   con cac khoi dung chung voi the thuong (Mang xa hoi, Con so, Thong tin doanh
   nghiep, Dia chi, Tai lieu) van dung .sc-title voi gach do doc. Hai he tieu de
   khac nhau nam xen ke nhau suot trang, doc xuong thay lien tuc doi nhip.

   Cho .sc-title muon lai duong ke duoi cua .bni-head. Giu gach do doc — do la
   dau nhan cua ca site — nhung nhip thi thanh mot.
   ------------------------------------------------------------------------- */
body.bni .sc-title {
    padding-bottom: 11px;
    border-bottom: 1px solid var(--c-outline-variant);
    margin-bottom: 13px;
}
/* Bang cuon ngang tu lo le hai ben nen duong ke phai keo het chieu ngang khoi. */
body.bni .sc-block--bleed .sc-title {
    margin-right: 20px;
}

/* -------------------------------------------------------------------------
   9. Nhip doc theo tang
   -------------------------------------------------------------------------
   Truoc day moi khoi cach nhau dung mot khoang nhu nhau, nen bay khoi cua bang
   GAINS trong nhu bay muc rieng le khong lien quan gi den nhau — trong khi
   chung la MOT bang. Khoang cach chinh la thu duy nhat noi len dieu do.

   Hai khoi GAINS lien nhau: 24px. Vao hoac ra khoi cum: 40px. Mat doc ra ngay
   dau la mot cum, khong can mot cai khung nao ve quanh no.

   Hai moc 24 / 40 nam trong thang 8px cua ca trang. */
body.bni .sc-anchor.la-gains > .sc-block { padding-top: 24px; padding-bottom: 0; }
body.bni .sc-anchor:not(.la-gains) + .sc-anchor.la-gains > .sc-block { padding-top: 40px; }
body.bni .sc-anchor.la-gains + .sc-anchor:not(.la-gains) > .sc-block { padding-top: 40px; }

/* Khoi thuong nam NGAY TRUOC mot khoi GAINS thi bo dem duoi cua no di: khong
   thi 26px cua no cong 40px cua khoi sau thanh mot khoang 66px, to hon han moi
   khoang khac tren trang va doc ra nhu trang bi thung mot lo. */
body.bni .sc-anchor:not(.la-gains):has(+ .sc-anchor.la-gains) > .sc-block { padding-bottom: 0; }

/* -------------------------------------------------------------------------
   10. Do dung dung cho
   -------------------------------------------------------------------------
   Do BNI dang xuat hien o: o chu GAINS, dau dong, nen icon, con so nang luc,
   ten nhom khach, nut, dai gioi thieu, chip chapter. Cai gi cung do thi khong
   con gi noi bat — dung mau de phan cap la sai ngay tu dau (phan cap la viec
   cua co chu, khoang cach va do dam).

   Giu do cho: chu cai GAINS, dau dong, va nut hanh dong. Nhung cho con lai lui
   ve xam. */
body.bni .sc-stat-value { color: var(--c-on-surface); }