/* ============================================================
   Shell pha.vn — header + footer lấy từ giao diện themeszz.

   Theme render HAI bộ markup khác nhau cho desktop và mobile
   (SiteHeader.dc.html: sc-if isDesktop / isMobile, ngưỡng s.w < 980),
   kèm một thanh tab cố định dưới đáy cho mobile.
   Prerender chỉ chụp được MỘT bộ theo kích thước cửa sổ, nên script
   chụp cả hai rồi ở đây chuyển qua lại bằng media query — đúng ngưỡng
   980px của theme, không phải ngưỡng tự đặt.
   ============================================================ */

/* --- Đổi bộ markup theo đúng ngưỡng của theme --- */
@media (min-width: 980px) {
    [data-shell="mobile"] { display: none !important; }
}
@media (max-width: 979px) {
    [data-shell="desktop"] { display: none !important; }
}

/* Mega-menu "Danh mục API": ẩn sẵn, mở bằng components/shell.js.
   Mỗi bộ (desktop/mobile) có panel riêng nên dùng attribute thay vì id. */
[data-apihub-panel] { display: none; }
[data-apihub-panel].is-open { display: block; }

/* Mũi tên của nút danh mục khi mở */
[data-apihub-caret] { transition: transform .18s ease; }
[data-apihub-catalog][aria-expanded="true"] [data-apihub-caret] { transform: rotate(180deg); }

/* Thanh tab mobile là position:fixed nên phải chừa chỗ ở đáy, nếu không
   nó che mất phần cuối footer. Theme gốc làm việc này bằng padBottom. */
@media (max-width: 979px) {
    #apihub-footer { padding-bottom: 84px !important; }
    /* Mega-menu 1 cột trên máy nhỏ */
    [data-shell="mobile"] [data-apihub-panel] [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}

/* Giữ màu chữ mờ của phần giữa như cũ: design system định nghĩa
   --text-muted khác style.css, mà .main-content vẫn dùng CSS cũ. */
.main-content { --text-muted: #64748b; }

/* --- Khoảng thở quanh nội dung ---
   Đo thực tế: main.main-content có padding 0, nên nội dung dính sát vào
   header (sticky) và footer. Thêm khoảng cách cho cả hai phía. */
main.main-content {
    padding-top: 32px;
    padding-bottom: 56px;
}
@media (max-width: 640px) {
    main.main-content { padding-top: 20px; padding-bottom: 36px; }
}

/* --- Bỏ dải trống dưới footer ---
   style.css cũ đặt body{padding-bottom:50px}. Khoảng đó nằm NGOÀI footer nên
   hở ra một dải nền tối phía dưới. Trước đây không thấy vì trang chưa có footer
   bám đáy. shell.css nạp sau style.css nên chỉ cần cùng độ ưu tiên là thắng. */
body { padding-bottom: 0; }