/* ============================================================
   GHÉ CẬU HAI — Cà Phê • Giải Khát • Điểm Tâm
   ============================================================ */

:root {
  --gold: #f7d28a;
  --gold-soft: #ffd88f;
  --gold-deep: #d7b26a;
  --brown-900: #150d09;
  --brown-800: #1f140f;
  --brown-700: #2a1b13;
  --cream: #f6f0e6;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Be Vietnam Pro', sans-serif;
  background: var(--brown-800);
  color: #fff;
  overflow-x: hidden;
}

/* ---------- HERO ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60px 20px;
  text-align: center;
  z-index: 2;
}

/* Nền hero: hoàn toàn bằng CSS (không phụ thuộc ảnh nền) */
.hero-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 18%, rgba(120, 74, 34, .55) 0%, rgba(31, 20, 15, 0) 62%),
    radial-gradient(80% 60% at 50% 105%, rgba(90, 55, 25, .40) 0%, rgba(31, 20, 15, 0) 70%),
    linear-gradient(180deg, #150d09 0%, #241710 45%, #150d09 100%);
}

/* ---------- LOGO + ĐÈN HẮT SÁNG PHÍA SAU ---------- */

/* Bọc ngoài: chứa 2 lớp đèn hắt sáng phía sau */
.logo-lamp {
  position: relative;
  width: min(400px, 74vw);
  margin-bottom: 26px;
  isolation: isolate;
}

/* Quầng sáng lớn toả ra sau logo */
.logo-lamp::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 172%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle closest-side,
      rgba(255, 190, 105, 0) 0 50%,
      rgba(255, 184, 96, .40) 66%,
      rgba(222, 141, 52, .16) 80%,
      rgba(255, 170, 80, 0) 96%);
  filter: blur(26px);
  animation: lampPulse 5.5s ease-in-out infinite;
}

/* Viền sáng ấm ôm sát mép logo */
.logo-lamp::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 114%;
  height: 108%;
  transform: translate(-50%, -50%);
  border-radius: 44%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(closest-side,
      rgba(255, 235, 200, 0) 0 72%,
      rgba(255, 226, 172, .70) 88%,
      rgba(255, 186, 100, .20) 96%,
      rgba(255, 170, 80, 0) 100%);
  filter: blur(12px);
  animation: lampPulse 5.5s ease-in-out infinite .8s;
}

/* Tấm nền tối nằm trên lớp đèn -> ruột logo vẫn tối, ánh sáng chỉ hắt ra viền */
.logo-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  background: radial-gradient(closest-side circle at 50% 50%,
      rgba(17, 10, 6, .97) 0 55%,
      rgba(17, 10, 6, .88) 78%,
      rgba(17, 10, 6, .35) 92%,
      rgba(17, 10, 6, 0) 100%);
}

.logo-wrap img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 0 6px rgba(255, 219, 158, .55))
    drop-shadow(0 0 18px rgba(255, 180, 90, .38));
  animation: logoGlow 5.5s ease-in-out infinite;
}
/* 
/* Trong tệp style.css của bạn hoặc trong thẻ <style> */

.main-logo {
    max-width: 200px;
    height: auto;
    display: block; /* Đảm bảo logo là block element */
    margin: 0 auto; /* Căn giữa logo */
  }  
  /* Hiệu ứng: Logo đậm hơn khi di chuột qua */
.main-logo:hover {
    opacity: 1.0;
}
.logo-container {
    display: inline-block;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)); /* Gradient mờ làm nền */
    border-radius: 15px;
    backdrop-filter: blur(5px); /* Hiệu ứng làm mờ nền phía sau */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Đổ bóng nhẹ */
  }
@keyframes lampPulse {
  0%, 100% { opacity: .78; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.06); }
}

@keyframes logoGlow {
  0%, 100% {
    filter:
      drop-shadow(0 0 6px rgba(255, 219, 158, .50))
      drop-shadow(0 0 16px rgba(255, 180, 90, .32));
  }
  50% {
    filter:
      drop-shadow(0 0 9px rgba(255, 228, 178, .72))
      drop-shadow(0 0 26px rgba(255, 192, 104, .52));
  }
}

