/* ==========================================================================
   TuTap.vn - Tab Common CSS (Base, Nav, Scrollbars, Safe Areas)
   File: /include/css/tab_common.css
   ========================================================================== */


/* ==========================================================================
   TỐI ƯU MENU TOP:
   - 4PX: MẶC ĐỊNH CHO WEB MÁY TÍNH, TRÌNH DUYỆT ĐIỆN THOẠI (SAFARI/CHROME) & ANDROID
   - 54PX: CHỈ RIÊNG ỨNG DỤNG NATIVE APPLE IOS (FLUTTER EDGE-TO-EDGE)
   ========================================================================== */
#app-nav-container,
.sticky-nav-container,
html #app-nav-container,
body #app-nav-container,
html .sticky-nav-container,
body .sticky-nav-container,
html.is-native-ios-app #app-nav-container,
body.is-native-ios-app #app-nav-container,
html.is-native-ios-app .sticky-nav-container,
body.is-native-ios-app .sticky-nav-container,
html.is-ios-device #app-nav-container,
body.is-ios-device #app-nav-container,
html.is-ios-device .sticky-nav-container,
body.is-ios-device .sticky-nav-container,
html.is-android #app-nav-container,
body.is-android #app-nav-container,
html.is-android .sticky-nav-container,
body.is-android .sticky-nav-container,
.is-car-device .sticky-nav-container {
  padding-top: 4px !important;
  margin-top: 0 !important;
  top: 0 !important;
}

/* CHỈ RIÊNG ỨNG DỤNG FLUTTER NATIVE TRÊN IOS (chạy edge-to-edge không thanh URL) MỚI ĐỆM 54PX */
html.is-flutter-app.is-native-ios-app #app-nav-container,
body.is-flutter-app.is-native-ios-app #app-nav-container,
html.is-flutter-app.is-native-ios-app .sticky-nav-container,
body.is-flutter-app.is-native-ios-app .sticky-nav-container {
  padding-top: 54px !important;
}

/* ==========================================================================
   ẨN HOÀN TOÀN CÁC MỤC BÓI TOÁN / CHIÊM ĐOÁN / TỬ VI TRÊN THIẾT BỊ VÀ APP IOS
   Tuân thủ nghiêm ngặt Guideline 4.3(b) của Apple App Store Review
   Chỉ hiển thị trên Web máy tính và Thiết bị / App Android
   ========================================================================== */
