@import url('fonts.css');

/**
 * ==============================================================================
 * KBTECH - HỆ THỐNG THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG (FRONTEND)
 * Tệp: main.css
 * Mô tả: Định kiểu cho các trang công khai, bài viết tin tức và website chính
 * ==============================================================================
 */

:root {
    --main-font: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --main-font-base: 1rem;       /* 16px - Tiêu chuẩn cơ bản SEO */
    --main-font-sm: 0.875rem;     /* 14px - Phụ đề, card excerpt, nút bấm nhỏ */
    --main-font-xs: 0.75rem;      /* 12px - Badges, pill, labels hoa */
    --main-font-h1: 2rem;         /* 32px - Tiêu đề chính H1 */
    --main-font-h2: 1.5rem;       /* 24px - Tiêu đề mục H2 */
    --main-font-h3: 1.25rem;      /* 20px - Tiêu đề mục con H3 */
    --main-font-h4: 1.125rem;     /* 18px - Tiêu đề H4 */
    --main-line-height-base: 1.75;/* Độ giãn dòng chuẩn đọc tối ưu */
    --main-line-height-heading: 1.35;
    --main-bg: #ffffff;
    --main-text: #1e293b;
    --main-text-muted: #64748b;
    --main-primary: #f9c100;
    --main-primary-hover: #e5b000;
    --main-secondary: #023047;
    --main-accent: #219ebc;
    --main-border: #e2e8f0;
    --main-radius: 12px;
    --main-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.06);
    --main-transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Khung thân trang & thiết lập gốc chuẩn SEO 1rem = 16px */
html {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--main-font);
    font-size: var(--main-font-base);
    line-height: var(--main-line-height-base);
    background-color: var(--main-bg) !important;
    color: var(--main-text);
    overflow-x: clip;
    max-width: 100%;
    width: 100%;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Quy chuẩn font chữ bài viết và đoạn văn bản chuẩn SEO */
p, li {
    font-size: inherit;
    line-height: inherit;
}

.post-content, .article-content, .entry-content {
    font-size: var(--main-font-base);
    line-height: var(--main-line-height-base);
}

.post-content p, .article-content p, .entry-content p {
    font-size: var(--main-font-base);
    line-height: var(--main-line-height-base);
    margin-bottom: 1.25rem;
}

/* Tiêu đề phân cấp thị giác hiện đại chuẩn SEO */
h1, .h1 {
    font-size: var(--main-font-h1);
    line-height: var(--main-line-height-heading);
    font-weight: 700;
    letter-spacing: -0.025em;
}

h2, .h2 {
    font-size: var(--main-font-h2);
    line-height: var(--main-line-height-heading);
    font-weight: 700;
    letter-spacing: -0.02em;
}

h3, .h3 {
    font-size: var(--main-font-h3);
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: -0.015em;
}

h4, .h4 {
    font-size: var(--main-font-h4);
    line-height: 1.45;
    font-weight: 600;
}

h5, .h5 {
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 600;
}

h6, .h6 {
    font-size: 0.9375rem;
    line-height: 1.5;
    font-weight: 600;
}

/* Các trường hợp đặc thù được phép thu nhỏ font chữ */
.post-caption, figcaption, .post-img-caption {
    font-size: 0.875rem !important; /* 14px */
    font-style: italic;
    color: var(--main-text-muted);
    line-height: 1.5;
}

.badge, .tag-pill, .pill-badge {
    font-size: var(--main-font-xs) !important; /* 12px */
    font-weight: 600;
    letter-spacing: 0.03em;
}

.breadcrumb-kbtech, .breadcrumb {
    font-size: 0.875rem !important; /* 14px */
}

.meta-time, .meta-date, .meta-author {
    font-size: 0.875rem; /* 14px */
    color: var(--main-text-muted);
}


main {
    overflow: visible !important;
    width: 100%;
}

/* Thẻ hiển thị bài viết tin tức */
.post-card {
    border-radius: var(--main-radius);
    overflow: hidden;
    transition: transform var(--main-transition), box-shadow var(--main-transition);
    border: 1px solid var(--main-border);
    background: #ffffff;
}

.post-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.1);
}

.post-card-img {
    transition: transform 0.5s ease;
    overflow: hidden;
}

.post-card:hover .post-card-img img {
    transform: scale(1.05);
}

/* Hộp gợi ý kết quả tìm kiếm trực tiếp */
.search-results-container {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border-radius: var(--main-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    border: 1px solid var(--main-border);
    z-index: 1060;
    max-height: 420px;
    overflow-y: auto;
    margin-top: 8px;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid #f1f5f9;
    color: var(--main-text);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.search-result-item:hover {
    background-color: #f8fafc;
    color: var(--main-primary-hover);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-thumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

/* Tiện ích bật/tắt sự kiện tương tác chuột */
.pointer-events-none, .pe-none {
    pointer-events: none !important;
}

.pointer-events-auto, .pe-auto {
    pointer-events: auto !important;
}

/* Các nút bấm giao diện công khai */
.btn-kbtech {
    background: var(--main-primary);
    color: #ffffff;
    font-weight: 600;
    border-radius: 8px;
    padding: 10px 22px;
    border: none;
    transition: all var(--main-transition);
}

.btn-kbtech:hover {
    background: var(--main-primary-hover);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(249, 193, 0, 0.35);
}

/* Đường dẫn điều hướng phân cấp (Breadcrumbs) */
.breadcrumb-kbtech {
    background: transparent;
    padding: 0;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}

.breadcrumb-kbtech .breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: var(--main-text-muted);
}