/* Bảng vàng thành tích — iPad Mini landscape only (1024x768 landscape).
   Strict viewport scope: No effect on portrait, other tabs, or other devices. */
@media (width: 1024px) and (height: 768px) and (orientation: landscape) {

  /* Shell / Layout */
  html, body {
    overflow-x: hidden !important;
  }

  .learning-sidebar {
    width: 184px !important;
    padding: 10px 8px !important;
    gap: 10px !important;
  }
  .learning-page-content {
    padding-left: 184px !important;
  }
  .learning-page-header {
    left: 184px !important;
    right: 0 !important;
    height: 62px !important;
    min-height: 62px !important;
    padding: 7px 12px !important;
  }
  .learning-page-header ~ main {
    padding-top: 74px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 24px !important;
  }

  /* Main vertical stack */
  .bvt-main-stack {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    gap: 14px !important;
    grid-template-columns: none !important;
  }

  /* Defensive reset: prevent any character-by-character vertical text breaking */
  .bvt-main-stack,
  .bvt-main-stack * {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    box-sizing: border-box !important;
  }

  /* 1. Profile banner */
  .bvt-profile-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .bvt-profile-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 235px !important;
    align-items: center !important;
    gap: 14px !important;
  }
  .bvt-profile-main {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 12px !important;
  }
  #bvt-avatar-box {
    width: 80px !important;
    height: 80px !important;
    flex: 0 0 80px !important;
    font-size: 44px !important;
  }
  #bvt-child-name {
    font-size: 22px !important;
    line-height: 27px !important;
  }
  .bvt-current-title-row,
  .bvt-school-row {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .bvt-star-area {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .bvt-star-vault {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
  }
  .bvt-reward-button {
    width: 100% !important;
    max-width: none !important;
    height: 42px !important;
  }

  /* 2. ẨN PHẦN CÂY NĂNG LỰC THEO YÊU CẦU */
  .bvt-competency-card {
    display: none !important;
  }

  /* Bố cục 2 cột cân đối: Biểu Đồ Năng Lực (trái) và Bảng Thành Tích Hôm Nay (phải) */
  .bvt-competency-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* Cột trái: Biểu đồ năng lực + Chuỗi học tập */
  .bvt-competency-layout > .bvt-insight-column {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-content: flex-start !important;
  }

  .bvt-radar-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 12px 16px !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .bvt-radar-title {
    font-size: 19px !important;
    line-height: 24px !important;
  }
  .bvt-radar-visual {
    width: 195px !important;
    height: 195px !important;
    margin: 2px auto !important;
  }
  .bvt-radar-visual svg text {
    font-size: 9.5px !important;
    font-weight: 700 !important;
  }
  .bvt-daily-tip {
    width: 100% !important;
    margin-top: 4px !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
  }
  .bvt-daily-tip p {
    font-size: 10px !important;
    line-height: 14px !important;
  }

  .bvt-streak-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 10px 14px !important;
    border-radius: 14px !important;
    gap: 10px !important;
  }
  .bvt-streak-card .w-20 {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
  }
  .bvt-streak-card h4 {
    font-size: 15px !important;
    line-height: 19px !important;
  }
  .bvt-streak-card p,
  .bvt-streak-card span {
    font-size: 10px !important;
    line-height: 13.5px !important;
  }

  /* Cột phải: Bảng thành tích hôm nay (Today's Leaderboard) - Thiết kế cao cấp & chuyên nghiệp */
  .bvt-competency-layout > .bvt-today-leaderboard-card {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 14px 16px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05) !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Thanh nhấn màu tinh tế trên đầu thẻ */
  .bvt-competency-layout > .bvt-today-leaderboard-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, #f59e0b, #10b981, #06b6d4) !important;
  }

  /* Header bảng thành tích */
  .bvt-today-leaderboard-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding-bottom: 2px !important;
  }
  .bvt-today-leaderboard-head > div:first-child {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
  }

  /* Kicker: Huy hiệu vàng nổi bật */
  .bvt-today-leaderboard-kicker {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    width: fit-content !important;
    padding: 2px 7px !important;
    background: #fef3c7 !important;
    color: #b45309 !important;
    border: 1px solid #fde68a !important;
    border-radius: 999px !important;
    font-size: 9.5px !important;
    line-height: 12px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 2px !important;
  }

  /* Tiêu đề chính */
  .bvt-today-leaderboard-head h2 {
    margin: 0 !important;
    font-size: 19px !important;
    line-height: 24px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    letter-spacing: -0.01em !important;
    white-space: normal !important;
  }

  /* Phụ đề */
  .bvt-today-leaderboard-head p {
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 14px !important;
    color: #64748b !important;
    font-weight: 600 !important;
  }

  /* Huy hiệu ngày tháng */
  .bvt-today-leaderboard-date {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    padding: 5px 8px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    color: #334155 !important;
  }
  .bvt-today-leaderboard-date > .material-symbols-outlined {
    font-size: 17px !important;
    color: #0284c7 !important;
  }
  .bvt-today-leaderboard-date > span:last-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
  }
  .bvt-today-leaderboard-date strong {
    font-size: 8.5px !important;
    line-height: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: #64748b !important;
    letter-spacing: 0.03em !important;
  }
  .bvt-today-leaderboard-date small {
    font-size: 10.5px !important;
    line-height: 13px !important;
    font-weight: 900 !important;
    color: #0369a1 !important;
  }

  /* Danh sách người chơi */
  .bvt-today-leaderboard-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 !important;
  }

  /* Hàng người chơi */
  .bvt-today-leaderboard-row {
    min-height: 42px !important;
    display: grid !important;
    grid-template-columns: 28px 30px minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 5px 10px !important;
    background: #fafaf9 !important;
    border: 1px solid #f0eee9 !important;
    border-radius: 11px !important;
  }

  /* Hiệu ứng bục vinh quang Top 1, 2, 3 */
  .bvt-today-leaderboard-row:nth-child(1) {
    background: linear-gradient(90deg, #fffbeb 0%, #ffffff 100%) !important;
    border-color: #fde68a !important;
  }
  .bvt-today-leaderboard-row:nth-child(2) {
    background: linear-gradient(90deg, #f8fafc 0%, #ffffff 100%) !important;
    border-color: #e2e8f0 !important;
  }
  .bvt-today-leaderboard-row:nth-child(3) {
    background: linear-gradient(90deg, #fff7ed 0%, #ffffff 100%) !important;
    border-color: #ffedd5 !important;
  }

  /* Đánh dấu hàng của tài khoản hiện tại */
  .bvt-today-leaderboard-row.is-me {
    background: linear-gradient(90deg, #f0fdf4 0%, #ffffff 100%) !important;
    border-color: #86efac !important;
    outline: 2px solid #22c55e !important;
    outline-offset: -1px !important;
  }

  .bvt-today-rank {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12.5px !important;
    font-weight: 900 !important;
    color: #475569 !important;
  }
  .bvt-today-rank.is-medal {
    font-size: 19px !important;
  }

  .bvt-today-avatar {
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    font-size: 18px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  }

  .bvt-today-name {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
  }
  .bvt-today-name strong {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 11.5px !important;
    line-height: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
  }
  .bvt-today-name small {
    flex: 0 0 auto !important;
    padding: 1.5px 5px !important;
    background: #dcfce7 !important;
    color: #15803d !important;
    border-radius: 999px !important;
    font-size: 8.5px !important;
    font-weight: 900 !important;
  }

  .bvt-today-grade {
    flex: 0 0 auto !important;
    padding: 2.5px 7px !important;
    background: #e0f2fe !important;
    color: #0369a1 !important;
    border-radius: 999px !important;
    font-size: 8.5px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  .bvt-today-xp {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 2.5px 7px !important;
    background: #fffbeb !important;
    border: 1px solid #fef3c7 !important;
    border-radius: 7px !important;
    font-size: 11px !important;
    line-height: 13px !important;
    font-weight: 900 !important;
    color: #b45309 !important;
    white-space: nowrap !important;
  }

  /* Trạng thái chưa tải được / Khách / Trống được thiết kế chỉn chu, chuyên nghiệp */
  .bvt-today-leaderboard-empty {
    min-height: 200px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 20px 16px !important;
    text-align: center !important;
    background: radial-gradient(circle at center, #ffffff 0%, #f8fafc 100%) !important;
    border: 1.5px dashed #cbd5e1 !important;
    border-radius: 14px !important;
  }
  .bvt-today-leaderboard-empty > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important;
    font-size: 24px !important;
    margin-bottom: 2px !important;
  }
  .bvt-today-leaderboard-empty strong {
    font-size: 13px !important;
    line-height: 17px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
  }
  .bvt-today-leaderboard-empty small {
    max-width: 270px !important;
    font-size: 10.5px !important;
    line-height: 15px !important;
    color: #64748b !important;
  }
  .bvt-today-leaderboard-empty a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-top: 6px !important;
    padding: 7px 16px !important;
    background: #10b981 !important;
    color: #ffffff !important;
    border-radius: 9px !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    box-shadow: 0 2px 0 #059669 !important;
  }

  /* Khung thông tin vị trí của bé */
  .bvt-today-me-card {
    margin-top: auto !important;
    padding: 8px 12px !important;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%) !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 11px !important;
  }
  .bvt-today-me-card[hidden] {
    display: none !important;
  }
  .bvt-today-me-label {
    font-size: 9.5px !important;
    line-height: 13px !important;
    font-weight: 900 !important;
    color: #15803d !important;
    margin-bottom: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
  }
  .bvt-today-me-body {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .bvt-today-me-avatar {
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 9px !important;
    font-size: 18px !important;
  }
  .bvt-today-me-name strong {
    font-size: 12px !important;
    line-height: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
  }
  .bvt-today-me-name span {
    font-size: 8.5px !important;
    padding: 1px 5px !important;
    background: #dcfce7 !important;
    color: #166534 !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
  }
  .bvt-today-me-rank strong {
    font-size: 12.5px !important;
    color: #15803d !important;
  }
  .bvt-today-me-rank span {
    font-size: 9px !important;
    color: #166534 !important;
  }
  .bvt-today-me-message {
    margin-top: 4px !important;
    padding: 4px 7px !important;
    background: rgba(255, 255, 255, 0.75) !important;
    border-radius: 7px !important;
    font-size: 9.5px !important;
    line-height: 13px !important;
    color: #166534 !important;
    font-weight: 700 !important;
  }

  /* Khung kêu gọi hành động cho khách */
  .bvt-today-me-cta {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  .bvt-today-me-cta-body {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .bvt-today-me-cta-icon {
    font-size: 24px !important;
    flex-shrink: 0 !important;
  }
  .bvt-today-me-cta-info {
    min-width: 0 !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }
  .bvt-today-me-cta-info strong {
    font-size: 11.5px !important;
    line-height: 15px !important;
    color: #15803d !important;
    font-weight: 800 !important;
  }
  .bvt-today-me-cta-info small {
    font-size: 9.5px !important;
    line-height: 13px !important;
    color: #166534 !important;
  }
  .bvt-today-me-cta-btn {
    flex-shrink: 0 !important;
    padding: 6px 14px !important;
    background: #10b981 !important;
    color: #ffffff !important;
    border-radius: 9px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    box-shadow: 0 2px 0 #059669 !important;
  }

  /* Skeleton animation */
  .bvt-today-skeleton-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
  }
  .bvt-today-skeleton-row {
    min-height: 42px !important;
    display: grid !important;
    grid-template-columns: 28px 30px minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 5px 10px !important;
    border-radius: 11px !important;
  }

  /* 3. Badge section & Thinking section */
  .bvt-badges-section,
  .bvt-thinking-section {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    grid-column: auto !important;
    grid-row: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
    background: #fff !important;
    border: 1px solid #e4e2de !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  }
  .bvt-thinking-section {
    background: linear-gradient(135deg, rgba(250, 245, 255, 0.8), rgba(238, 242, 255, 0.8)) !important;
    border-color: #e9d5ff !important;
  }
  #bvt-badges-container {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  #bvt-thinking-badges-container {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  /* 4. Bottom Split: Milestones + Recent History */
  .bvt-bottom-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    align-items: stretch !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .bvt-bottom-layout > .bvt-milestones-card,
  .bvt-bottom-layout > .bvt-history-card {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 16px !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .bvt-milestones-head h3,
  .bvt-history-head h3 {
    font-size: 20px !important;
    line-height: 25px !important;
  }
  #bvt-growth-milestones-container,
  #bvt-recent-history-container {
    gap: 8px !important;
  }
  .bvt-share-button {
    height: 42px !important;
    border-radius: 10px !important;
    margin-top: auto !important;
  }
}