html.is-native-ios-app .hide-on-native-ios,
body.is-native-ios-app .hide-on-native-ios,
html.is-ios-device .hide-on-native-ios,
body.is-ios-device .hide-on-native-ios,
html.is-native-ios-app .hide-on-ios,
body.is-native-ios-app .hide-on-ios,
html.is-ios-device .hide-on-ios,
body.is-ios-device .hide-on-ios,
html.is-native-ios-app #tool-video-phatphap,
body.is-native-ios-app #tool-video-phatphap {
  display: none !important;
}
html.is-native-ios-app .ios-row-item:has(+ .hide-on-native-ios)::after,
body.is-native-ios-app .ios-row-item:has(+ .hide-on-native-ios)::after,
html.is-ios-device .ios-row-item:has(+ .hide-on-native-ios)::after,
body.is-ios-device .ios-row-item:has(+ .hide-on-native-ios)::after,
html.is-native-ios-app .ios-row-item:has(+ .hide-on-ios)::after,
body.is-native-ios-app .ios-row-item:has(+ .hide-on-ios)::after,
html.is-ios-device .ios-row-item:has(+ .hide-on-ios)::after,
body.is-ios-device .ios-row-item:has(+ .hide-on-ios)::after,
html.is-native-ios-app .ios-row-item:has(+ #tool-video-phatphap)::after,
body.is-native-ios-app .ios-row-item:has(+ #tool-video-phatphap)::after {
  display: none !important;
}

/* Các tiện ích cẩm nang văn hóa lành mạnh chỉ kích hoạt trên iOS */
.show-on-ios {
  display: none !important;
}
html.is-native-ios-app .show-on-ios,
body.is-native-ios-app .show-on-ios,
html.is-ios-device .show-on-ios,
body.is-ios-device .show-on-ios {
  display: flex !important;
}
html.is-native-ios-app p.show-on-ios,
body.is-native-ios-app p.show-on-ios,
html.is-ios-device p.show-on-ios,
body.is-ios-device p.show-on-ios,
html.is-native-ios-app span.show-on-ios,
body.is-native-ios-app span.show-on-ios,
html.is-ios-device span.show-on-ios,
body.is-ios-device span.show-on-ios {
  display: inline-block !important;
}

/* ==========================================================================
   CẤU HÌNH THANH CUỘN (SCROLLBAR):
   - TRÌNH DUYỆT WEB MÁY TÍNH (DESKTOP): Hiển thị thanh cuộn rõ ràng, thẩm mỹ, dễ cuộn
   - THIẾT BỊ ĐIỆN THOẠI (MOBILE / IOS / ANDROID): Ẩn hoàn toàn thanh cuộn chuẩn Native App
   ========================================================================== */

/* 1. TRÊN MÁY TÍNH (DESKTOP): HIỂN THỊ THANH CUỘN */
html,
body {
  scrollbar-width: auto;
  -ms-overflow-style: auto;
}

@media (min-width: 769px) {
  html,
  body {
    scrollbar-width: thin;
    scrollbar-color: var(--tt-gold, #f0cf75) var(--tt-bg, #1e1612);
  }

  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    display: block;
    background: var(--tt-bg, #1e1612);
  }

  ::-webkit-scrollbar-track {
    background: var(--tt-bg, #1e1612);
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(240, 207, 117, 0.4);
    border-radius: 4px;
    border: 1px solid rgba(240, 207, 117, 0.2);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--tt-gold, #f0cf75);
  }
}

/* 2. TRÊN ĐIỆN THOẠI (MOBILE / IOS / ANDROID): ẨN TOÀN BỘ THANH CUỘN */
@media (max-width: 768px), ((max-width: 1024px) and (pointer: coarse) and (hover: none)) {
  html,
  body,
  * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  *::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent !important;
    -webkit-appearance: none !important;
  }
}

html.is-mobile-device,
body.is-mobile-device,
html.is-android,
body.is-android,
html.is-ios-device,
body.is-ios-device,
html.is-native-ios-app,
body.is-native-ios-app,
.is-mobile-device *,
.is-android *,
.is-ios-device *,
.is-native-ios-app * {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html.is-mobile-device::-webkit-scrollbar,
body.is-mobile-device::-webkit-scrollbar,
html.is-android::-webkit-scrollbar,
body.is-android::-webkit-scrollbar,
html.is-ios-device::-webkit-scrollbar,
body.is-ios-device::-webkit-scrollbar,
html.is-native-ios-app::-webkit-scrollbar,
body.is-native-ios-app::-webkit-scrollbar,
.is-mobile-device *::-webkit-scrollbar,
.is-android *::-webkit-scrollbar,
.is-ios-device *::-webkit-scrollbar,
.is-native-ios-app *::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
  -webkit-appearance: none !important;
}


/* ==========================================================================
   VÙNG ĐỆM AN TOÀN CHO IPHONE (HOME INDICATOR - SAFE AREA INSET BOTTOM)
   Tạo khoảng cách đệm tối ưu giữa thanh điều hướng đáy và vạch ngang gạt màn hình
   ========================================================================== */
.native-bottom-tabbar {
  height: 60px !important;
  background: var(--tt-tabbar-bg, #261c16);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: 1px solid var(--tt-tabbar-border, rgba(240, 207, 117, 0.08));
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
  padding-bottom: 16px !important;
  box-sizing: content-box !important;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Khi đổi sang giao diện Sáng (Light Mode) */
body.theme-light .native-bottom-tabbar,
html.theme-light .native-bottom-tabbar {
  background: rgba(250, 246, 240, 0.92) !important;
  backdrop-filter: blur(25px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
  border-top: 1px solid rgba(215, 202, 185, 0.85) !important;
  box-shadow: 0 -4px 25px rgba(60, 45, 30, 0.08) !important;
}

body.theme-light .native-tab-btn,
html.theme-light .native-tab-btn {
  color: #7d6855 !important;
}

body.theme-light .native-tab-btn.active,
html.theme-light .native-tab-btn.active {
  color: #9a6e18 !important;
}

body.theme-light .native-tab-btn.active .native-tab-icon,
html.theme-light .native-tab-btn.active .native-tab-icon {
  color: #9a6e18 !important;
}

body.theme-light .native-tab-btn.active .sf-icon,
html.theme-light .native-tab-btn.active .sf-icon {
  filter: drop-shadow(0 1px 4px rgba(154, 110, 24, 0.35)) !important;
}

body.theme-light .native-tab-dot,
html.theme-light .native-tab-dot {
  background: #9a6e18 !important;
}

body {
  padding-bottom: 96px !important;
}