/* ============================================================
   APPLE-STYLE PRODUCT SLIDER
   - Content aligned left with container-lg
   - Slides overflow to the right edge
   - Nav buttons: small circles, bottom-center
   ============================================================ */
   .bg-slider .slide {
       position: relative;
       width: 100%;
       height: 100%;
   }
   /* Ép video chạy toàn màn hình đè lên ảnh nền gốc */
   .bh-slider-video-bg {
       position: absolute;
       top: 50%;
       left: 50%;
       width: 100%;
       height: 100%;
       transform: translate(-50%, -50%);
       object-fit: cover;
       z-index: 1;
       pointer-events: none; /* Khách ko click chuột phải vào video đc */
   }
   /* Cấu hình riêng cho khung iframe YouTube chạy tràn tỉ lệ */
   .bh-slider-video-bg.iframe-wrap {
       width: 100vw;
       height: 56.25vw; /* Tỉ lệ chuẩn 16:9 */
       min-height: 100vh;
       min-width: 177.77vh;
   }
   .bh-slider-video-bg.iframe-wrap iframe {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }
   /* Lớp phủ tối nhẹ giúp chữ màu White nổi bật hơn nếu video quá sáng */
   .bh-slider-overlay {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(0, 0, 0, 0.15); /* Chỉnh tăng số 0.15 nếu muốn nền tối hơn nữa */
       z-index: 2;
   }
