/* ========== Base ========== */
:root{
  --bg: #0e0f12;
  --text: #e9edf1;
  --muted:#a9b0b7;
  --primary:#ffcc00;
  --accent:#e52d27;
  --accent-2:#b31217;
  --card:#1a1d22;
  --line:#2a2f36;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  background:linear-gradient(180deg, #121418, #0b0c0e);
}

img{display:block;max-width:100%;height:auto}

.container{
  width:100%;
  max-width:960px;
  margin:0 auto;
  padding:0 16px;
}

/* ========== Header ========== */
.site-header{
  position:sticky; top:0; z-index:10;
  background:#111316cc; backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:1px solid var(--line);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.site-header .container{
   display: flex;
  align-items: center;      /* căn giữa theo chiều dọc */
  justify-content: center;  /* chỉ còn logo -> căn giữa cho cân đối */
  height: 80px;             /* chiều cao header */
}
.brand__logo{ display: block;
  margin: 0 auto;      /* căn giữa ngang */
  width: 180px;        /* tăng kích thước theo ý muốn */
  max-width: 90%;      /* tránh tràn màn hình mobile */
  height: auto;        /* giữ tỉ lệ ảnh */}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; text-decoration:none; font-weight:700;
  border-radius:999px; padding:10px 16px; border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease, background .15s ease;
  cursor:pointer; color:#111;
}
.btn--primary{
  background:linear-gradient(180deg, #ffd24d, #ffb300);
}
.btn--accent{
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  color:#fff; border:2px solid var(--primary);
  box-shadow: 0 8px 18px rgba(229,45,39,.25);
}
.btn--ghost{
  background:transparent; color:var(--text);
  border:1px solid var(--line);
}
.btn--xl{
  font-size:18px; padding:14px 22px;
}
.btn--block{display:block; width:100%}
.btn:hover{transform:translateY(-1px)}

/* Badge */
.badge{
  background:var(--primary); color:#000;
  padding:2px 8px; border-radius:12px; font-size:12px; margin-left:8px;
}

/* ========== Hero ========== */
.hero{padding:12px 0 8px}
.hero .container{display:flex; justify-content:center}
.hero__media{position:relative; border-radius:16px; overflow:hidden; box-shadow:0 10px 28px rgba(0,0,0,.35); background:#000; width:100%; max-width:960px; margin:0 auto}
.hero__media img{
  width:100%;
  aspect-ratio: 16 / 9;
  height:auto;
  object-fit:contain; /* không cắt góc banner */
  background:#000;    /* viền nền khi letterbox */
}
.hero__cta{position:absolute; inset:auto 16px 16px auto}
/* Loại bỏ quy tắc trùng lặp ảnh hero cho PC: dùng .hero__media img ở trên */


/* ========== Sticky Top CTA ========== */
.header-cta{padding:8px 0 10px}
.header-cta .container{display:flex; justify-content:center}
.sticky-cta{display:none}
.sticky-cta__button{
  display:flex; align-items:center; justify-content:center;
  width:100%; max-width:960px;
  min-height:56px;
  border-radius:999px;
  background: linear-gradient(28deg, #f8e48f, #f6c14f, #fff8dc);
  box-shadow: 0 10px 24px rgba(246, 193, 79, 0.28), inset 0 2px 6px rgba(255,255,255,0.6), inset 0 -2px 6px rgba(0,0,0,0.2);
  text-decoration:none;
  transition: transform .2s ease, box-shadow .2s ease;
  animation: ctaPulse 2.2s ease-in-out infinite;
}
.sticky-cta__button span{
  color:#2c1810; font-weight:800; font-size:20px; letter-spacing:.4px;
}
.sticky-cta__button:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(246, 193, 79, 0.34), inset 0 2px 6px rgba(255,255,255,0.7), inset 0 -2px 6px rgba(0,0,0,0.28);
  animation-play-state: paused;
}
@keyframes ctaPulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.03)}
  100%{transform:scale(1)}
}

/* ========== Carousel ========== */
.carousel{padding:8px 0 4px}
.carousel .container{display:flex; justify-content:center}
.carousel__viewport{
  position:relative; overflow:hidden; border-radius:14px; background:#000;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  margin:0 auto;
  width:100%; max-width:960px;
}
.carousel__track{display:flex; transition:transform .4s ease}
.carousel__slide{min-width:100%; height:clamp(120px, 28vw, 260px);}
.carousel__slide img{width:100%; height:100%; object-fit:cover}
.carousel__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:#00000080; border:1px solid var(--line);
  color:#fff; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
}
.carousel__nav--prev{left:8px}
.carousel__nav--next{right:8px}
.carousel__dots{
  position:absolute; left:0; right:0; bottom:8px;
  display:flex; justify-content:center; gap:8px;
}
.carousel__dots button{
  width:10px; height:10px; border-radius:50%; border:0;
  background:#cfd3d7aa; cursor:pointer;
}
.carousel__dots button[aria-current="true"]{background:#fff}

/* ========== Categories ========== */
.categories{padding:16px 0}

.cat-grid{
  list-style:none;
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:8px;
}


.cat-card{
  display:block;
  padding:4px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  transition:transform .12s ease, box-shadow .12s ease;
}


.cat-card img{
  width:100%;
  aspect-ratio: 1 / 1;
  object-fit:cover;
  border-radius:8px;
  min-height: 60px;
}

.cat-card:hover{transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.25)}