/* ---------- TEXT ---------- */

.tagline {
  letter-spacing: 4px;
  font-size: clamp(.85rem, 2.6vw, 1.2rem);
  color: #f3e3c8;
  margin-bottom: 26px;
}

.coming-soon {
  font-size: clamp(1.3rem, 5vw, 2rem);
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gold);
  margin-bottom: 16px;
  text-shadow:
    0 0 10px rgba(255, 211, 139, .8),
    0 0 25px rgba(255, 211, 139, .5);
}

.opening-date {
  font-size: clamp(2.2rem, 9vw, 4rem);
  font-family: 'Cormorant Garamond', serif;
  color: #fff6e6;
  margin-bottom: 40px;
  letter-spacing: 2px;
}

/* ---------- COUNTDOWN ---------- */

#countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 2.2vw, 20px);
  width: 100%;
  max-width: 660px;
}

.time-box {
  padding: clamp(12px, 3vw, 25px) 4px;
  border-radius: 18px;
  background: rgba(90, 60, 35, .45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 211, 139, .25);
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 178, .18),
    0 12px 30px rgba(0, 0, 0, .35);
}

.time-box span {
  display: block;
  font-size: clamp(1.7rem, 7vw, 3.6rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  text-shadow: 0 0 18px rgba(255, 200, 120, .45);
}

.time-box span.tick {
  animation: tickIn .35s ease-out;
}

@keyframes tickIn {
  from { opacity: .35; transform: translateY(-5px); }
  to   { opacity: 1;   transform: translateY(0); }
}

.time-box label {
  display: block;
  margin-top: 6px;
  font-size: clamp(.62rem, 1.8vw, .9rem);
  letter-spacing: 2px;
  color: #e9d9bd;
}

#countdown.is-open .time-box span {
  color: #fff3dd;
}

.scroll-btn {
  margin-top: 46px;
  padding: 14px 40px;
  border-radius: 30px;
  text-decoration: none;
  color: #fff;
  letter-spacing: 1px;
  border: 1px solid #d7b26a;
  transition: background .3s ease, color .3s ease, box-shadow .3s ease;
}

.scroll-btn:hover {
  background: var(--gold);
  color: #2a1b13;
  box-shadow: 0 0 26px rgba(255, 200, 120, .45);
}

/* ---------- ABOUT ---------- */

.about {
  position: relative;
  z-index: 2;
  background: var(--cream);
  color: #3b2a22;
  padding: clamp(60px, 10vw, 100px) 8%;
  text-align: center;
}

.about h2 {
  font-size: clamp(2rem, 6vw, 3rem);
  margin-bottom: 25px;
  font-family: 'Cormorant Garamond', serif;
}

.about p {
  max-width: 800px;
  margin: auto;
  line-height: 1.85;
}

/* ---------- GALLERY (placeholder thuần CSS, không lỗi ảnh) ---------- */

.gallery {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  background: var(--brown-900);
}

.card {
  position: relative;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 211, 139, .10);
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 190, 110, .16), rgba(0, 0, 0, 0) 62%),
    linear-gradient(160deg, #2c1c13 0%, #1a110c 100%);
}

.card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card .icon {
  font-size: 2.4rem;
  line-height: 1;
  filter: drop-shadow(0 0 14px rgba(255, 190, 110, .5));
}

.card .label {
  font-size: .8rem;
  letter-spacing: 3px;
  color: var(--gold);
  text-transform: uppercase;
}

/* ---------- FOOTER ---------- */

footer {
  position: relative;
  z-index: 2;
  background: #1a120e;
  padding: clamp(50px, 9vw, 80px) 20px;
  text-align: center;
}

footer img {
  width: 150px;
  margin-bottom: 18px;
  filter: drop-shadow(0 0 18px rgba(255, 190, 110, .45));
}

footer p {
  color: #cbb797;
  line-height: 1.9;
  font-size: .95rem;
}

/* ---------- A11Y ---------- */

@media (prefers-reduced-motion: reduce) {
  .logo-lamp::before,
  .logo-lamp::after,
  .logo-wrap img,
  .time-box span.tick {
    animation: none !important;
  }
}