/* Wrapper: full-width background, inner aligned with container */
.apple-slider-section {

    overflow: hidden;
    position: relative;
  }
  
  /* Header: title + link, aligned with container */
  .apple-slider-header {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 36px;
  }
  @media (max-width: 991px) {
    .apple-slider-header { padding: 0 20px; }
  }
  
  .apple-slider-header h2 {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.8px;
    color: #1d1d1f;
    margin: 0;
    line-height: 1.15;
  }
  .apple-slider-header a {
    font-size: 17px;
    font-weight: 400;
    color: var(--color-link, #0071e3);
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
  }
  .apple-slider-header a:hover { text-decoration: underline; }
  @media (max-width: 767px) {
    .apple-slider-header { flex-direction: column; align-items: flex-start; gap: 8px; }
    .apple-slider-header h2 { font-size: 28px; }
    .apple-slider-header a { font-size: 15px; }
  }
  
  /* Slider viewport: starts at container left edge, overflows right */
  .apple-slider-viewport {
    max-width: 1440px;
    margin: 0 auto;
    overflow: visible !important;
    position: relative;
  }
  @media (max-width: 991px) {
    .apple-slider-viewport { padding-left: 20px; }
  }
  
  /* Flickity overrides for this section */
  .apple-slider-viewport .flickity-viewport {
    overflow: visible !important;
  }
  .apple-slider-viewport .flickity-slider {
    /* No special override needed */
  }
  
  /* Each slide card */
  .apple-slider-viewport .carousel-cell {
    width: 22vw;
    max-width: 380px;
    min-width: 240px;
    margin-right: 20px;
  }
  @media (max-width: 991px) {
    .apple-slider-viewport .carousel-cell {
      width: 42vw;
      max-width: 340px;
      min-width: 200px;
      margin-right: 16px;
    }
  }
  @media (max-width: 600px) {
    .apple-slider-viewport .carousel-cell {
      width: 76vw;
      max-width: 92vw;
      min-width: 200px;
      margin-right: 12px;
    }
  }
  
  /* Card styling — Apple-like clean */
  .apple-slider-viewport .card-products {
    background: #fff;
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    box-shadow: none;
    transition: box-shadow 0.3s;
  }
  .apple-slider-viewport .card-products:hover {
    box-shadow: 0 6px 32px rgba(0,0,0,0.07);
  }
  
  /* Image area */
  .apple-slider-viewport .card-products > a:first-child {
    display: block;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
  }
  .apple-slider-viewport .card-products > a:first-child img {
    width: 100%;
    display: block;
    border-radius: 0;
    aspect-ratio: 1/1;
    object-fit: cover;
  }
  
  /* Info area */
  .apple-slider-viewport .card-products .py-20 {
    padding: 20px 22px 24px !important;
    text-align: center;
  }
  .apple-slider-viewport .card-products h3 {
    font-size: 21px !important;
    font-weight: 600;
    letter-spacing: -0.3px;
    margin-bottom: 4px;
  }
  
  /* Color dots: centered */
  .apple-slider-viewport .card-products .d-flex.gap-2.mt-15 {
    justify-content: center;
  }
  .apple-slider-viewport .card-products .d-flex.gap-2.mt-15 .rounded-circle {
    width: 12px !important;
    height: 12px !important;
  }
  
  /* Storage pills: centered */
  .apple-slider-viewport .card-products .product-storage-row {
    justify-content: center;
  }
  
  /* Price: centered */
  .apple-slider-viewport .card-products .price-row {
    justify-content: center;
  }
  
  /* Benefit text: centered */
  .apple-slider-viewport .card-products .colored-random {
    text-align: center;
  }
  
  /* Hide default Flickity arrows & dots */
  .apple-slider-viewport .flickity-prev-next-button,
  .apple-slider-viewport .flickity-page-dots {
    display: none !important;
  }
  
  /* ============================================================
     CUSTOM NAV BUTTONS — Apple-style bottom-center
     ============================================================ */
  .apple-slider-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 36px;
  }
  
  .apple-slider-nav button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #d2d2d7;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
  }
  .apple-slider-nav button:hover {
    background: #f5f5f7;
    border-color: #b0b0b5;
  }
  .apple-slider-nav button:disabled {
    opacity: 0.3;
    cursor: default;
  }
  .apple-slider-nav button svg {
    width: 18px;
    height: 18px;
  }
  .apple-slider-nav button svg path {
    fill: #1d1d1f;
  }
  @media (max-width: 600px) {
    .apple-slider-nav { margin-top: 24px; }
    .apple-slider-nav button { width: 36px; height: 36px; }
    .apple-slider-nav button svg { width: 16px; height: 16px; }
  }

  .promo-apple-section {

    background: #f5f5f7;
    overflow: hidden;
  }
  @media (max-width: 767px) {
    .promo-apple-section { padding: 50px 0 40px; }
  }
  
  /* Header */
  .promo-apple-header {
    margin: 0 auto 36px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
  @media (max-width: 991px) { .promo-apple-header { padding: 0 20px; } }
  .promo-apple-header h2 {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.8px;
    color: #1d1d1f;
    margin: 0;
    line-height: 1.15;
    max-width: 600px;
  }
  .promo-apple-header a {
    font-size: 17px;
    color: var(--color-link, #0071e3);
    text-decoration: none;
    white-space: nowrap;
  }
  .promo-apple-header a:hover { text-decoration: underline; }
  @media (max-width: 767px) {
    .promo-apple-header { flex-direction: column; align-items: flex-start; gap: 8px; }
    .promo-apple-header h2 { font-size: 28px; }
    .promo-apple-header a { font-size: 15px; }
  }
  
  /* Card grid */
  .promo-apple-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  @media (max-width: 991px) {
    .promo-apple-grid {
      padding: 0 20px;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
    }
  }
  @media (max-width: 575px) {
    .promo-apple-grid {
      padding: 0 16px;
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -ms-overflow-style: none;
      gap: 12px;
      -webkit-overflow-scrolling: touch;
    }
    .promo-apple-grid::-webkit-scrollbar { display: none; }
  }
  
  /* Card */
  .promo-apple-card {
    background: #fff;
    border-radius: 20px;
    padding: 30px 26px 26px;
    display: flex;
    flex-direction: column;
    min-height: 420px;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.25s;
    cursor: default;
  }
  .promo-apple-card:hover {
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.06);
  }
  @media (max-width: 575px) {
    .promo-apple-card {
      flex: 0 0 78vw;
      min-height: 380px;
      scroll-snap-align: start;
    }
  }
  
  /* Label */
  .promo-apple-label {
    font-size: 12px;
    font-weight: 700;
    color: #1d1d1f;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 8px;
  }
  
  /* Title */
  .promo-apple-card h3 {
    font-size: 24px;
    font-weight: 700;
    color: #1d1d1f;
    line-height: 1.2;
    letter-spacing: -0.4px;
    margin-bottom: 12px;
  }
  @media (max-width: 767px) {
    .promo-apple-card h3 { font-size: 20px; }
  }
  
  /* Description */
  .promo-apple-desc {
    font-size: 14px;
    color: #6e6e73;
    line-height: 1.55;
    margin: 0;
  }
  
  /* Bottom area: icon/illustration + button */
  .promo-apple-bottom {
    margin-top: auto;
    padding-top: 20px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }
  
  /* Large icon area */
  .promo-apple-illustration {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex: 1;
  }
  .promo-apple-illustration .promo-big-icon {
    font-size: 64px;
    line-height: 1;
    filter: grayscale(0.1);
  }
  @media (max-width: 575px) {
    .promo-apple-illustration .promo-big-icon { font-size: 48px; }
  }
  
  /* Circle + button */
  .promo-apple-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #1d1d1f;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
  }
  .promo-apple-btn:hover {
    background: #424245;
    transform: scale(1.06);
  }
  .promo-apple-btn svg {
    width: 14px;
    height: 14px;
  }