/* KOLs.vn Premium Light Glass Design System
 * Visual layer only. Original DOM, layout, grid and interactions stay untouched.
 */
body.glass-ui{
  background:
    radial-gradient(circle at 10% 0%,rgba(var(--accent-rgb),.13) 0 18%,transparent 38%),
    radial-gradient(circle at 90% 4%,color-mix(in srgb,var(--accent-2) 18%,transparent) 0 16%,transparent 42%),
    linear-gradient(180deg,var(--background),#fff 46%,var(--background) 100%);
  background-attachment:fixed;
  color:var(--text-primary);
}
body.glass-ui a{transition:color .22s ease,border-color .22s ease,background-color .22s ease,opacity .22s ease}
body.glass-ui .kolvn-site-main{position:relative;isolation:isolate}
body.glass-ui .kolvn-site-main::before,
body.glass-ui .kolvn-site-main::after{content:"";position:fixed;border-radius:999px;pointer-events:none;z-index:-1;filter:blur(4px);opacity:.38}
body.glass-ui .kolvn-site-main::before{width:32vw;height:32vw;min-width:280px;min-height:280px;left:-11vw;top:18vh;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 16%,transparent),transparent 67%)}
body.glass-ui .kolvn-site-main::after{width:28vw;height:28vw;min-width:240px;min-height:240px;right:-9vw;top:48vh;background:radial-gradient(circle,color-mix(in srgb,var(--accent-2) 20%,transparent),transparent 68%)}

/* Navigation glass — keep original dimensions and header structure. */
body.glass-ui .nav{
  background:var(--glass);
  border-bottom:1px solid var(--border-glass);
  -webkit-backdrop-filter:blur(var(--glass-nav-blur)) saturate(var(--glass-saturation));
  backdrop-filter:blur(var(--glass-nav-blur)) saturate(var(--glass-saturation));
  box-shadow:0 12px 34px rgba(20,35,60,.08);
}
body.glass-ui .nav-links>li>a:hover,
body.glass-ui .nav-links>li.current-menu-item>a,
body.glass-ui .nav-links>li.current-menu-ancestor>a{color:var(--accent);border-bottom-color:var(--accent)}
body.glass-ui .nav-links .sub-menu{
  background:var(--glass);
  border:1px solid var(--border-glass);
  border-radius:var(--radius-control);
  -webkit-backdrop-filter:blur(var(--glass-nav-blur)) saturate(var(--glass-saturation));
  backdrop-filter:blur(var(--glass-nav-blur)) saturate(var(--glass-saturation));
  box-shadow:0 16px 45px rgba(20,35,60,.13);
}
body.glass-ui .nav-links .sub-menu a:hover,
body.glass-ui .nav-links .sub-menu .current-menu-item>a,
body.glass-ui .nav-links .sub-menu .current-menu-ancestor>a{background:var(--surface-soft);color:var(--accent)}
body.glass-ui .nav-search-input{
  background:var(--glass-soft);
  border-color:var(--border-glass);
  border-radius:999px;
  color:var(--text-primary);
  -webkit-backdrop-filter:blur(var(--glass-soft-blur)) saturate(var(--glass-soft-saturation));
  backdrop-filter:blur(var(--glass-soft-blur)) saturate(var(--glass-soft-saturation));
}
body.glass-ui .nav-search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12)}

