/* ==========================================================================
   TỔNG HỢP RESPONSIVE - ĐIỀU CHỈNH GIAO DIỆN CHO CÁC THIẾT BỊ KHÁC NHAU
   NGUYÊN NHÂN & LÝ DO: Tập hợp toàn bộ CSS xử lý cho Mobile/Laptop vào 1 file duy nhất để dễ bảo trì.
   Bao gồm xử lý thu/phóng cho NHÓM 1 (Menu), NHÓM 2, NHÓM 3 (Các nút FAB) và NHÓM 4, 5, 7 (Các Popup/Video).
   ========================================================================== */

/* ================= 1. DÀNH CHO ĐIỆN THOẠI DI ĐỘNG (Màn hình nhỏ hơn 768px) ================= */

@media screen and (max-width: 768px) {
  /* NGUYÊN NHÂN & MỤC ĐÍCH: 768px là điểm ngắt (breakpoint) tiêu chuẩn phổ biến của iPad và các thiết bị di động. 
     LỢI ÍCH: Đoạn code trong ngoặc này CHỈ kích hoạt khi màn hình hẹp hơn 768px, giúp giao diện tự động bóp nhỏ lại để không tràn viền điện thoại. 
     
     💡 HƯỚNG DẪN CHỈNH SỬA: Nếu bạn thấy trên điện thoại menu vẫn còn to, hãy giảm các thông số (width, font-size) ở bên dưới. */
  /* --- NHÓM 1: ĐIỀU CHỈNH MENU CHÍNH --- */
  .side-menu {
    width: 250px;
    /* NGUYÊN NHÂN & LÝ DO: Thu hẹp chiều rộng khung menu chính từ 300px xuống 250px cho vừa màn hình điện thoại. */
  }
  .menu-toggle.active {
    left: calc(250px - 35px);
    /* NGUYÊN NHÂN & LÝ DO: Nút bấm phải lùi tọa độ lại cho khớp với chiều rộng mới của menu (250px). */
  }
  .menu-items a {
    font-size: 1rem;
    /* NGUYÊN NHÂN & LÝ DO: Giảm cỡ chữ của các mục menu xuống. */
  }
  .logo-wrapper {
    width: 90px;
    margin-bottom: 20px;
    /* NGUYÊN NHÂN & LÝ DO: Giảm kích thước logo chính. */
  }
  .logo-ticker img {
    height: 45px;
    margin: 0 8px;
    /* NGUYÊN NHÂN & LÝ DO: Giảm kích thước các logo đối tác trong băng chuyền. */
  }
  .menu-address {
    font-size: 0.7rem;
    padding: 5px;
    /* NGUYÊN NHÂN & LÝ DO: Giảm cỡ chữ địa chỉ. */
  }
  /* --- NHÓM 4: ĐIỀU CHỈNH VIDEOS INTRO KHI TRÊN ĐIỆN THOẠI --- */
  .intro-video-container {
    width: 95%;
    /* NGUYÊN NHÂN & LÝ DO: Mở rộng khung video ra chiếm gần hết màn hình ngang của điện thoại (không dùng 80% nữa). */
  }
  .intro-video {
    object-position: center;
    /* NGUYÊN NHÂN & LÝ DO: Luôn giữ vùng trung tâm của video ở chính giữa màn hình, tránh bị cắt mất nội dung quan trọng hai bên khi xem trên điện thoại dọc. */
  }
  .close-intro-btn,
  .close-cart-btn {
    top: -10px;
    right: -10px;
    width: 35px;
    height: 35px;
    /* NGUYÊN NHÂN & LÝ DO: Thu nhỏ nút tắt và kéo gọn lại để tránh bị văng ra khỏi mép màn hình. */
  }
}

/* ================= 2. DÀNH CHO MÁY TÍNH BẢNG / MÀN HÌNH VỪA (Nhỏ hơn 900px) ================= */

@media screen and (max-width: 900px) {
  /* 💡 HƯỚNG DẪN CHỈNH SỬA: Đây là mốc dành cho màn hình Tablet (Máy tính bảng) hoặc khi người dùng thu nhỏ cửa sổ trình duyệt trên máy tính. */
  /* --- NHÓM 2 & NHÓM 3: ẨN CÁC NÚT PHỤ KHI MENU CHÍNH MỞ TUNG RA --- */
  .side-menu.active ~ .bottom-center-wrapper {
    /* NGUYÊN NHÂN & LÝ DO: Ẩn cụm nút trung tâm (NHÓM 2) khi menu chính (NHÓM 1) mở ra để không gây vướng víu. */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-50%) scale(0) !important;
    pointer-events: none;
    /* LỢI ÍCH: Thu nhỏ, làm mờ hoàn toàn và vô hiệu hóa click để trả lại không gian trống. Hiệu ứng này khớp thời gian 0.4s với lúc menu trượt ra. */
  }
}

/* ================= 3. DÀNH CHO MÁY TÍNH BÀN / LAPTOP (Màn hình lớn hơn 1024px) ================= */

