@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
* { margin:0; padding:0; box-sizing:border-box;}
html,body { height:auto; min-height:100vh; overflow-x:hidden; overflow-y:auto; text-decoration: none; }
body { color:#fff; text-align:center; }
/* Font ROBOTO + mỏng đẹp */
body {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

/* Bỏ gạch chân link */
a, a:hover, a:visited, a:active {
  text-decoration: none !important;
  color: inherit !important;
}

/* Thẻ b và strong → dày vừa 500 */
b, strong {
  font-weight: 500 !important;
}
.logotop{max-width:350px; text-align:center;}
.logo{width:350px; height: auto;}
.bg-video { position:fixed !important; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:-2; opacity:0; transition:opacity 1s; }
.bg-video.loaded { opacity:1; }
.bg-fallback { position:fixed; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:-2; opacity:1; transition:opacity 1s; }
.bg-fallback.fade-out { opacity:0; }
.bg-overlay { position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,0.55); z-index:-1; pointer-events:none; }

.main-container { 
  max-width:420px; margin:40px auto; padding:35px 20px; gap:30px;
  background:rgba(0,0,0,0.35); border-radius:24px; backdrop-filter:blur(8px); 
  box-shadow:0 10px 30px rgba(0,0,0,0.5); position:relative; z-index:1; 
  display:flex; flex-direction:column; align-items:center; 
}
@media (min-width:768px) { 
  .main-container { max-width:680px; padding:50px 40px; gap:30px; margin:60px auto; } 
}

.header-text h1 { font-size:2.2rem; font-weight:bold; color:#fff; text-shadow:3px 3px 10px rgba(0,0,0,0.9); }
.header-text p { font-size:1.2rem; margin:10px 0 10px; color:#fff; text-shadow:3px 3px 10px rgba(0,0,0,0.9);}
@media (min-width:768px) { 
  .header-text h1 { font-size:3.8rem; } 
  .header-text p { margin:15px 0 20px; }
}

.wheel-container { position:relative; width:340px; height:340px; margin:0 auto; }
@media (min-width:768px) { .wheel-container { width:600px; height:600px; } }
#wheel,#centerCanvas { position:absolute; top:0; left:0; width:100%; height:100%; border-radius:50%; box-shadow:0 0 40px rgba(0,0,0,0.8); }
#wheel { transition:transform 4.5s cubic-bezier(0.17,0.67,0.12,0.99); z-index:1; }
#centerCanvas { z-index:2; cursor:pointer; }
.pointer { position:absolute; top:-20px; left:50%; transform:translateX(-50%); border-left:30px solid transparent; border-right:30px solid transparent; border-top:65px solid #ffd700; z-index:10; filter:drop-shadow(0 8px 12px rgba(0,0,0,0.6)); }
@media (min-width:768px) { .pointer { top:-28px; border-left:38px solid transparent; border-right:38px solid transparent; border-top:80px solid #ffd700; } }

.spin-btn { padding:16px 60px; font-size:1.6rem; font-weight:bold; background:#ffd700; color:#333; border:none; border-radius:50px; cursor:pointer; box-shadow:0 8px 25px rgba(255,215,0,0.5); }
.spin-btn:hover { background:#ffc107; transform:translateY(-5px); }

.partner-section { margin-top:50px; padding:0 15px; }
.partner-title { font-size:1.9rem; font-weight:bold; color:#ffd700; margin-bottom:35px; }
.partner-grid { display:grid; gap:10px; max-width:1300px; margin:0 auto; padding:0 28px; }
@media (max-width:767px) { .partner-grid { grid-template-columns:repeat(2,1fr); padding:0 20px; } }
@media (min-width:768px) { .partner-grid { grid-template-columns:repeat(3,1fr); padding:0 35px; } }

.partner-item { background:rgba(255,255,255,0.18); border-radius:26px; padding:36px 20px; backdrop-filter:blur(15px); box-shadow:0 12px 40px rgba(0,0,0,0.5); transition:all .3s ease; display:flex; flex-direction:column; align-items:center; }
.partner-item:hover { transform:translateY(-12px) scale(1.06); background:rgba(255,255,255,0.26); }
.partner-item img { width:100%; max-width:220px; height:auto; object-fit:contain; padding:0; border-radius:18px; margin-bottom:24px; filter:drop-shadow(0 8px 20px rgba(0,0,0,0.6)); }
.register-btn { width:95%; padding:16px 20px; background:#ff5252; color:white; font-weight:bold; text-decoration:none; border-radius:50px; font-size:1.28rem; text-align:center; white-space:nowrap; }
.register-btn:hover { background:#e64545; }

.contact-bar { position:fixed; z-index:9999; display:flex; gap:18px; padding:12px; border-radius:50px; backdrop-filter:blur(10px); }
@media (min-width:769px) { .contact-bar { flex-direction:column; right:15px; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.1); } }
@media (max-width:768px) { .contact-bar { flex-direction:row; justify-content:center; left:50%; bottom:15px; transform:translateX(-50%); background:rgba(255,255,255,0.15); } }
.contact-btn { position:relative; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,0.3); transition:all .3s; }
.contact-btn img { width:30px; height:30px; filter:brightness(0) invert(1); }
.contact-btn:hover { transform:scale(1.2); }
.ring,.ring-inner { position:absolute; border-radius:50%; border:4px solid transparent; animation:spin 1.8s linear infinite; }
.ring { width:72px; height:72px; border-top-color:currentColor; border-right-color:currentColor; opacity:0.9; }
.ring-inner { width:64px; height:64px; border-bottom-color:currentColor; border-left-color:currentColor; opacity:0.7; animation-direction:reverse; }
@keyframes spin { to { transform:rotate(360deg); } }
.telegram { background:#229ED9; color:#6CCFFC; }
.facebook { background:#1877F2; color:#5BA8FF; }
.zalo { background:#00ADEF; color:#4DD0FF; }

.popup-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.92); justify-content:center; align-items:center; z-index:1500; padding:15px; pointer-events:none; }
.popup { pointer-events:auto; background:white; max-width:420px; width:100%; border-radius:18px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,0.7); animation:popupShow .5s; position:relative; z-index:1501; }
@keyframes popupShow { from{transform:scale(0.7);opacity:0} to{transform:scale(1);opacity:1} }
.popup-header { background:linear-gradient(45deg,#ff6b6b,#ff8e8e); color:white; padding:20px; text-align:center; font-size:1.6rem; font-weight:bold; position:relative; }
.close-popup { position:absolute; top:10px; right:15px; font-size:2rem; cursor:pointer; opacity:0.8; }
.popup-body { padding:30px 25px; text-align:center; }
.prize-img { width:100px; height:100px; object-fit:contain; margin:0 auto 15px; border-radius:12px; }
.prize-name { font-size:1.6rem; font-weight:bold; color:#333; margin:12px 0; }
.prize-desc { color:#555; margin-bottom:25px; line-height:1.6; }
.claim-btn { padding:14px 40px; background:#4CAF50; color:white; border:none; border-radius:60px; cursor:pointer; font-weight:bold; font-size:1.1rem; }
.claim-btn:hover { background:#45a049; transform:scale(1.06); }

#confetti-canvas { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:2000 !important; }

/* CONTENT - CANH ĐỀU (JUSTIFY) ĐẸP NHƯ BÁO */
.content-section { margin:60px 0px 20px; }
.content-title { 
  font-size:2rem; 
  color:#ffd700; 
  margin-bottom:25px; 
  text-shadow:0 0 15px rgba(255,215,0,0.4); 
}
@media (min-width:768px) { .content-title { font-size:2.5rem; } }

.content-wrapper { 
  background:rgba(255,255,255,0.12); 
  border-radius:20px; 
  padding:28px; 
  backdrop-filter:blur(12px); 
  box-shadow:0 10px 30px rgba(0,0,0,0.5); 
}
.content-text { 
  font-size:1.05rem; 
  line-height:1.8; 
  color:#fff; 
  text-align:justify !important;      /* Canh đều 2 bên */
  text-justify: inter-word;         /* Canh đều đẹp trên mọi trình duyệt */
  hyphens: auto;                 /* Ngắt từ tự động nếu cần */
  word-wrap: break-word;           /* Đảm bảo không tràn chữ dài */
  max-height:300px; 
  overflow:hidden; 
  transition:max-height 0.7s ease; 
}
.content-text.expanded { max-height:5000px; }

.expand-btn { 
  margin-top:20px; 
  padding:12px 40px; 
  background:#ffd700; 
  color:#333; 
  border:none; 
  border-radius:50px; 
  font-weight:bold; 
  font-size:1.15rem; 
  cursor:pointer; 
  box-shadow:0 6px 20px rgba(255,215,0,0.5); 
  transition:all .3s; 
}
.expand-btn:hover { background:#ffc107; transform:translateY(-4px); }

/* ẢNH ĐẠI DIỆN HÌNH TRÒN + NỀN ĐỔ BÓNG TRONG SUỐT, LỚN HƠN ẢNH */
.logo-circle-container {
  position: relative;
  width: 340px;
  height: 340px;
  margin: 0 auto;
}
@media (min-width:768px) {
  .logo-circle-container { width: 600px; height: 600px; }
}

/* Ảnh đại diện chính xác 512px trên PC */
.logo-circle-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 512px;
  height: 512px;
  object-fit: cover;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  box-shadow: 0 0 50px rgba(0,0,0,0.9);
}

/* Mobile: lớn hơn +15px (295px) */
@media (max-width:767px) {
  .logo-circle-img {
    width: 295px !important;
    height: 295px !important;
  }
}

/* Nền đổ bóng TRONG SUỐT - chỉ có viền + bóng đen (giống vòng quay cũ) */
.logo-circle-container::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 101%;   /* lớn hơn ảnh một chút */
  height: 101%;
  border-radius: 50%;
  border: 8px solid transparent;
  background: transparent;
  box-shadow: 0 0 60px rgba(0,0,0,0.8);
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
}

/* Bỏ mũi tên pointer hoàn toàn */
.logo-circle-container .pointer {
  display: none !important;
}

/* Bỏ gạch chân chữ ĐĂNG KÝ NGAY */
.register-btn-no-underline,
.register-btn-no-underline:hover {
  text-decoration: none !important;
}
/* FIX HOA THỊ ĐẦU DÒNG CHO UL LI - ĐẸP NHƯ BÁO */
.content-text ul {
  margin: 20px 0;
  padding-left: 0;
  list-style: none; /* bỏ kiểu mặc định của trình duyệt */
}

.content-text ul li {
  position: relative;
  padding-left: 28px; /* thụt lề */
  margin-bottom: 12px;
  line-height: 1.7;
  color: #fff;
  text-align: left; /* nếu bạn muốn canh trái thay vì justify */
}

/* Tạo hoa thị đẹp bằng pseudo-element */
.content-text ul li::before {
  content: "★";           /* hoa thị đẹp (bạn có thể đổi thành • ◦ ✦ ❖ ✓ ► nếu muốn) */
  color: #ffd700;         /* màu vàng giống tiêu đề */
  font-size: 1.1em;
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 2px;
}

/* Nếu bạn muốn hoa thị vuông hoặc hình khác */
.content-text ul li::before {
  content: "◆";           /* đổi thành ◆ ■ ► ★ ☀ ✓ tùy thích */
  color: #ffd700;
}