/* Preserve section flow; backgrounds become atmospheric, not nested blur layers. */
body.glass-ui .sec-ivory,
body.glass-ui .sec-parchment,
body.glass-ui .kolvn-home-hero{background:transparent}
body.glass-ui .sec-dark,
body.glass-ui .sec-ink{background:color-mix(in srgb,var(--text-primary) 94%,transparent)}
body.glass-ui .cover{background:transparent;border-color:var(--border-soft)}
body.glass-ui .cover-left,
body.glass-ui .cover-right{
  background:var(--glass-soft);
  border-color:var(--border-glass);
  -webkit-backdrop-filter:blur(var(--glass-soft-blur)) saturate(var(--glass-soft-saturation));
  backdrop-filter:blur(var(--glass-soft-blur)) saturate(var(--glass-soft-saturation));
}
body.glass-ui .cover::before{opacity:.18}
body.glass-ui .cover-center-img{background:linear-gradient(160deg,color-mix(in srgb,var(--text-primary) 90%,var(--accent) 10%) 0%,color-mix(in srgb,var(--accent) 28%,var(--text-primary)) 55%,var(--text-primary) 100%)}
body.glass-ui .cover-overlay{background:linear-gradient(to top,color-mix(in srgb,var(--text-primary) 96%,transparent) 0%,color-mix(in srgb,var(--text-primary) 58%,transparent) 60%,transparent 100%)}
body.glass-ui .ticker-wrap{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 92%,#fff 8%),color-mix(in srgb,var(--accent) 72%,var(--text-primary) 28%));border-top:1px solid rgba(255,255,255,.18)}
body.glass-ui .ticker-item{color:rgba(255,255,255,.92)}

/* Primary glass surfaces. */
body.glass-ui :is(
  .kol-card,.article-card,.project-card,.brand-deal,.brand-dir-card,.brand-featured-card,
  .ranking-side,.timeline-wrap,.tm-wrap,.newsletter,.kolvn-widget,.kolvn-card,.kolvn-filter-box,
  .kolvn-sticky-contact,.kolvn-sidebar section,.kolvn-home-hero__content,.kolvn-home-hero__panel-card,
  .kolvn-page-layout .entry-content,.kolvn-frontend-form-wrap,.kolvn-spec,.kolvn-package-row,.kolvn-faq details
){
  background:var(--glass);
  border:1px solid var(--border-glass);
  border-radius:var(--radius-card);
  box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation));
}
body.glass-ui :is(.kol-card,.article-card,.project-card,.brand-deal,.brand-dir-card,.brand-featured-card,.kolvn-card,.kolvn-widget,.kolvn-home-hero__content,.kolvn-home-hero__panel-card){
  transition:transform .28s ease,box-shadow .32s ease,border-color .28s ease,background-color .28s ease;
}
body.glass-ui :is(.kol-card,.article-card,.project-card,.brand-deal,.brand-dir-card,.brand-featured-card,.kolvn-card,.kolvn-widget,.kolvn-home-hero__panel-card):hover{
  transform:translateY(-3px);
  box-shadow:var(--glass-shadow-hover);
  border-color:rgba(255,255,255,.96);
}
body.glass-ui :is(.kol-img img,.kolvn-card-image img,.article-cover img,.project-cover img,.timeline-cover img,.tm-cover img){transition:transform .42s ease}
body.glass-ui :is(.kol-card,.article-card,.project-card,.kolvn-card):hover :is(.kol-img img,.kolvn-card-image img,.article-cover img,.project-cover img){transform:scale(1.02)}

/* Archive / single headings remain in their original places. */
body.glass-ui .kolvn-archive-hero,
body.glass-ui .kolvn-single-hero{
  background:var(--glass-soft);
  border:1px solid var(--border-glass);
  border-radius:var(--radius-card);
  box-shadow:0 18px 50px rgba(17,35,70,.07);
  -webkit-backdrop-filter:blur(var(--glass-soft-blur)) saturate(var(--glass-soft-saturation));
  backdrop-filter:blur(var(--glass-soft-blur)) saturate(var(--glass-soft-saturation));
}
body.glass-ui .kolvn-single-section{border-bottom-color:var(--border-soft)}

/* Soft glass controls. */
body.glass-ui :is(
  input[type="text"],input[type="email"],input[type="url"],input[type="search"],input[type="number"],input[type="tel"],input[type="password"],
  select,textarea,.kolvn-search-form input,.kolvn-frontend-form input,.kolvn-frontend-form textarea,.nl-input
){
  background:var(--glass-soft);
  border:1px solid var(--border-glass);
  border-radius:var(--radius-control);
  color:var(--text-primary);
  -webkit-backdrop-filter:blur(var(--glass-soft-blur)) saturate(var(--glass-soft-saturation));
  backdrop-filter:blur(var(--glass-soft-blur)) saturate(var(--glass-soft-saturation));
  transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease;
}
body.glass-ui :is(input,select,textarea):focus,
body.glass-ui .kolvn-search-form input:focus,
body.glass-ui .kolvn-frontend-form input:focus,
body.glass-ui .kolvn-frontend-form textarea:focus,
body.glass-ui .nl-input:focus{
  outline:none;
  border-color:var(--accent);
  background:color-mix(in srgb,var(--glass) 86%,transparent);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12);
}
body.glass-ui ::placeholder{color:color-mix(in srgb,var(--text-primary) 46%,transparent);opacity:1}
body.glass-ui input[type="checkbox"],body.glass-ui input[type="radio"]{accent-color:var(--accent)}

