/*
 Theme Name:   Hoangditru
 Theme URI:
 Description:  Theme độc lập cho site Khải Di trú. Tách khỏi Flatsome: header do plugin trang-chu dựng, footer do plugin cim-footer dựng.
 Author:
 Version:      2.1.4
 Requires at least: 6.0
 Requires PHP: 7.4
 Text Domain:  hoangditru
*/

/* ============================================================
   1. FONT
   UTMAptima cho body (file local), Phudu cho tiêu đề (Google Fonts).
   Đây là font gốc của site.

   Phudu nạp bằng wp_enqueue_style trong functions.php, KHÔNG dùng @import:
   @import chặn render vì trình duyệt phải tải style.css xong mới biết có font
   cần tải, trong khi thẻ <link> tải song song.
   ============================================================ */

/* UTMAptima chỉ có MỘT file, weight normal. Chữ in đậm trong body là do trình
   duyệt tự làm dày (synthetic bold), không phải file riêng. Nếu sau này có file
   bold thật thì thêm một @font-face nữa với font-weight: 700. */
@font-face {
    font-family: 'UTMAptima';
    src: url('assets/fonts/UTMAptima.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   2. ROOT — BASE UNIT
   ============================================================ */
:root {
    font-size: 18px; /* 1em = 18px */

    /* Màu nhấn của site. Các plugin tự khai biến riêng (--tc-*, --lpb-*,
       --bds-*) nên biến này chỉ dùng cho phần thuộc theme. */
    --hdt-accent: #1e3a73;
}

/* ============================================================
   3. BODY — UTMAptima
   ============================================================ */
body {
    font-family: 'UTMAptima', Arial, sans-serif !important;
    font-size: 1em;
	color: #000;
}

/* ============================================================
   4. HEADINGS — Phudu
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Phudu', Arial, sans-serif;
	font-weight: 700;
	color: #000;
}

h1, .h1 {
    font-size: 3em;
}

h2, .h2 {
    font-size: 2.5em;
}

h3, .h3 {
    font-size: 2em;
}

/* ============================================================
   6. BASE — phần Flatsome từng lo, nay theme tự lo
   Chỉ những thứ tối thiểu: reset, ảnh, link, bảng, khối WordPress.
   Mọi section của plugin (tc-, lpb-, bds-, cimf-, ci-) đã có CSS riêng
   với class tiền tố, không phụ thuộc gì ở đây.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    line-height: 1.6;
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

img, svg, video, iframe { max-width: 100%; height: auto; }
img { border: 0; vertical-align: middle; }

a { color: var(--hdt-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; line-height: 1.25; }
p, ul, ol, blockquote, figure, table { margin: 0 0 1em; }
ul, ol { padding-left: 1.25em; }

blockquote {
    padding: .25em 0 .25em 1em;
    border-left: 3px solid #e3e6ea;
    color: #444;
}

code, pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9em;
}
pre { overflow: auto; padding: 1em; background: #f6f7f9; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: .5em .75em; border: 1px solid #e3e6ea; text-align: left; }

hr { height: 0; border: 0; border-top: 1px solid #e3e6ea; margin: 2em 0; }

/* Khối căn chỉnh của WordPress */
.alignleft  { float: left;  margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text, figcaption { font-size: .85em; color: #666; }
.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

/* ============================================================
   7. KHUNG TRANG — dùng cho index / page / archive / search / 404
   Trang chủ, landing page, single, category có template và CSS riêng,
   không đi qua các class này.
   ============================================================ */
.hdt-wrap {
    max-width: var(--tc-boxed, 1200px);
    margin: 0 auto;
    padding: 0 24px;
}

.hdt-main { padding: 48px 0 72px; }

.hdt-page-title { margin-bottom: 1em; }

.hdt-entry > *:last-child { margin-bottom: 0; }

/* Danh sách bài dùng chung cho index / archive / search */
.hdt-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hdt-card { display: flex; flex-direction: column; }

.hdt-card__thumb {
    display: block;
    margin-bottom: 12px;
    overflow: hidden;
    border-radius: 8px;
}

.hdt-card__thumb img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.hdt-card__title { font-size: 1.1em; margin-bottom: .35em; }
.hdt-card__title a { color: #000; }

.hdt-card__meta { font-size: .8em; color: #6b7a90; }

/* Phân trang */
.hdt-pagination { margin-top: 48px; }

.hdt-pagination .page-numbers {
    display: inline-block;
    min-width: 2.2em;
    padding: .35em .6em;
    margin: 0 .15em;
    border: 1px solid #e3e6ea;
    border-radius: 6px;
    text-align: center;
    color: #000;
}

.hdt-pagination .page-numbers:hover { border-color: var(--hdt-accent); text-decoration: none; }
.hdt-pagination .page-numbers.current { background: var(--hdt-accent); border-color: var(--hdt-accent); color: #fff; }

/* Ô tìm kiếm của 404 / search */
.hdt-searchform { display: flex; gap: 8px; max-width: 420px; }

.hdt-searchform input[type="search"] {
    flex: 1;
    min-width: 0;
    padding: .6em .8em;
    border: 1px solid #d5dae1;
    border-radius: 6px;
    font: inherit;
}

.hdt-searchform button {
    padding: .6em 1.1em;
    border: 0;
    border-radius: 6px;
    background: var(--hdt-accent);
    color: #fff;
    font: inherit;
    cursor: pointer;
}

@media (max-width: 767px) {
    :root { font-size: 16px; }
    h1, .h1 { font-size: 2.2em; }
    h2, .h2 { font-size: 1.8em; }
    h3, .h3 { font-size: 1.5em; }
    .hdt-wrap { padding: 0 16px; }
    .hdt-main { padding: 32px 0 48px; }
    .hdt-list { gap: 24px; }
}