/* 25/10: phong chu du phong co size-adjust gan bang Be Vietnam Pro / Barlow Semi Condensed -> khi web font tai xong
   (display=swap) chu khong doi do rong nhieu, giam dich chuyen bo cuc (CLS). Ti le do tren Arial. */
@font-face{font-family:"BVP Fallback";src:local("Arial"),local("Helvetica"),local("Roboto");size-adjust:106%}
@font-face{font-family:"Barlow Fallback";src:local("Arial"),local("Helvetica"),local("Roboto");size-adjust:82%}
:root{
  --deep:#0b3b1f; --brand:#087c2b; /* 25/10: #0a8a2f -> #087c2b de chu trang/xanh dat tuong phan 4.5:1 */ --leaf:#4aa000; --ink:#1b2620; --muted:#55625a;
  --grey:#eef2ef; --grey2:#f6f8f6; --line:#dfe6e1; --bg:#fff;
  --h:"Barlow Semi Condensed","Barlow Fallback","Be Vietnam Pro","BVP Fallback",sans-serif;
}
.v5 *{box-sizing:border-box}
.v5{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 "Be Vietnam Pro","BVP Fallback",system-ui,sans-serif;font-variant-numeric:tabular-nums}
.v5 a{color:inherit;text-decoration:none}
.v5 :focus-visible{outline:2px solid var(--leaf);outline-offset:2px}
.v5 .wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.v5 h1,.v5 h2,.v5 h3{font-family:var(--h);font-weight:600;letter-spacing:-.005em;margin:0;color:var(--ink)}
.v5 .pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:11px 22px;font:600 15px/1 "Be Vietnam Pro","BVP Fallback",sans-serif;white-space:nowrap;cursor:pointer;border:1.5px solid transparent}
.v5 .pill-g{background:var(--brand);color:#fff}.v5 .pill-g:hover{background:var(--deep)}
.v5 .pill-o{border-color:var(--brand);color:var(--brand)}.v5 .pill-o:hover{background:var(--grey2)}
.v5 .lnk{color:var(--brand);font-weight:600;font-size:15px;display:inline-flex;gap:6px;align-items:center}
.v5 .lnk::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg)}

/* header */
.v5 .top .wrap{height:64px;display:flex;align-items:center;gap:48px}
.v5 .logo img{height:30px;width:auto;display:block}
.v5 .menu{display:flex;gap:30px;font-size:15px}
.v5 .menu a:hover{color:var(--brand)}
.v5 .tp{margin-left:auto;display:flex;align-items:center;gap:18px}
.v5 .ic{display:grid;place-items:center;width:34px;height:34px;color:var(--ink)}
.v5 .ic:hover{color:var(--brand)}
.v5 .tp .pill{padding:9px 18px;font-size:14px}
.v5 .ham{display:none;background:none;border:0}

/* thong bao */
.v5 .bar{background:var(--brand);color:#fff}
.v5 .bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:12px;padding-bottom:12px}
.v5 .bar b{font-family:var(--h);font-size:20px;font-weight:600}
.v5 .bar .pill{background:#fff;color:var(--brand)}

/* hero */
.v5 .hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding-top:40px;padding-bottom:36px}
.v5 .kicker{font-family:var(--h);font-size:18px;font-weight:600;margin-bottom:6px}
.v5 .hero h1{font-size:52px;line-height:1.04;letter-spacing:-.01em}
.v5 .hero h1 em{font-style:normal;color:var(--brand)}
.v5 .hero p{font-size:17px;color:var(--muted);margin:14px 0 20px;max-width:32em}
.v5 .hero .acts{display:flex;gap:12px;flex-wrap:wrap}
.v5 .hero svg.ve{width:100%;max-width:400px;justify-self:end}

/* 3 muc - panel xam kieu digicert */
.v5 .panel{background:var(--grey);border-radius:16px;display:grid;grid-template-columns:repeat(3,1fr)}
.v5 .panel>a{padding:20px 24px;display:flex;flex-direction:column;gap:6px}
.v5 .panel>a+a{border-left:1px solid var(--line)}
.v5 .panel .lv{font-family:var(--h);font-weight:700;font-size:15px;color:var(--brand);letter-spacing:.02em}
.v5 .panel h2,.v5 .panel h3{font-size:22px}
.v5 .panel p{margin:0;color:var(--muted);font-size:15px}
.v5 .panel .gia{font-family:var(--h);font-size:26px;font-weight:700;margin:8px 0 4px}
.v5 .panel .gia small{font:500 14px "Be Vietnam Pro","BVP Fallback",sans-serif;color:var(--muted)}
.v5 .panel>a:hover h2,.v5 .panel>a:hover h3{color:var(--brand)}