/* Buttons, chips, tags, pagination and active states read from the same palette. */
body.glass-ui :is(.kolvn-btn-primary,.kolvn-search-form button,.kolvn-frontend-form button,.nl-btn,.pagination .page-numbers.current){
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 72%,var(--accent-2) 28%));
  border-color:transparent;
  color:#fff;
  border-radius:var(--radius-control);
  box-shadow:0 10px 28px rgba(var(--accent-rgb),.18);
}
body.glass-ui :is(.kolvn-btn-primary,.kolvn-search-form button,.kolvn-frontend-form button,.nl-btn):hover{filter:brightness(.97);transform:translateY(-1px);box-shadow:0 14px 32px rgba(var(--accent-rgb),.22)}
body.glass-ui :is(.kolvn-btn,.pagination .page-numbers,.kolvn-home-hero__cats a,.kolvn-home-hero__links a,.kolvn-social-links a,.kolvn-contact-buttons a){
  background:var(--glass-soft);
  border-color:var(--border-glass);
  color:var(--text-primary);
  border-radius:var(--radius-control);
}
body.glass-ui :is(.bfc-tag,.pcs,.kolvn-chip,.post-categories a,.kolvn-card-terms a,.kolvn-social-links a,.kolvn-icon){
  background:color-mix(in srgb,var(--accent) 10%,var(--glass));
  color:color-mix(in srgb,var(--accent) 78%,var(--text-primary));
  border-color:rgba(var(--accent-rgb),.14);
}
body.glass-ui :is(.pagination .page-numbers:hover,.kolvn-btn:hover,.kolvn-home-hero__cats a:hover,.kolvn-home-hero__links a:hover){border-color:var(--accent);color:var(--accent)}
body.glass-ui :is(.sec-eyebrow,.cover-kol-role,.cs-category,.ki-category,.see-all,.bd-brand-name,.pc-brand,.ac-category,.tm-category,.nl-eyebrow,.rs-widget-title,.f-logo-sub){color:var(--accent)}
body.glass-ui :is(.kolvn-card-title a:hover,.article-card:hover .ac-title,.project-card:hover .pc-title,.ctag:hover,.footer-legal a:hover,.f-col li:hover,.f-soc:hover){color:var(--accent)}
body.glass-ui :is(.mag-rule-thick,.nl-rule){background:var(--accent)}
body.glass-ui .mag-rule{background:linear-gradient(90deg,transparent,var(--accent),transparent)}
body.glass-ui [data-kolvn-link]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Newsletter and footer become light glass panels instead of hard black blocks. */
body.glass-ui .newsletter-wrap{
  background:color-mix(in srgb,var(--glass) 88%,var(--accent) 12%);
  border-top:1px solid var(--border-glass);
  border-bottom:1px solid var(--border-glass);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation));
}
body.glass-ui .newsletter-wrap::before{color:rgba(var(--accent-rgb),.045)}
body.glass-ui .nl-title{color:var(--text-primary)}
body.glass-ui .nl-sub{color:color-mix(in srgb,var(--text-primary) 64%,transparent)}
body.glass-ui .nl-note{color:color-mix(in srgb,var(--text-primary) 48%,transparent)}
body.glass-ui footer{
  background:color-mix(in srgb,var(--glass) 92%,var(--surface-soft) 8%);
  color:var(--text-primary);
  border-top:1px solid var(--border-glass);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation));
  box-shadow:0 -18px 55px rgba(17,35,70,.06);
}
body.glass-ui .f-logo{color:var(--text-primary)}
body.glass-ui .f-brand-desc,
body.glass-ui .f-col li,
body.glass-ui .footer-bottom span,
body.glass-ui .footer-legal a{color:color-mix(in srgb,var(--text-primary) 55%,transparent)}
body.glass-ui .f-col h4{color:color-mix(in srgb,var(--text-primary) 74%,transparent)}
body.glass-ui .f-soc{border-color:var(--border-soft);color:color-mix(in srgb,var(--text-primary) 62%,transparent);background:var(--glass-soft)}
body.glass-ui .footer-rule{background:var(--border-soft)}
body.glass-ui .footer-bottom em{color:var(--accent)}

body.glass-ui .kolvn-mobile-bottom-nav{
  background:var(--glass);
  border-top:1px solid var(--border-glass);
  box-shadow:0 -12px 34px rgba(20,35,60,.08);
  -webkit-backdrop-filter:blur(var(--glass-nav-blur)) saturate(var(--glass-saturation));
  backdrop-filter:blur(var(--glass-nav-blur)) saturate(var(--glass-saturation));
}
body.glass-ui .kolvn-mobile-bottom-nav a.active,
body.glass-ui .kolvn-mobile-bottom-nav a:hover{color:var(--accent)}

