@import url('https://fonts.googleapis.com/css?family=Inter:400,600&display=swap');
body, html {
  margin:0;

  padding:0;
  font-family:'Inter',sans-serif;
  background-color: #f5f5f5;
  color:#333;
}
/* Center background image with fixed width and side margins */
body {
  background-image: url('assets/loading.png');
  background-repeat: repeat-y;
  background-position: top center;
  background-size: 1200px auto;
}
.container { width:90%; max-width:512px; margin:0 auto; }

/* Header */
.header { background:rgba(255,255,255,0.9); box-shadow:0 2px 4px rgba(0,0,0,0.1); position:sticky; top:0; z-index:100; }
.main-nav ul { list-style:none; display:flex; flex-wrap:wrap; align-items:center; margin:0; padding:10px 0; justify-content:center; }
.main-nav li { position:relative; margin:0 10px; }
.main-nav a { text-decoration:none; color:#333; padding:8px; font-size:0.9rem; }
.dropdown:hover .sub-nav { display:block; }
.sub-nav { position:absolute; top:100%; left:0; background:#fff; box-shadow:0 2px 4px rgba(0,0,0,0.1); list-style:none; min-width:150px; }
.sub-nav li { margin:0; }
.sub-nav a { display:block; padding:8px 12px; white-space:nowrap; }
.main-nav .dropdown {
  position: relative;
}

/* 2. Ẩn sub-nav mặc định */
.main-nav .sub-nav {
  display: none;
  position: absolute;     /* bắt buộc để nó không làm giãn layout */
  top: 100%; left: 0;      /* xuất hiện ngay bên dưới item cha */
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 10;
}

/* 3. Khi hover vào dropdown (hoặc con của nó) thì show sub-nav */
.main-nav .dropdown:hover .sub-nav {
  display: block;
}

/* Khi hover lên menu item */
.main-nav li:hover > a {
  background-color: #007bff;
  color: #fff;
  border-radius: 4px;
  transition: background-color 0.2s, color 0.2s;
}

/* Khi đang ở trang đó (thêm class="active" vào <li>) */
.main-nav li.active > a {
  background-color: #0056b3;
  color: #fff;
}

/* Nếu bạn muốn highlight đường viền bên dưới */
.main-nav li.active > a,
.main-nav li:hover > a {
  box-shadow: inset 0 -3px 0 #ffdd57;
}

/*$1*/
/*

/* Slider Frame */
.slider {
  width: 600px;
  height: 330px;
  margin: 20px auto 0;
  position: relative;
  overflow: hidden;   /* đảm bảo không thấy phần tràn ra */
}

/* Khung “viền” overlay */
.slider::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: url('assets/thumbs/Video.png') no-repeat center center;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 2;
}

/* Đổi .slides thành flex container để tự động canh giữa */
.slider .slides {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  overflow: hidden;   /* đảm bảo không thấy phần tràn ra */
}

/* Ảnh con chỉ được to tối đa theo khung, giữ tỉ lệ */
.slider .slides img {
  max-width: 88%;
  max-height: 90%;
  object-fit: contain;   /* hoặc cover nếu muốn phủ kín */
  display: block;
  margin: 20px auto 0;
}

/* Prev/Next: căn dọc giữa (.slider là position:relative) */
.slider .prev,
.slider .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  border: none;
  color: #fff;
  font-size: 1.5rem;
  padding: 8px;
  cursor: pointer;
  border-radius: 50%;
  z-index: 5;
}

.slider .prev { left: 10px; }
.slider .next { right: 10px; }

/* slider controls */
/* hiện ảnh đầu */
.slider .slides img:nth-child(1) {
  display: block;
}

/* Controls container */
.slider-controls {
  position: absolute;
  bottom: 10px; right: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 5;
}

/* Nút chung */
.slider-controls button {
  background: rgba(0,0,0,0.5);
  border: none;
  color: #fff;
  font-size: 1.2rem;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 4px;
}

/* Counter hiển thị số */
.slider-controls .counter {
  color: #fff;
  font-size: 0.9rem;
}



/* Description */
.description { background:rgba(255,255,255,0.1); padding:40px 0; text-align:center; }
.features-list { list-style:none; padding:0; max-width:800px; margin:20px auto; text-align:left; }
.features-list li { margin-bottom:10px; }
.cta a { color:#007bff; text-decoration:none; }

/* Download */
.download { background:rgba(255,255,255,0.1); padding:30px 0; text-align:center; margin: 100,100, 100, 100;}
.download img { width:150px; margin:0 10px; }
.download .logo img { width:200px; height:200px; display:block; margin:20px auto; }

/* Support */
.support { background:rgba(255,255,255,0.9); padding:20px 0; text-align:center; font-size:0.9rem; }
.support a { color:#007bff; text-decoration:none; }

/* Footer */
.footer { background:#333; color:#fff; text-align:center; padding:15px 0; font-size:0.85rem; }
.footer a { color:#fff; text-decoration:none; }

/* Responsive */
@media(max-width:768px) {
  .main-nav ul { flex-direction:column; }
  .slider { width:100%; height:auto; margin:80px auto 0; background:rgba(255,255,255,0.1);}
  .slider .slides img { height:auto; }
  .description, .download, .support { padding:20px 0; }
}

.sub-nav {
  display: none;
}
.dropdown:hover > .sub-nav {
  display: block;
}