/* KHOI CHUNG cho pages/v5khoi.php (PM #523, 26/10/2026). Chi ap cho .k-trang; khong sua site/trang/them/ux.css.
   Kieu khoi: hero, luoi, chip, buoc, anh-chu, gia, sanpham, faq, cta, thongbao, logo. Huong dan: _theme-v5/HUONGDAN-khoi-v5.md */
.v5 .k-nen{background:var(--grey2)}
.v5 .k .sh.k-trai{text-align:left}
.v5 .k .sh.k-trai p{margin-left:0}
.v5 .k-ghi{font-size:14px;color:var(--muted);margin:10px 0 0}
.v5 .k-sau{margin-top:16px;text-align:center}
.v5 .k-sau .acts{justify-content:center}
.v5 .k .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.v5 .k-tel .ico{width:18px;height:18px;margin-right:8px;vertical-align:-3px}

/* hero */
.v5 .kk-hero{padding:26px 0 40px}
.v5 .k-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.v5 .k-hero.k-1c{grid-template-columns:minmax(0,860px)}
.v5 .k-hero-chu{min-width:0}
.v5 .k-nhan{display:inline-block;font:700 13px var(--h);letter-spacing:.06em;text-transform:uppercase;color:var(--brand);background:#e3f1e6;border-radius:999px;padding:5px 12px;margin:0 0 12px}
.v5 .k-hero h1{font-size:46px;line-height:1.06;letter-spacing:-.01em}
.v5 .k-hero h1 em{font-style:normal;color:var(--brand)}
.v5 .k-lead{font-size:18px;color:var(--muted);margin:12px 0 0;max-width:40em}
.v5 .k-hero .hero-y li small{font-size:14px;color:var(--muted);font-weight:400}
.v5 .k-nho{font-size:14px;color:var(--muted);margin:12px 0 0}
.v5 .k-so{list-style:none;margin:0;padding:22px;display:grid;grid-template-columns:1fr 1fr;gap:12px;border-radius:20px;background:linear-gradient(155deg,#0b3b1f 0%,#0f5a2c 100%);box-shadow:0 22px 40px -24px rgba(11,59,31,.55)}
.v5 .k-so li{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px;min-width:0}
.v5 .k-so .ico-o{background:rgba(255,255,255,.1);color:#9be07f;display:block;margin-bottom:10px;padding:8px;border-radius:10px}
.v5 .k-so b{display:block;font:700 24px/1.15 var(--h);color:#fff}
.v5 .k-so span{display:block;font-size:14px;color:#b8cfc0;margin-top:4px}
.v5 .k-anh{margin:0}
.v5 .k-anh img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line);box-shadow:0 18px 36px -20px rgba(11,59,31,.35)}
.v5 .k-anh figcaption{font-size:13px;color:var(--muted);margin-top:6px}

/* luoi the co icon */
.v5 .k-luoi{display:grid;gap:12px}
.v5 .k-luoi>*{min-width:0}
.v5 .k-cot-1{grid-template-columns:1fr}.v5 .k-cot-2{grid-template-columns:repeat(2,1fr)}.v5 .k-cot-3{grid-template-columns:repeat(3,1fr)}
.v5 .k-cot-4{grid-template-columns:repeat(4,1fr)}.v5 .k-cot-5{grid-template-columns:repeat(5,1fr)}.v5 .k-cot-6{grid-template-columns:repeat(6,1fr)}
.v5 .k-nen .val{background:#fff;border-color:var(--line)}
.v5 .k-the h3{font-size:19px}
.v5 .k-the p a{color:var(--brand);font-weight:600}
.v5 a.k-a{color:inherit;display:block}
.v5 a.k-a h3::after{content:"";display:inline-block;width:7px;height:7px;margin-left:8px;border-right:2px solid var(--brand);border-top:2px solid var(--brand);transform:rotate(45deg);vertical-align:2px}

/* chip */
.v5 .k-chip{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.v5 .k-chip li{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;min-width:0}
.v5 .k-chip .ico{color:var(--brand)}
.v5 .k-chip b{font-weight:600;font-size:15px}
.v5 .k-chip span{font-size:13px;color:var(--muted)}
.v5 .k-chip a{color:inherit}

/* buoc */
.v5 .k-buoc .k-bic{display:none}
.v5 .k-buoc.k-ngang{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.v5 .k-buoc.k-n3{grid-template-columns:repeat(3,1fr)}.v5 .k-buoc.k-n4{grid-template-columns:repeat(4,1fr)}
.v5 .k-buoc.k-n5{grid-template-columns:repeat(5,1fr)}.v5 .k-buoc.k-n6{grid-template-columns:repeat(3,1fr)}
.v5 .k-buoc.k-ngang li{background:var(--grey);border-radius:14px;padding:16px;min-width:0}
.v5 .k-nen .k-buoc.k-ngang li{background:#fff;border:1px solid var(--line)}
.v5 .k-buoc b{font-size:18px}
.v5 .k-2c{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.v5 .k-2c>*{min-width:0}
.v5 .k-2c .sh{margin-bottom:16px}
.v5 .k-hop{background:var(--grey2);border:1px solid var(--line);border-radius:16px;padding:22px}
.v5 .k-nen .k-hop{background:#fff}
.v5 .k-hop h3{font-size:20px;margin-bottom:8px}
.v5 .k-hop .k-ghi:first-child{margin-top:0}
.v5 .k-hop .term2{font-size:13px;line-height:1.75}
.v5 .term2 div{white-space:pre-wrap;overflow-wrap:anywhere}
.v5 .k-tick{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.v5 .k-tick li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.v5 .k-tick .ico{color:var(--brand);margin-top:2px}
.v5 .k-tick b{font-weight:600}
.v5 .k-tick a{color:var(--brand);font-weight:600}
.v5 .k-ac{align-items:center}
.v5 .k-dao .k-ac-anh{order:-1}
.v5 .k-ac-chu .k-ghi{font-size:15px}

/* bang gia (moi goi la 1 khoi gia) */
.v5 .k-luoi-gia{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:4px}
.v5 .k-luoi-gia>*{min-width:0}
.v5 .k-luoi-gia.k-n1{grid-template-columns:minmax(0,360px);justify-content:center}
.v5 .k-luoi-gia.k-n2{grid-template-columns:repeat(2,minmax(0,360px));justify-content:center}
.v5 .k-luoi-gia.k-n3{grid-template-columns:repeat(3,1fr)}
.v5 .k-goi ul{list-style:none;padding:0;margin:10px 0 14px;font-size:14px;display:grid;gap:4px}
.v5 .k-goi li{padding-left:16px;position:relative}
.v5 .k-goi li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--leaf)}
.v5 .k-goi.noi ul{color:#d6e5da}
.v5 .k-goi .gia small{display:inline}
.v5 .k-goi .cap{margin-bottom:0}
.v5 .k-goi .tang{display:block;font-size:13px;font-weight:600;color:var(--brand);background:#fff;border-radius:8px;padding:6px 10px;margin:0 0 12px}

/* san pham tu CSDL */
.v5 .k-luoi-sp{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,286px));justify-content:center;gap:12px}
@media (max-width:560px){.v5 .k-luoi-sp{grid-template-columns:1fr}}
.v5 .k-luoi-sp>*{min-width:0}
.v5 .k-luoi-sp .sp h3{font-size:19px}
.v5 .kk-sanpham .k-tick{max-width:900px;margin:18px auto 0;grid-template-columns:1fr 1fr}

/* faq */
.v5 .k-faq{max-width:880px;margin:0 auto;display:grid;gap:8px}
.v5 .k-faq details{background:var(--grey);border-radius:12px}
.v5 .k-nen .k-faq details{background:#fff;border:1px solid var(--line)}
.v5 .k-faq summary{list-style:none;cursor:pointer;position:relative;padding:14px 46px 14px 18px;font:600 17px/1.35 var(--h);color:var(--ink)}
.v5 .k-faq summary::-webkit-details-marker{display:none}
.v5 .k-faq summary::after{content:"";position:absolute;right:20px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(45deg);transition:transform var(--t,220ms)}
.v5 .k-faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.v5 .k-faq summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:12px}
.v5 .k-faq details>div{padding:0 18px 16px;color:var(--muted);font-size:15px}
.v5 .k-faq details>div a{color:var(--brand);font-weight:600}

/* cta */
.v5 .kk-cta{padding:8px 0 48px}
.v5 div.k-cta{display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap;background:#eaf6e4;border:1.5px solid #bfe3ae;border-radius:20px;padding:24px 28px}
.v5 div.k-cta h2{font-size:28px;line-height:1.15;color:var(--deep)}
.v5 div.k-cta p{color:var(--muted);margin:6px 0 0;font-size:16px}
.v5 div.k-cta .acts{margin-top:0}
.v5 div.k-cta .pill-o{background:#fff}

/* thong bao */
.v5 .kk-thongbao{padding:4px 0 8px}
.v5 .k-tb{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0}
.v5 .k-tb-xanh{background:#eaf6e4;border:1.5px solid #bfe3ae;border-radius:14px;padding:12px 18px}
.v5 .k-tb-xanh .tag{background:var(--brand);color:#fff}
.v5 .k-tb .tag{border:1px solid var(--line)}
.v5 .k-tb b{font:600 18px var(--h);color:var(--deep)}
.v5 .k-tb-mt{font-size:14px;color:var(--muted);flex:1 1 240px}
.v5 .k-tb-lk{display:flex;flex-wrap:wrap;gap:6px 14px;margin-left:auto}
.v5 .k-tb-lk a{color:var(--brand);font-weight:600;font-size:14px;text-decoration:underline;text-underline-offset:3px}

/* logo */
.v5 .k-logo{display:flex;flex-wrap:wrap;gap:20px 32px;justify-content:center;align-items:center}
.v5 .k-logo .k-anh img{height:40px;width:auto;border:0;box-shadow:none;border-radius:0}
/* logo anh PNG co le trang (khach hang tieu bieu): thamso class=k-logo-lon (PM #535 b6, 26/10) */
.v5 .k-logo-lon .k-logo .k-anh img{height:72px}
@media (max-width:600px){.v5 .k-logo-lon .k-logo{gap:14px 20px}.v5 .k-logo-lon .k-logo .k-anh img{height:56px}}

@media (max-width:1000px){
  .v5 .k-hero,.v5 .k-2c{grid-template-columns:1fr;gap:24px}
  .v5 .kk-hero{padding-bottom:28px}
  .v5 .k-hero h1{font-size:38px}
  .v5 .k-cot-3,.v5 .k-cot-4,.v5 .k-cot-5,.v5 .k-cot-6,.v5 .k-luoi-gia,.v5 .k-luoi-gia.k-n3{grid-template-columns:1fr 1fr}
  .v5 .k-buoc.k-n4,.v5 .k-buoc.k-n5,.v5 .k-buoc.k-n6,.v5 .k-buoc.k-n3{grid-template-columns:1fr 1fr}
  .v5 .k-dao .k-ac-anh{order:0}
  .v5 .k-tb-lk{margin-left:0}
}
@media (max-width:560px){
  .v5 .k-hero h1{font-size:32px}
  .v5 .k-lead{font-size:16px}
  .v5 .k-cot-2,.v5 .k-cot-3,.v5 .k-cot-4,.v5 .k-cot-5,.v5 .k-cot-6,.v5 .k-luoi-gia,.v5 .k-luoi-gia.k-n2,.v5 .k-luoi-gia.k-n3{grid-template-columns:1fr}
  .v5 .k-buoc.k-ngang,.v5 .k-buoc.k-n3,.v5 .k-buoc.k-n4,.v5 .k-buoc.k-n5,.v5 .k-buoc.k-n6{grid-template-columns:1fr}
  .v5 .kk-sanpham .k-tick{grid-template-columns:1fr}
  .v5 .k-so{padding:14px;gap:8px}
  .v5 .k-so li{padding:12px}
  .v5 .k-so b{font-size:20px}
  .v5 div.k-cta{padding:20px 16px;border-radius:16px}
  .v5 div.k-cta h2{font-size:24px}
  .v5 div.k-cta .acts,.v5 .kk-hero .acts{width:100%;display:grid;grid-template-columns:minmax(0,1fr)}
  .v5 div.k-cta .pill,.v5 .kk-hero .acts .pill{min-height:48px;white-space:normal}
  .v5 .k-so .ico-o{display:none}
  .v5 .k-faq summary{font-size:16px;padding:13px 42px 13px 14px}
  .v5 .k-faq details>div{padding:0 14px 14px}
  .v5 .k-chip{justify-content:flex-start}
}