/* #805 Nhan dien thuong hieu (29/10/2026). Chi nap tren trang co khoi tep:brand (pages/khoi/brand.php).
   Dung token cua site.css (--deep --brand --leaf --ink --muted --grey --grey2 --line); khong sua site/khoi/ux.css. */
.v5 .k-trang h1,.v5 .k-trang h2,.v5 .k-trang h3{text-wrap:balance}
.v5 .k-trang p,.v5 .k-trang figcaption,.v5 .k-trang li{text-wrap:pretty}
.v5 .b-h3{font-size:20px;margin:28px 0 12px}
.v5 .sh+.b-h3{margin-top:4px}
.v5 .b-luoi{display:grid;gap:14px}
.v5 .b-luoi>*{min-width:0}
.v5 .b-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.v5 .b-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.v5 .b-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.v5 .b-5{grid-template-columns:repeat(5,minmax(0,1fr))}

/* the hinh: vung xem + chu thich */
.v5 .b-the{margin:0;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.v5 .b-xem{display:grid;place-items:center;min-height:148px;padding:28px 22px}
.v5 .b-xem img{display:block;max-width:100%;height:auto}
.v5 .b-nho .b-xem{min-height:136px}
.v5 .b-nho .b-xem img{width:auto;height:64px}
.v5 .b-sang{background:#fff}
.v5 .b-xam{background:var(--grey2)}
.v5 .b-toi{background:var(--deep)}
.v5 .b-the figcaption{padding:14px 16px 16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:3px;font-size:14px;line-height:1.5;color:var(--muted);flex:1}
.v5 .b-the figcaption b{font:600 18px/1.25 var(--h);color:var(--ink)}
.v5 .b-tai{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:10px}
.v5 .b-tai a{font-weight:600;font-size:13px;line-height:1;color:var(--brand);border:1px solid var(--line);border-radius:999px;padding:7px 12px;white-space:nowrap}
.v5 .b-tai a:hover{border-color:var(--brand);background:var(--grey2)}
.v5 .b-quy{max-width:760px;margin:22px auto 0}

/* khoang trong + co nho nhat */
.v5 .b-kt{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:18px;align-items:start}
.v5 .b-so-do{margin:0;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px}
.v5 .b-so-do img{display:block;width:100%;height:auto}
.v5 .b-so-do figcaption{font-size:14px;color:var(--muted);margin-top:12px}
.v5 .b-kt-ben{display:grid;gap:12px}
.v5 .b-kt-ben .k-tick{margin-top:6px}
.v5 .b-co{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.v5 .b-co-xem{flex:0 0 132px;height:56px;display:grid;place-items:center;background:var(--grey2);border-radius:10px}
.v5 .b-co-xem img{display:block}
.v5 .b-co p{margin:0;display:flex;flex-direction:column;font-size:14px;color:var(--muted)}
.v5 .b-co b{font:600 18px/1.25 var(--h);color:var(--ink)}

/* nen anh: minh hoa bang chuyen mau (khong dung anh cua ben thu ba) */
.v5 .b-anh-toi{background:radial-gradient(120% 90% at 18% 12%,#4d6a57 0,rgba(77,106,87,0) 55%),radial-gradient(90% 80% at 88% 92%,#18241d 0,rgba(24,36,29,0) 60%),linear-gradient(160deg,#2c3d33,#111c16)}
.v5 .b-anh-sang{background:radial-gradient(circle at 16% 28%,#d3e3d8 0 16%,rgba(0,0,0,0) 17%),radial-gradient(circle at 74% 70%,#b9cfc1 0 20%,rgba(0,0,0,0) 21%),repeating-linear-gradient(60deg,#e8f0ea 0 14px,#cddbd2 14px 28px)}
.v5 .b-tam{display:block;background:#fff;border-radius:10px;padding:14px 18px}
.v5 .b-tam img{width:150px}

/* nen / khong nen: hieu ung CSS dat len chinh tep logo that */
.v5 .b-ds .b-xem{min-height:128px;padding:22px 16px}
.v5 .b-ds .b-xem img{width:170px}
/* SVG trong <img> luon giu ti le (preserveAspectRatio) -> keo gian bang transform */
.v5 .b-ds .b-gian img{transform:scale(1.22,.62)}
.v5 .b-doimau img{filter:hue-rotate(170deg) saturate(1.6)}
.v5 .b-bong{background:#fff}
.v5 .b-bong img{filter:drop-shadow(3px 4px 2px rgba(0,0,0,.45)) drop-shadow(0 0 5px rgba(74,160,0,.7))}
.v5 .b-roi{background:radial-gradient(circle at 30% 40%,#4aa000 0 12%,rgba(0,0,0,0) 13%),radial-gradient(circle at 78% 62%,#0b3b1f 0 14%,rgba(0,0,0,0) 15%),repeating-linear-gradient(135deg,#087c2b 0 7px,#eaf4e3 7px 14px,#0b3b1f 14px 20px)}
.v5 .b-nhan{display:inline-flex;align-items:center;gap:5px;font-weight:600;font-size:13px;color:var(--brand);margin-bottom:2px}
.v5 .b-nhan.b-sai{color:#b42318}

/* mau: o bam de chep */
.v5 .b-mau-luoi{grid-template-columns:repeat(4,minmax(0,1fr))}
.v5 .b-mau{font:inherit;color:inherit;text-align:left;background:#fff;border:1px solid var(--line);border-radius:14px;padding:0;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;min-width:0;transition:border-color var(--t,220ms) ease,box-shadow var(--t,220ms) ease}
.v5 .b-mau:hover{border-color:var(--brand);box-shadow:var(--bong-1,none)}
.v5 .b-o{display:block;height:84px}
.v5 .b-o-vien{border-bottom:1px solid var(--line)}
.v5 .b-ten{display:flex;flex-direction:column;gap:1px;padding:12px 14px 14px;font-size:13px;line-height:1.5;color:var(--muted);flex:1}
.v5 .b-ten b{font:600 17px/1.25 var(--h);color:var(--ink)}
.v5 .b-hex{font-size:16px;font-weight:600;color:var(--ink);letter-spacing:.02em;margin-top:2px}
.v5 .b-phu{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.v5 .b-goi{margin-top:6px;font-weight:600;color:var(--brand)}
.v5 .b-mau.da-chep{border-color:var(--leaf)}
.v5 .b-an{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* kieu chu */
.v5 .b-chu{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px}
.v5 .b-chu p{margin:0}
.v5 .b-chu-ten{font:600 24px/1.2 var(--h);color:var(--ink)}
.v5 .b-chu-ten-p{font-family:"Be Vietnam Pro","BVP Fallback",sans-serif;font-size:22px}
.v5 .b-chu-vai{font-size:14px;color:var(--muted);margin-top:2px!important}
.v5 .b-chu-h{font:600 40px/1.08 var(--h);color:var(--ink);margin:18px 0 14px!important}
.v5 .b-chu-p{font-size:18px;line-height:1.6;margin:18px 0 14px!important}
.v5 .b-chu-bang{font-size:15px;line-height:1.7;color:var(--muted);letter-spacing:.02em;overflow-wrap:anywhere}
.v5 .b-chu-bang-h{font-family:var(--h);font-size:18px;font-weight:500}
.v5 .b-can{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px!important;font-size:15px;color:var(--ink)}
.v5 .b-can-h{font-family:var(--h);font-size:18px}

@media (max-width:1000px){
  .v5 .b-3,.v5 .b-4,.v5 .b-5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v5 .b-kt{grid-template-columns:1fr}
  .v5 .b-mau-luoi{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .v5 .b-2,.v5 .b-3,.v5 .b-4,.v5 .b-5{grid-template-columns:1fr}
  .v5 .b-nho{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v5 .b-nho .b-xem{min-height:112px;padding:20px 12px}
  .v5 .b-nho .b-xem img{height:52px}
  .v5 .b-mau-luoi{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .v5 .b-o{height:64px}
  .v5 .b-ten{padding:10px 11px 12px}
  .v5 .b-so-do{padding:14px}
  .v5 .b-chu{padding:18px}
  .v5 .b-chu-h{font-size:32px}
  .v5 .b-xem{min-height:120px}
}
@media (prefers-reduced-motion:reduce){.v5 .b-mau{transition:none}}