/* =====================================================================
   VIEWD — KHOI THUONG HIEU DAU TRANG
   Van de: mo trang ra khach thay chu "Simon|K9" tren banner truoc,
   con VIEWD thi be xiu tren goc -> sai thu tu nhan dien thuong hieu.
   Cach xu ly: dat mot slide THUONG HIEU VIEWD lam slide dau tien,
   logo lon tren nen toi (dung file goc, khong chinh mau).
   owner: "Sam (so huu doc quyen, cam sao chep)"
   ===================================================================== */

/* ---------- Slide thuong hieu ---------- */
.brand-hero{
  background:
    radial-gradient(ellipse 90% 70% at 50% 30%, rgba(198,147,32,.16), transparent 62%),
    linear-gradient(165deg, #262524 0%, #17171A 45%, #0C0C0E 100%);
}
.brand-hero .brand-stage{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:clamp(12px,1.8vw,20px);
  padding:clamp(30px,3.4vw,46px) clamp(20px,4vw,48px);
  width:min(100% - 40px,1100px);margin-inline:auto;
}

/* Logo lon — dung nguyen file goc */
.brand-stage .brand-hero-logo{
  width:auto;height:clamp(140px,20vw,244px);
  filter:drop-shadow(0 18px 46px rgba(0,0,0,.55));
  animation:brandIn 1.1s cubic-bezier(.22,.61,.36,1) both;
}

.brand-stage .brand-line{
  font-family:var(--ff-ui);font-size:clamp(10px,1.1vw,12.5px);
  letter-spacing:.42em;text-transform:uppercase;color:var(--gold-lt);
  display:flex;align-items:center;gap:14px;
  animation:brandIn 1.1s cubic-bezier(.22,.61,.36,1) .18s both;
}
.brand-stage .brand-line::before,
.brand-stage .brand-line::after{
  content:"";height:1px;width:clamp(24px,4vw,60px);
  background:linear-gradient(90deg,transparent,var(--gold-lt),transparent);
}

.brand-stage .brand-claim{
  font-family:var(--ff-display);color:#FFFFFF;
  font-size:clamp(22px,3vw,40px);line-height:1.16;max-width:22ch;
  text-shadow:0 4px 26px rgba(0,0,0,.5);margin:0;
  animation:brandIn 1.1s cubic-bezier(.22,.61,.36,1) .3s both;
}
.brand-stage .brand-claim em{
  font-style:normal;
  background:linear-gradient(160deg,#FFEFC0,#F2CD69 38%,#D6A431 66%,#FFE9AE);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

.brand-stage .brand-sub{
  color:rgba(255,255,255,.82);font-size:clamp(13px,1.15vw,16px);
  max-width:44ch;margin:0;
  animation:brandIn 1.1s cubic-bezier(.22,.61,.36,1) .42s both;
}

.brand-stage .brand-cta{
  display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px;
  animation:brandIn 1.1s cubic-bezier(.22,.61,.36,1) .54s both;
}
.brand-stage .brand-cta .btn{min-height:48px}
.brand-stage .brand-cta .btn:not(.btn--solid){--fg:#fff;--bd:rgba(255,255,255,.5)}

@keyframes brandIn{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:none}
}

/* ---------- Dien thoai: gon lai, khong de trong ---------- */
@media(max-width:700px){
  .brand-hero .brand-stage{gap:12px;padding:18px 20px}
  .brand-stage .brand-hero-logo{height:clamp(120px,34vw,170px)}
  .brand-stage .brand-line{letter-spacing:.3em;font-size:9.5px;gap:10px}
  .brand-stage .brand-claim{font-size:clamp(20px,6.4vw,28px);max-width:18ch}
  .brand-stage .brand-sub{font-size:13px;max-width:34ch}
  .brand-stage .brand-cta{width:100%;gap:10px}
  .brand-stage .brand-cta .btn{flex:1 1 auto;justify-content:center;padding:14px 16px}
}

@media (prefers-reduced-motion:reduce){
  .brand-stage > *{animation:none!important}
}

/* Man hinh cao vua phai: khoi thuong hieu gon lai de he thay slider ben duoi */
@media(min-width:701px) and (max-height:950px){
  .brand-stage .brand-hero-logo{height:clamp(130px,17vw,210px)}
  .brand-hero .brand-stage{padding:26px 40px;gap:12px}
  .brand-stage .brand-claim{font-size:clamp(21px,2.6vw,34px)}
  .brand-stage .brand-sub{font-size:14px}
}

/* =====================================================================
   BANG HANH DONG NGAY SAU NHOM SAN PHAM
   Khach xem xong 4 nhom hang la co ngay duong lien he, khong phai
   cuon tiep hay di tim.
   ===================================================================== */
.quick-cta{
  background:linear-gradient(150deg,#2A2A2A 0%,#1C1C1E 100%);
  border-block:1px solid rgba(233,185,73,.28);
}
.quick-cta-in{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,3vw,48px);padding:clamp(28px,3.4vw,44px) 0;flex-wrap:wrap;
}
.quick-cta-txt{flex:1 1 320px}
.quick-cta-txt .eyebrow{color:var(--gold-lt);margin-bottom:10px}
.quick-cta-txt h2{color:#fff;margin-bottom:8px}
.quick-cta-txt p{color:rgba(255,255,255,.78);margin:0;max-width:52ch;font-size:14.5px}
.quick-cta-btn{display:flex;gap:12px;flex-wrap:wrap;flex:0 0 auto}
.quick-cta-btn .btn{min-height:50px}
.quick-cta-btn .btn:not(.btn--solid){--fg:#fff;--bd:rgba(255,255,255,.45)}

@media(max-width:700px){
  /* flex-basis 320px cua .quick-cta-txt keo cao khoi khi xep doc -> phai go */
  .quick-cta-txt{flex:0 0 auto}
  .quick-cta-txt h2{font-size:20px;line-height:1.25}
  .quick-cta-in{flex-direction:column;align-items:stretch;text-align:center;gap:14px;padding:24px 0}
  .quick-cta-txt .eyebrow{justify-content:center}
  .quick-cta-txt p{margin-inline:auto;font-size:13.5px}
  .quick-cta-btn{width:100%}
  .quick-cta-btn .btn{flex:1 1 auto;justify-content:center}
}