/* Contrast/accessibility and graceful fallback. */
body.glass-ui :focus-visible{outline-color:var(--accent)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.glass-ui .nav,
  body.glass-ui .nav-links .sub-menu,
  body.glass-ui .cover-left,
  body.glass-ui .cover-right,
  body.glass-ui .kol-card,
  body.glass-ui .article-card,
  body.glass-ui .project-card,
  body.glass-ui .brand-deal,
  body.glass-ui .brand-dir-card,
  body.glass-ui .brand-featured-card,
  body.glass-ui .ranking-side,
  body.glass-ui .timeline-wrap,
  body.glass-ui .tm-wrap,
  body.glass-ui .newsletter,
  body.glass-ui .kolvn-widget,
  body.glass-ui .kolvn-card,
  body.glass-ui .kolvn-filter-box,
  body.glass-ui .kolvn-sticky-contact,
  body.glass-ui .kolvn-home-hero__content,
  body.glass-ui .kolvn-home-hero__panel-card,
  body.glass-ui .kolvn-page-layout .entry-content,
  body.glass-ui .kolvn-frontend-form-wrap,
  body.glass-ui footer,
  body.glass-ui .newsletter-wrap,
  body.glass-ui .kolvn-mobile-bottom-nav{background:rgba(255,255,255,.94)}
}

/* 1.0.19 refinement — clean white editorial glass */
body.glass-ui{
  background:#fff;
  color:var(--text-primary);
}
body.glass-ui .kolvn-site-main::before,
body.glass-ui .kolvn-site-main::after{
  opacity:.12;
  filter:blur(16px);
}
body.glass-ui .kolvn-site-main::before{
  width:26vw;height:26vw;left:-12vw;top:22vh;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.07),transparent 70%);
}
body.glass-ui .kolvn-site-main::after{
  width:24vw;height:24vw;right:-12vw;top:56vh;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent-2) 8%,transparent),transparent 72%);
}

/* Header: logo left, search right, menu as a clean second rail. */
body.glass-ui .nav{
  background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(19,26,40,.07);
  box-shadow:0 5px 24px rgba(19,26,40,.045);
}
body.glass-ui .nav-main{
  width:min(100%,1250px)!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:auto minmax(320px,520px)!important;
  justify-content:space-between!important;
  align-items:center!important;
  min-height:82px!important;
  padding:10px 24px!important;
  column-gap:34px!important;
}
body.glass-ui .nav-left--spacer{display:none!important}
body.glass-ui .logo,
body.glass-ui .logo--has-image{
  justify-self:start!important;
  margin:0!important;
  padding:0!important;
}
body.glass-ui .logo-mark--image img,
body.glass-ui .logo-mark--image .custom-logo{
  max-height:58px!important;
  max-width:250px!important;
  width:auto!important;
  object-fit:contain;
}
body.glass-ui .logo-text,
body.glass-ui .logo-title{
  font-family:'Plus Jakarta Sans',sans-serif!important;
  font-weight:700!important;
  letter-spacing:-.04em!important;
}
body.glass-ui .nav-right,
body.glass-ui .nav-right--search{
  justify-self:end!important;
  width:100%!important;
  max-width:520px!important;
}
body.glass-ui .nav-search-form{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
}
body.glass-ui .nav-search-input{
  height:46px!important;
  padding:0 18px 0 19px!important;
  background:#fff!important;
  border:1px solid rgba(19,26,40,.10)!important;
  border-radius:15px!important;
  box-shadow:0 5px 18px rgba(19,26,40,.035)!important;
  font-family:'Plus Jakarta Sans',sans-serif!important;
  font-size:13px!important;
}
body.glass-ui .nav-search-input:focus{
  border-color:color-mix(in srgb,var(--accent) 55%,#fff)!important;
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.08)!important;
}
body.glass-ui .nav-links{
  width:min(100%,1250px);
  margin:0 auto;
  min-height:52px;
  padding:0 24px!important;
  gap:8px!important;
  justify-content:flex-start!important;
  border-top:1px solid rgba(19,26,40,.055)!important;
}
body.glass-ui .nav-links>li>a{
  height:52px!important;
  padding:0 14px!important;
  font-family:'Plus Jakarta Sans',sans-serif!important;
  font-size:12.5px!important;
  font-weight:600!important;
  letter-spacing:-.01em!important;
  text-transform:none!important;
  border-bottom:2px solid transparent!important;
}
body.glass-ui .nav-links>li:first-child>a{padding-left:0!important}
body.glass-ui .nav-links>li>a:hover,
body.glass-ui .nav-links>li.current-menu-item>a,
body.glass-ui .nav-links>li.current-menu-ancestor>a{
  color:var(--accent)!important;
  border-bottom-color:var(--accent)!important;
}
body.glass-ui .nav-links .sub-menu{
  background:rgba(255,255,255,.97)!important;
  border:1px solid rgba(19,26,40,.075)!important;
  border-radius:16px!important;
  box-shadow:0 18px 42px rgba(19,26,40,.09)!important;
  padding:8px!important;
}
body.glass-ui .nav-links .sub-menu a{
  border-radius:10px;
  font-family:'Plus Jakarta Sans',sans-serif!important;
  font-size:12px!important;
  text-transform:none!important;
  letter-spacing:0!important;
}