@media screen and (min-width: 1024px) {
  /* 💡 HƯỚNG DẪN CHỈNH SỬA: Ở mốc này ta dùng "min-width" (LỚN HƠN 1024px). Những CSS trong này CHỈ KÍCH HOẠT trên Máy tính bàn / Laptop để phóng to các giao diện lên tối đa. */
  /* --- NHÓM 4: ĐIỀU CHỈNH VIDEOS INTRO FULL MÀN HÌNH TRÊN PC --- */
  .intro-video-container {
    width: 100%;
    height: 100%;
    max-width: none;
    /* NGUYÊN NHÂN & LÝ DO: Gỡ bỏ giới hạn 80% và 900px, ép khung chứa video bung tràn 100% diện tích màn hình. */
    aspect-ratio: auto;
    /* NGUYÊN NHÂN & LÝ DO: Gỡ bỏ ép buộc tỷ lệ 16:9, cho phép khung chứa co giãn tự do theo tỷ lệ thực tế của màn hình người dùng. */
    border-radius: 0;
    /* NGUYÊN NHÂN & LÝ DO: Xóa bo góc để khung hình vuông vức khít với các góc màn hình máy tính. */
  }
  .intro-video-container::before,
  .intro-video-container::after {
    border-radius: 0;
    /* NGUYÊN NHÂN & LÝ DO: Xóa bo góc của lớp hiệu ứng kính mờ và lớp viền sáng vàng cho đồng bộ với khung bên ngoài. */
  }
  .intro-video {
    width: 100%;
    height: 100%;
    /* NGUYÊN NHÂN & LÝ DO: Ghi đè lệnh calc(100% - 10px), xóa lề để video lan sát ra tận mép màn hình. */
    border-radius: 0;
    /* NGUYÊN NHÂN & LÝ DO: Xóa bo góc của chính video. Kết hợp với object-fit: cover (có sẵn ở file gốc) đảm bảo video che kín mọi khoảng đen. */
  }
  .close-intro-btn {
    top: 25px;
    right: 25px;
    /* NGUYÊN NHÂN & LÝ DO: Vì video đã tràn sát mép màn hình, nút "X" phải đẩy lùi ngược vào bên trong 25px để không bị văng ra khỏi màn hình. */
  }
}

/* ================= 4. DÀNH CHO MÀN HÌNH CHIỀU CAO THẤP (Nhỏ hơn 700px) ================= */

@media screen and (max-height: 700px) {
  /* NGUYÊN NHÂN & LÝ DO: Đối với các laptop có màn hình nhỏ, hoặc điện thoại khi xoay ngang, chiều cao sẽ bị hạn chế trầm trọng.
     LỢI ÍCH: Đoạn code này kích hoạt khi màn hình LÙN HƠN 700px, ép các khoảng trống nhỏ lại để logo và địa chỉ không bị đẩy tràn ra khỏi màn hình (mất chữ). 
     
     💡 HƯỚNG DẪN CHỈNH SỬA: Nếu bạn xoay ngang điện thoại mà thấy menu vẫn bị lấp mất chữ, hãy tìm các thuộc tính margin/padding ở dưới và chỉnh cho nhỏ hơn nữa. */
  /* --- NHÓM 1: ĐIỀU CHỈNH MENU CHÍNH KHI MÀN HÌNH LÙN --- */
  .side-menu {
    overflow-y: auto;
    scrollbar-width: none;
    /* NGUYÊN NHÂN & LÝ DO: Cho phép cuộn dọc nội dung menu nếu màn hình quá thấp (điện thoại xoay ngang). Ẩn thanh cuộn trên Firefox. */
    pointer-events: auto;
    /* NGUYÊN NHÂN & LÝ DO: Bắt buộc khôi phục lại độ cứng (auto) thì người dùng mới có thể dùng ngón tay vuốt cuộn menu được trên các màn hình lùn. */
  }
  .side-menu::-webkit-scrollbar {
    display: none;
    /* NGUYÊN NHÂN & LÝ DO: Ẩn thanh cuộn trên Chrome/Safari. */
  }
  .menu-items {
    margin-top: 10px;
    margin-bottom: 10px;
    /* NGUYÊN NHÂN & LÝ DO: Ép các khoảng cách dọc (margin) nhỏ lại để các thành phần không bị đẩy ra ngoài. */
  }
  .menu-items li {
    margin-bottom: 5px;
  }
  .menu-items a {
    font-size: 14px;
  }
  .logo-wrapper {
    margin-bottom: 10px;
    width: 60px;
    /* NGUYÊN NHÂN & LÝ DO: Thu nhỏ logo hơn nữa để tiết kiệm không gian dọc. */
  }
  .logo-ticker {
    margin-bottom: 5px;
    padding: 5px 0;
  }
  .logo-ticker img {
    height: 40px;
  }
  .menu-address {
    font-size: 0.65rem;
    padding: 5px;
  }
  /* --- NHÓM 2: ĐIỀU CHỈNH NÚT TRUNG TÂM (FAB) KHI MÀN HÌNH LÙN --- */
  .bottom-center-wrapper {
    bottom: 10px;
    transform: translateX(-50%) scale(0.85);
    /* NGUYÊN NHÂN & LÝ DO: Khi xoay ngang điện thoại, đẩy nút trung tâm xuống sát đáy và thu nhỏ lại một chút để không che mất tầm nhìn. */
  }
  /* --- NHÓM 3: ĐIỀU CHỈNH NÚT BÊN PHẢI KHI MÀN HÌNH LÙN --- */
  .side-menu.active ~ .bottom-right-wrapper {
    /* NGUYÊN NHÂN & LÝ DO: Ẩn cụm nút bên phải khi menu chính mở ra. Dùng scale(0) thay vì translateX để nó thu nhỏ tại chỗ chứ không bị giật lùi về giữa màn hình. */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scale(0) !important;
    pointer-events: none;
  }
}