/* vatpham — canh theo mockup (11-01): mockup 854px = trang 1440 (x1.69); chữ/khối ~1.4-1.5x bản dựng đầu */
#top-bar .flex-row { min-height: 40px; } .vp-tb { font-size: 14.5px !important; font-weight: 500; }
#header .header-main { height: 104px !important; }
#header #logo { width: 360px !important; flex: 0 0 360px; } #header #logo a { width: 360px !important; height: 76px !important; }
#header .header-main .searchform-wrapper, #header .header-main .header-search-form { max-width: 620px !important; width: 620px !important; }
#header .header-main .search-field { height: 48px !important; border-radius: 24px !important; font-size: 15px !important; padding-left: 22px !important; }
#header .header-main .searchform .button.icon { height: 48px !important; border-radius: 0 24px 24px 0 !important; }
#header .header-cart-link { font-size: 16px !important; } #header .header-cart-link i { font-size: 26px !important; }
#header .header-cart-title { display: inline !important; font-size: 16px !important; font-weight: 500; text-transform: none !important; letter-spacing: 0; }
#header .header-bottom { min-height: 54px !important; } #header .header-bottom-nav > li > a { font-size: 16px !important; font-weight: 500 !important; }
#header .header-bottom-nav > li { margin: 0 20px !important; }
/* hero: tượng trọn từ đầu tới đế, nằm phải; chữ trái trên nền nâu */
.vp-hero, .vp-hero .row { min-height: 500px !important; }
.vp-hero .section-bg { background: #3a2010; }
.vp-hero .section-bg img.bg { width: auto !important; height: 120% !important; max-width: none !important; left: auto !important; right: 0 !important; top: auto !important; bottom: 0 !important; object-fit: contain !important; }
.vp-hero::before { background: linear-gradient(90deg, #3a2010 0%, #3a2010 42%, rgba(58,32,16,.55) 52%, rgba(58,32,16,0) 64%) !important; }
.vp-h1 { font-size: 60px !important; line-height: 1.16 !important; margin-bottom: 18px !important; }
.vp-hs { font-size: 24px !important; margin-bottom: 34px !important; }
a.vp-btn { min-height: 58px !important; padding: 0 44px !important; font-size: 19px !important; border-radius: 4px !important; }
@media (max-width: 849px) {
  #header .header-main { height: 70px !important; } #header #logo { width: 190px !important; flex-basis: 190px; } #header #logo a { width: 190px !important; height: 44px !important; }
  .vp-hero, .vp-hero .row { min-height: 420px !important; }
  .vp-hero .section-bg img.bg { height: 100% !important; width: 100% !important; object-fit: cover !important; object-position: 72% 50% !important; right: 0 !important; left: 0 !important; }
  .vp-hero::before { background: linear-gradient(180deg, rgba(58,32,16,.88) 0%, rgba(58,32,16,.7) 55%, rgba(58,32,16,.2) 100%) !important; }
  .vp-h1 { font-size: 34px !important; } .vp-hs { font-size: 18px !important; } a.vp-btn { min-height: 48px !important; font-size: 16px !important; }
}
/* ruler:auto BEGIN — tools/astra-bridge/lab/ruler_fix.py, đừng sửa tay */
@media (min-width: 850px) {
  .vp-g h3.b9-pc-t { font-size: 20.2px !important; }
  .vp-gn h3.b9-po-t { font-size: 25.8px !important; }
  .vp-hd h2 { font-size: 37.2px !important; }
  .vp-all img { width: 20px !important; height: 20px !important; max-width: none !important; flex: 0 0 auto !important; object-fit: contain; }
  .vp-ft-soc img { width: 36px !important; height: 36px !important; max-width: none !important; flex: 0 0 auto !important; object-fit: contain; }
}
@media (max-width: 849px) {
  .vp-all img { width: 16px !important; height: 16px !important; }
  .vp-ft-soc img { width: 30px !important; height: 30px !important; }
}
/* ruler:auto END */
/* ruler:manual — tay theo mockup (x~1.4) */
@media (min-width: 850px) {
  .vp-h2 { font-size: 37px !important; margin-bottom: 20px !important; }
  .vp-cg b { font-size: 19px !important; }
  .b9-pc-p { font-size: 20px !important; margin-bottom: 12px !important; }
  .b9-pc-btn a { min-height: 40px !important; font-size: 15px !important; }
  .b9-pc-b { padding: 14px 14px 18px !important; }
  .vp-usp > div { padding: 30px 22px !important; gap: 18px !important; }
  .vp-usp img { width: 54px !important; height: 54px !important; }
  .vp-usp b { font-size: 19px !important; } .vp-usp em { font-size: 15px !important; }
  .vp-ft-h { font-size: 18px !important; margin-bottom: 16px !important; } .vp-ft li, .vp-ft-brand p, .vp-ft-soc a { font-size: 15.5px !important; }
  .b9-po-t + p, .vp-gn p { font-size: 16px !important; }
}
@media (min-width: 850px) {
  .vp-gn h3.b9-po-t { font-family: "Playfair Display", Georgia, serif !important; font-weight: 600 !important; font-size: 24px !important; }
  .vp-gn .b9-po-b > div:not([class*="-t"]) { font-size: 15.5px !important; }
  .vp-usp b { font-size: 21px !important; }
}