/* ========== Promo strip ========== */
.promo-strip{padding:8px 0 16px}
.promo-strip .container{display:flex; justify-content:center}
.promo-strip__inner{display:grid; grid-template-columns:1fr 1fr; gap:12px; justify-items:center; width:100%; max-width:960px}
.promo-item{width:100%}
.promo-item{display:block; background:#000; border-radius:10px; overflow:hidden; border:1px solid var(--line)}
.promo-item img{display:block; width:100%; height:auto}

/* ========== Notice / Admin / Security ========== */
.notice{padding:12px 0 32px}
.admin-note{
  background:linear-gradient(180deg, #2a2f36, #1c2127);
  border:1px solid var(--line); border-radius:10px; padding:12px 14px; position:relative;
}
.admin-note strong{color:var(--primary); letter-spacing:.2px}
.admin-note__close{
  position:absolute; right:10px; top:10px; border:0; background:#eee; border-radius:8px; padding:6px 10px; cursor:pointer;
}
.admin-note ul{margin:8px 0 0 18px; color:var(--muted)}
.admin-note li{margin:4px 0}
.security-warning{
  border-left:3px solid #ff5252; background:#211d1d; padding:10px 12px; margin:14px 0; color:#ffdddd;
  border-radius:8px;
}
.center{text-align:center}

/* ========== Footer ========== */
.site-footer{border-top:1px solid var(--line); color:var(--muted); padding:16px 0; background:#0b0c0e}
.site-footer .container{text-align:center}

/* ========== Modal ========== */
.modal{position:fixed; inset:0; display:none}
.modal[aria-hidden="false"]{display:block}
.modal__backdrop{position:absolute; inset:0; background:#00000080}
.modal__dialog{
  position:relative; z-index:1; margin:10vh auto 0; width:min(92vw, 520px);
  background:#15171b; border:1px solid var(--line); border-radius:12px; padding:18px;
  box-shadow:0 24px 50px rgba(0,0,0,.55);
}
.modal__close{
  position:absolute; right:8px; top:8px; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--line); background:#0000; color:var(--text); cursor:pointer;
}

/* ========== Responsive tweaks ========== */
@media (max-width: 560px){
  html, body {height:auto}
  .container{padding:0 12px}
  .site-header .container{height:64px}
  .brand__logo{width:150px}
  .site-header .btn{display:none}
  .sticky-cta{padding:10px 0 6px}
  .sticky-cta__button{min-height:54px; max-width:100%}
  .sticky-cta__button span{font-size:18px}
  .promo-strip__inner{grid-template-columns:1fr}
  .cat-grid{
    gap:4px;
  }
  .cat-card{
    padding:2px;
  }
  .cat-card img{
    min-height: 50px;
  }
  .auth-cta__button{
    padding: 8px 16px;
    min-height: 40px;
  }
  .auth-cta__button span{
    font-size: 14px;
  }
  .carousel__nav{width:44px; height:44px}
  .carousel__dots{bottom:10px}
  .carousel__dots button{width:12px; height:12px}
  .auth-cta__inner{grid-template-columns:1fr 1fr}
}

@media (max-width: 400px){
  .container{padding:0 10px}
  .site-header .container{height:58px}
  .brand__logo{width:136px}
  .sticky-cta{padding:10px 0 6px}
  .sticky-cta__button{min-height:52px}
  .sticky-cta__button span{font-size:17px}
  .cat-grid{
    gap:2px;
  }
  .cat-card{
    padding:1px;
  }
  .cat-card img{
    min-height: 45px;
  }
  .auth-cta__button{
    padding: 6px 14px;
    min-height: 35px;
  }
  .auth-cta__button span{
    font-size: 13px;
  }
  .auth-cta__inner{grid-template-columns:1fr}
  .carousel__nav{width:42px; height:42px}
  .carousel__dots button{width:10px; height:10px}
}

/* ========== Auth CTA (styled buttons) ========== */
.auth-cta{padding:10px 0 6px}
.auth-cta__inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  justify-items:center;
}
.auth-cta__button{
  display:flex; 
  align-items:center; 
  justify-content:center;
  background: linear-gradient(28deg, #f8e48f, #f6c14f, #fff8dc);
  border-radius: 20px;
  box-shadow: inset 0 2px 6px rgba(255,255,255,0.6),
              inset 0 -2px 6px rgba(0,0,0,0.2);
  padding: 10px 20px;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  min-height: 45px;
  animation: zoomInOut 2s ease-in-out infinite;
}
.auth-cta__button span{
  color: #2c1810;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(255,255,255,0.3);
}
.auth-cta__button:hover{
  transform: translateY(-2px);
  box-shadow: inset 0 2px 6px rgba(255,255,255,0.7),
              inset 0 -2px 6px rgba(0,0,0,0.3),
              0 4px 12px rgba(246, 193, 79, 0.3);
  animation-play-state: paused;
}

/* Zoom in/out animation */
@keyframes zoomInOut {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}