/*
 * Bo sung cho style.css cua template (giu nguyen file goc de de doi chieu).
 */

/* style.css dat display cho nhieu khoi (grid, flex) nen de mat hieu luc cua [hidden] */
[hidden] { display: none !important; }

/* Nut menu dien thoai: hai icon, doi theo trang thai thay vi thay innerHTML */
.menu-toggle .icon-close,
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: inline; }

/* Chon ngon ngu: template dung <button>, o day la <a> de cong cu tim kiem di theo duoc */
.lang-menu a {
    cursor: pointer; text-align: left; background: none; border: 0; border-radius: 8px;
    gap: 8px; width: 100%; padding: 9px 10px; font-size: 14px; display: flex; align-items: center;
    color: inherit; text-decoration: none;
}
.lang-menu a:hover, .lang-menu a.on { background: rgb(245, 239, 228); }
.lang-menu a:focus-visible { outline-offset: 2px; outline: rgb(184, 137, 59) solid 2px; }
.lang-menu .lang-flag svg { border-radius: 3px; width: 24px; height: 16px; display: block; }

/*
 * Than bai Cam nang: template chi co doan van; bai soan trong admin con co
 * tieu de phu, anh, danh sach, lien ket - giu cung giong chu va nhip cua doan.
 */
.blog-article-body > h2 {
    color: var(--ink); font-size: clamp(1.55rem, 2.4vw, 2rem); line-height: 1.25;
    letter-spacing: -0.02em; margin: 40px 0 16px;
}
.blog-article-body > h3 {
    color: var(--ink); font-family: var(--display); font-size: 1.3rem; font-weight: 500; margin: 28px 0 12px;
}
.blog-article-body > figure { margin: 8px 0 32px; }
.blog-article-body > figure img { display: block; width: 100%; height: auto; border-radius: 4px; }
.blog-article-body > figure figcaption { color: rgb(110, 118, 135); font-size: 14px; margin-top: 10px; }
.blog-article-body > ul, .blog-article-body > ol {
    color: rgb(46, 65, 89); font-family: var(--display); font-size: 18px; line-height: 1.7;
    margin: 0 0 24px; padding-left: 1.25em;
}
.blog-article-body > ul li, .blog-article-body > ol li { margin-bottom: 8px; }
.blog-article-body a { color: inherit; text-decoration: underline; text-decoration-color: rgb(184, 137, 59); text-underline-offset: 3px; }
.blog-article-body a:hover { color: rgb(184, 137, 59); }

/*
 * Trang 404 - bo cuc theo trang 404 cua ban mau: so 404 va tieu de kieu chu
 * hien thi, cau giai thich, mot nut ve trang chu; nam giua vung noi dung.
 */
.nf-main { display: flex; }
.nf-page {
    flex: 1; min-height: min(70vh, 640px); padding: 120px 24px 96px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.nf-code {
    margin: 0; color: var(--ink); font-family: var(--display); font-weight: 400;
    font-size: clamp(4.5rem, 10vw, 7rem); line-height: 1; letter-spacing: -0.03em;
}
.nf-title {
    margin: 8px 0 0; color: var(--ink); font-family: var(--display); font-weight: 400;
    font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.1; letter-spacing: -0.02em;
}
.nf-text { margin: 16px 0 0; max-width: 34rem; color: var(--muted); font-size: 15px; line-height: 1.6; }
.nf-home { margin-top: 28px; }