/* Cards: separate cleanly; no visual collision / stacked blur. */
body.glass-ui :is(
  .kol-card,.article-card,.project-card,.brand-deal,.brand-dir-card,.brand-featured-card,
  .kolvn-card,.kolvn-widget,.kolvn-home-hero__panel-card,.kolvn-related-wrap .kolvn-card
){
  position:relative;
  min-width:0;
  isolation:isolate;
  overflow:hidden;
  background:rgba(255,255,255,.96)!important;
  border:1px solid rgba(19,26,40,.075)!important;
  border-radius:20px!important;
  box-shadow:0 7px 26px rgba(19,26,40,.045)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  transform:none!important;
}
body.glass-ui :is(
  .kol-card,.article-card,.project-card,.brand-deal,.brand-dir-card,.brand-featured-card,
  .kolvn-card,.kolvn-widget,.kolvn-home-hero__panel-card
):hover{
  transform:none!important;
  border-color:rgba(var(--accent-rgb),.16)!important;
  box-shadow:0 12px 34px rgba(19,26,40,.065)!important;
}
body.glass-ui :is(.kol-grid-featured,.kol-grid-row2,.projects-grid,.editorial-layout,.kolvn-grid,.kolvn-gallery){
  gap:24px!important;
  align-items:stretch;
}
body.glass-ui :is(.kol-grid-featured,.kol-grid-row2,.projects-grid,.kolvn-grid) > *{
  min-width:0;
  height:100%;
}
body.glass-ui :is(.kol-img,.kolvn-card-thumb,.article-cover,.project-cover,.timeline-cover,.tm-cover){
  border-radius:16px 16px 0 0!important;
  overflow:hidden;
}
body.glass-ui :is(.kol-card,.article-card,.project-card,.kolvn-card):hover :is(.kol-img img,.kolvn-card-image img,.article-cover img,.project-cover img){
  transform:scale(1.012)!important;
}

/* Main content panels stay glass, but lighter and less bulky. */
body.glass-ui :is(
  .ranking-side,.timeline-wrap,.tm-wrap,.newsletter,.kolvn-filter-box,.kolvn-sticky-contact,
  .kolvn-sidebar section,.kolvn-home-hero__content,.kolvn-page-layout .entry-content,
  .kolvn-frontend-form-wrap,.kolvn-spec,.kolvn-package-row,.kolvn-faq details
){
  background:rgba(255,255,255,.90)!important;
  border:1px solid rgba(19,26,40,.07)!important;
  box-shadow:0 10px 34px rgba(19,26,40,.05)!important;
}
body.glass-ui :is(.sec-ivory,.sec-parchment,.kolvn-home-hero,.cover){background:#fff!important}
body.glass-ui .cover-left,
body.glass-ui .cover-right{
  background:rgba(255,255,255,.88)!important;
  border-color:rgba(19,26,40,.07)!important;
}
body.glass-ui .kolvn-archive-hero,
body.glass-ui .kolvn-single-hero{
  background:#fff!important;
  border-color:rgba(19,26,40,.07)!important;
  box-shadow:none!important;
}

/* Typography polish */
body.glass-ui,
body.glass-ui button,
body.glass-ui input,
body.glass-ui select,
body.glass-ui textarea,
body.glass-ui h1,
body.glass-ui h2,
body.glass-ui h3,
body.glass-ui h4,
body.glass-ui h5,
body.glass-ui h6{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;
}
body.glass-ui h1,
body.glass-ui h2,
body.glass-ui h3,
body.glass-ui .sec-h2,
body.glass-ui .cover-kol-name{
  letter-spacing:-.035em;
}
body.glass-ui .nav-search-input{
  padding-left:45px!important;
  background-color:#fff!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23717A8A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:17px center!important;
  background-size:17px 17px!important;
}