/* chuoi tin cay */
.v5 .chain{background:var(--grey2);margin-top:40px}
.v5 .chain .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center;padding-top:44px;padding-bottom:44px}
.v5 .chain h2{font-size:34px;line-height:1.1}
.v5 .chain p{color:var(--muted);font-size:16px;margin:10px 0 18px}
.v5 .tree{display:grid;gap:0;justify-items:center}
.v5 .tree .n{width:100%;max-width:470px;background:#fff;border-radius:14px;padding:12px 18px;display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:center;box-shadow:0 1px 0 var(--line)}
.v5 .tree .n .b{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;font:700 13px var(--h)}
.v5 .tree .n small{display:block;color:var(--muted);font-size:13px}
.v5 .tree .n b{font-family:var(--h);font-size:20px;font-weight:600;line-height:1.2}
.v5 .tree .n.ta{outline:3px solid var(--brand);outline-offset:-3px}
.v5 .tree .ln{width:3px;height:18px;background:var(--brand);opacity:.35}

/* dong san pham muassl */
.v5 .sec{padding:48px 0}
.v5 .sh{text-align:center;margin-bottom:22px}
.v5 .sh h2{font-size:34px;line-height:1.1}
.v5 .sh p{color:var(--muted);margin:6px auto 0;font-size:16px;max-width:52em}
.v5 .tabs{display:flex;justify-content:center;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.v5 .tabs button{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:8px 18px;font:500 15px "Be Vietnam Pro","BVP Fallback",sans-serif;color:var(--ink);cursor:pointer}
.v5 .tabs button[aria-pressed=true]{border-color:var(--brand);background:var(--brand);color:#fff}
.v5 .lineup{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.v5 .sp{background:var(--grey);border-radius:14px;padding:18px 20px;display:flex;flex-direction:column}
.v5 .sp .lv{font:700 13px var(--h);color:var(--brand);letter-spacing:.03em}
.v5 .sp h3{font-size:21px;margin:2px 0}
.v5 .sp .pv{color:var(--muted);font-size:14px}
.v5 .sp .gia{font:700 24px var(--h);margin:12px 0 2px}
.v5 .sp .gia small{font:500 13px "Be Vietnam Pro","BVP Fallback",sans-serif;color:var(--muted)}
.v5 .sp .cap{font-size:14px;color:var(--muted);margin-bottom:12px}
.v5 .sp .pill{margin-top:auto;align-self:flex-start;padding:9px 18px;font-size:14px}
.v5 .sp.noi{background:var(--deep);color:#fff}
.v5 .sp.noi h3,.v5 .sp.noi .gia{color:#fff}.v5 .sp.noi .pv,.v5 .sp.noi .cap,.v5 .sp.noi .gia small{color:#b8cfc0}.v5 .sp.noi .lv{color:#9be07f}
.v5 .sp.noi .pill{background:#fff;color:var(--deep)}

/* gia tri */
.v5 .vals{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.v5 .val{background:var(--grey);border-radius:14px;padding:18px 20px}
.v5 .val svg{display:block;margin-bottom:12px}
.v5 .val h3{font-size:20px;margin-bottom:4px}
.v5 .val p{margin:0;color:var(--muted);font-size:15px}

/* hang khac */
.v5 .other{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.v5 .other .wrap{display:flex;align-items:center;gap:40px;padding-top:20px;padding-bottom:20px}
.v5 .other .t{font-family:var(--h);font-size:22px;font-weight:600;flex:none}
.v5 .other .dong{display:flex;align-items:center;justify-content:space-between;flex:1;gap:36px}
.v5 .other img{height:28px;filter:grayscale(1);opacity:.65}
.v5 .other img:hover{filter:none;opacity:1}

/* tin */
.v5 .news{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.v5 .nw{border-radius:14px;background:var(--grey);padding:18px 20px;display:flex;flex-direction:column;gap:8px;min-height:140px}
.v5 .nw .d{font-size:14px;color:var(--muted)}
.v5 .nw h3{font-size:20px;line-height:1.2}
.v5 .nw .lnk{margin-top:auto}
.v5 .nw.cb{background:#fff4f2}.v5 .nw.cb .d{color:#b42318}

/* lien he + footer */
.v5 .lh{background:var(--deep);color:#fff}
.v5 .lh .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-top:28px;padding-bottom:28px}
.v5 .lh h2{color:#fff;font-size:30px}
.v5 .lh p{margin:6px 0 0;color:#b8cfc0}
.v5 .lh .so{font:700 30px var(--h);margin-right:10px}
.v5 .lh .pill-o{border-color:#fff;color:#fff}.v5 .lh .pill-o:hover{background:rgba(255,255,255,.08)}
.v5 footer{font-size:14px;color:var(--muted)}
.v5 footer .wrap{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;padding-top:32px;padding-bottom:20px}
.v5 footer h4,.v5 footer h3.ft{font:600 17px var(--h);color:var(--ink);margin:0 0 8px}
.v5 footer ul{list-style:none;margin:0;padding:0;line-height:1.9}
.v5 footer a:hover{color:var(--brand)}
.v5 footer .lg{height:28px;width:auto;margin-bottom:14px}
.v5 .cp{border-top:1px solid var(--line)}
.v5 .cp .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:12px;padding-bottom:12px;grid-template-columns:none}
.v5 .cp img{height:38px}

@media (max-width:1000px){
  .v5 .ham{display:grid}
  .v5 .hero .wrap{grid-template-columns:1fr;padding-top:28px;padding-bottom:24px}
  .v5 .hero svg.ve{display:none}
  .v5 .hero h1{font-size:42px}
  .v5 .panel{grid-template-columns:1fr}.v5 .panel>a+a{border-left:0;border-top:1px solid var(--line)}
  .v5 .chain .wrap{grid-template-columns:1fr;gap:24px}
  .v5 .lineup{grid-template-columns:1fr 1fr}
  .v5 .vals{grid-template-columns:1fr 1fr}
  .v5 .other .wrap{flex-direction:column;align-items:flex-start;gap:18px}
  .v5 .other .dong{flex-wrap:wrap;justify-content:flex-start;gap:20px 30px}
  .v5 .news{grid-template-columns:1fr}
  .v5 footer .wrap{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .v5 .wrap{padding:0 16px}
  .v5 .sec{padding:32px 0}
  .v5 .chain{margin-top:28px}.v5 .chain .wrap{padding-top:32px;padding-bottom:32px}
  .v5 .top .wrap{height:58px;gap:10px}.v5 .logo img{height:26px}
  .v5 .tp .pill{display:none}.v5 .tp{gap:4px}
  .v5 .bar b{font-size:19px}.v5 .bar .wrap{flex-direction:column;align-items:flex-start;gap:12px}
  .v5 .hero h1{font-size:34px}.v5 .hero p{font-size:16px}
  .v5 .chain h2,.v5 .sh h2{font-size:27px}
  .v5 .lineup,.v5 .vals{grid-template-columns:1fr}
  .v5 .lineup{grid-auto-flow:column;grid-auto-columns:82%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
  .v5 .sp{scroll-snap-align:start}
  .v5 .other img{height:22px}
  .v5 .lh h2{font-size:24px}
  .v5 .cp .wrap{flex-direction:column;gap:10px}
}

/* hero slide */
.v5 .sl{position:relative}
.v5 .sd{margin:0;display:none}
.v5 .sd.on{display:block}
.v5 .kh{border-radius:16px;overflow:hidden;box-shadow:0 24px 50px -20px rgba(11,59,31,.35);aspect-ratio:1379/865;background:#fff}
.v5 .kh img{width:100%;height:100%;object-fit:cover;display:block}
.v5 .kh.nen{background:var(--grey);display:grid;place-items:center;box-shadow:none}
.v5 .kh.nen img{height:auto;object-fit:contain}
.v5 .sd figcaption{display:grid;gap:2px;margin-top:10px}
.v5 .sd .the{font:700 13px var(--h);color:var(--brand);letter-spacing:.02em}
.v5 .sd b{font:600 19px var(--h)}
.v5 .sd figcaption span:last-child{color:var(--muted);font-size:15px}
.v5 .dots{display:flex;gap:8px;margin-top:10px}
.v5 .dots button{width:28px;height:4px;border-radius:2px;border:0;background:var(--line);cursor:pointer;padding:0}
.v5 .dots button[aria-selected=true]{background:var(--brand)}
/* tin dung boi */
.v5 .tin-dung{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.v5 .tin-dung .wrap{display:flex;align-items:center;gap:40px;padding-top:18px;padding-bottom:18px}
.v5 .tin-dung .t{font:600 22px var(--h);flex:none}
.v5 .tin-dung .dong{display:flex;align-items:center;gap:48px;flex:1}
.v5 .tin-dung img{height:40px}
.v5 .kh-ten{font:700 26px var(--h);color:#1d4f8f;letter-spacing:-.01em}
.v5 .tin-dung .lnk{margin-left:auto}
/* dai tu van */
.v5 .tv{background:var(--grey)}
.v5 .tv .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:24px;padding-bottom:24px;flex-wrap:wrap}
.v5 .tv h2{font-size:28px}
.v5 .tv p{margin:4px 0 0;color:var(--muted)}
@media (max-width:1000px){
  .v5 .hero .sl{display:block}
  .v5 .tin-dung .wrap{flex-direction:column;align-items:flex-start;gap:16px}
  .v5 .tin-dung .dong{flex-wrap:wrap;gap:20px 32px}
  .v5 .tin-dung .lnk{margin-left:0}
}