/* Viettel Mobile App v4.7.0 — header, home spacing and typography */
:root{
  --vts470-red:#e30613;
  --vts470-wine:#690018;
  --vts470-deep:#35050d;
  --vts470-cream:#fbf7f3;
  --vts470-paper:#fffdfb;
  --vts470-ink:#211a1d;
  --vts470-muted:#6f666a;
}
html{font-size:16px}
body.vts-app-theme{font-size:16px;line-height:1.6;background:var(--vts470-cream);color:var(--vts470-ink)}
.vts-app-theme p,.vts-app-theme li,.vts-app-theme input,.vts-app-theme select,.vts-app-theme textarea{font-size:15px}
.vts-app-theme h1{font-size:clamp(32px,8vw,52px);line-height:1.08}
.vts-app-theme h2{font-size:clamp(24px,6vw,34px);line-height:1.15}
.vts-app-theme h3{font-size:clamp(19px,4.8vw,25px);line-height:1.2}
.vts-button{min-height:48px;font-size:14px}

/* Compact premium Viettel header */
.vts-header.vts-header--viettel{
  border:0;
  background:
    radial-gradient(circle at 14% -60%,rgba(255,255,255,.20),transparent 38%),
    linear-gradient(118deg,var(--vts470-deep),var(--vts470-wine) 62%,var(--vts470-red));
  box-shadow:0 9px 25px rgba(72,0,17,.20);
}
.vts-header.vts-header--viettel:after{content:"";position:absolute;inset:auto 0 0;height:1px;background:rgba(255,255,255,.18)}
.vts-header-inner--compact{height:64px;gap:9px}
.vts-header--viettel .vts-brand{padding:5px 10px;border-radius:13px;background:rgba(255,255,255,.98);box-shadow:0 7px 18px rgba(28,0,7,.16)}
.vts-header--viettel .vts-custom-logo img{height:28px!important}
.vts-header--viettel .vts-back,.vts-header--viettel .vts-search-button{color:#fff;background:rgba(255,255,255,.10)}
.vts-header--viettel .vts-header-contact{color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10)}
.vts-header--viettel .vts-header-contact:hover,.vts-header--viettel .vts-header-contact:focus-visible{background:rgba(255,255,255,.17)}
.vts-header--viettel .vts-desktop-nav a{color:rgba(255,255,255,.90)}
.vts-header--viettel .vts-desktop-nav a:hover{color:#fff}

/* Home layout: slider first, tighter rhythm */
.vts-home-v45{padding-top:10px!important;padding-bottom:34px}
.vts-home-v45::before{opacity:.65}
.vts-home-v45__hero{margin:0 0 10px!important;min-height:214px;border-radius:25px;box-shadow:0 17px 38px rgba(85,0,20,.20)}
.vts-home-v45__slide{min-height:214px;padding:22px 19px;background-image:linear-gradient(125deg,rgba(29,0,8,.36),transparent 65%)}
.vts-home-v45__hero-copy h2{font-size:28px;line-height:1.08;margin:7px 0 8px}
.vts-home-v45__hero-copy p{font-size:13px;line-height:1.5;margin-bottom:13px}
.vts-home-v45__hero-copy .vts-button{min-height:42px;font-size:12px}
.vts-home-v45__5g{top:59px;right:12px;font-size:72px}
.vts-home-v45__lead{gap:10px!important;margin-top:0}
.vts-home-v45__welcome,.vts-home-v45__services,.vts-home-v45__section{padding:17px!important;border-radius:24px!important}
.vts-home-v45__welcome h1{font-size:30px;margin:7px 0 8px}
.vts-home-v45__welcome>p{font-size:14px;line-height:1.52;margin-bottom:13px}
.vts-home-v45__search{height:51px}
.vts-home-v45__trust{margin-top:10px}
.vts-home-v45__section-head{margin-bottom:12px}
.vts-home-v45__section-head h2{font-size:24px}
.vts-home-v45__service-grid{gap:12px 5px}
.vts-home-v45__service{padding:7px 2px}
.vts-home-v45__service-icon{width:clamp(56px,17vw,68px);border-radius:20px}
.vts-home-v45__service strong{font-size:12px;line-height:1.25}
.vts-home-paths{margin:10px 0!important;gap:8px}
.vts-home-paths>a{min-height:76px;padding:12px;border-radius:18px}
.vts-home-paths strong{font-size:13px}.vts-home-paths small{font-size:10px}
.vts-home-v45__section{margin-top:10px!important}
.vts-home-v45__popular{gap:10px}
.vts-home-v45__promo{margin-top:10px!important;border-radius:22px}
.vts-home-v45__contact{margin-top:10px!important;border-radius:24px}
.vts-faq-section{margin-top:10px!important}

/* Package catalogue typography and highlighted categories */
.vts450-top h1{font-size:34px!important}.vts450-top p{font-size:14px!important}.vts450-kicker{font-size:11px!important}
.vts450-tabs button{font-size:12px!important;min-height:44px!important}
.vts450-cycles button{font-size:11.5px!important;min-height:38px!important}
.vts450-head h2{font-size:26px!important}.vts450-card__name h3{font-size:26px!important}
.vts450-card__primary strong{font-size:21px!important}.vts450-benefits li{font-size:12px!important}
.vts450-tags span{font-size:10px!important}.vts450-price strong{font-size:24px!important}.vts450-detail{font-size:12px!important;min-height:44px!important}

/* Detail and postpaid readability */
.vts-buy-hero__main>p{font-size:16px!important}.vts-buy-hero__price strong{font-size:34px!important}
.vts-detail-summary-grid strong{font-size:13px!important}.vts-benefit-showcase__grid p{font-size:13px!important}
.vts-condition-panel article p{font-size:12.5px!important}.vts-detail-content p{font-size:15px!important}
.vts-postpaid-card__data{font-size:23px!important}.vts-postpaid-card__facts span{font-size:12px!important}

@media(max-width:759px){
  .vts-header--viettel .vts-header-contact{width:40px;height:42px;border-radius:12px}
  .vts-header--viettel .vts-header-contact span{display:none}
  .vts-header--viettel .vts-custom-logo img{height:26px!important}
  .vts-home-v45__hero-copy{width:72%}
  .vts-home-v45__welcome{padding-bottom:15px!important}
  .vts-home-v45__trust span{font-size:10px}
  .vts-home-v45__popular>.vts-popular-card{flex-basis:88%}
}
@media(max-width:359px){
  .vts-header-inner--compact{height:60px}.vts-header--viettel .vts-brand{padding:4px 7px}.vts-header--viettel .vts-custom-logo img{height:23px!important}
  .vts-home-v45{width:min(calc(100% - 12px),1240px)!important}.vts-home-v45__slide{padding:18px 14px}.vts-home-v45__hero-copy h2{font-size:25px}
  .vts-home-v45__service-icon{width:52px}.vts-home-v45__service strong{font-size:11px}
}
@media(min-width:760px){
  .vts-header-inner--compact{height:72px}.vts-header--viettel .vts-custom-logo img{height:34px!important}
  .vts-home-v45{padding-top:16px!important}.vts-home-v45__hero{min-height:310px;margin-bottom:14px!important}.vts-home-v45__slide{min-height:310px;padding:36px}.vts-home-v45__hero-copy h2{font-size:42px}.vts-home-v45__hero-copy p{font-size:15px}.vts-home-v45__5g{font-size:104px;right:65px;top:95px}
  .vts-home-v45__lead{gap:14px!important}.vts-home-v45__welcome,.vts-home-v45__services,.vts-home-v45__section{padding:24px!important}
  .vts-home-v45__popular{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(min-width:1100px){
  .vts-header--viettel .vts-desktop-nav{gap:21px}.vts-header--viettel .vts-desktop-nav a{font-size:14px}
  .vts-home-v45__hero{min-height:345px}.vts-home-v45__slide{min-height:345px;padding:42px}.vts-home-v45__hero-copy h2{font-size:48px}
}

/* Visual distinction for mobile package families */
.vts450-card[data-groups~="budget"]{border-color:#ead8bd;background:linear-gradient(180deg,#fffdf7,#fff9eb)}
.vts450-card[data-groups~="budget"] .vts450-card__icon{background:linear-gradient(145deg,#fff4d8,#ffe5ad);color:#a75a00}
.vts450-card[data-groups~="social"]{border-color:#ead8e4;background:linear-gradient(180deg,#fff,#fff6fb)}
.vts450-card[data-groups~="social"] .vts450-card__icon{background:linear-gradient(145deg,#fce8f3,#f5d2e6);color:#9d0b58}
.vts450-card[data-groups~="postpaid"]{border-color:#dcd5ee;background:linear-gradient(180deg,#fff,#f9f7ff)}
.vts450-card[data-groups~="postpaid"] .vts450-card__icon{background:linear-gradient(145deg,#efeaff,#ded5ff);color:#5f28a6}
.vts450-card[data-groups~="fiveg"] .vts450-card__icon{background:linear-gradient(145deg,#fff0f2,#ffd5dc);color:#e30613}
.vts-package-detail--type-mobile-social .vts-buy-hero{background:linear-gradient(135deg,#2b0718,#760d43 58%,#d31872)}
.vts-package-detail--type-mobile-budget .vts-buy-hero{background:linear-gradient(135deg,#372006,#8a4a00 58%,#e07a00)}
.vts-package-detail--type-mobile-postpaid .vts-buy-hero{background:linear-gradient(135deg,#190b2d,#55268a 58%,#8b46c7)}