/* ==========================================================================
   WP – lớp thích ứng WordPress (nạp sau home/content, trước responsive).
   CSS gốc của html-view giữ nguyên; mọi phần riêng của WordPress nằm ở đây.
   ========================================================================== */

/* ---------- Thanh quản trị (chỉ khi đăng nhập) ---------- */
.admin-bar .site-header {
    top: 32px;
}

@media (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

@media (max-width: 600px) {
    /* WordPress cho admin bar cuộn theo trang ở màn nhỏ */
    .admin-bar .site-header {
        top: 0;
    }
}

/* ---------- Logo tải lên (Custom Logo) ---------- */
.site-logo__img {
    width: auto;
    height: 53px;
    max-width: 220px;
    object-fit: contain;
}

.footer-brand .site-logo__img {
    width: auto;
    height: 58px;
}

/* ---------- Menu con (thiết kế không có, hỗ trợ khi quản trị thêm) ---------- */
.site-navigation .menu > li {
    position: relative;
}

.site-navigation .sub-menu {
    position: absolute;
    top: 100%;
    left: -16px;
    z-index: 20;
    min-width: 220px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: var(--color-dark);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease), visibility 0s linear var(--duration);
}

.site-navigation .menu > li:hover > .sub-menu,
.site-navigation .menu > li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.site-navigation .sub-menu a {
    display: block;
    padding: 8px 16px;
    font-size: var(--fs-15);
    color: #e6e7e9;
}

.site-navigation .sub-menu a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

@media (max-width: 1024px) {
    .site-navigation .sub-menu {
        position: static;
        min-width: 0;
        padding: 0 0 8px 16px;
        border: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }
}

/* ---------- Lớp lõi WordPress trong nội dung ---------- */
.entry-content .alignleft {
    float: left;
    margin: 0.3em 1.5em 1em 0;
}

.entry-content .alignright {
    float: right;
    margin: 0.3em 0 1em 1.5em;
}

.entry-content .aligncenter {
    display: block;
    margin-inline: auto;
}

.entry-content::after {
    content: '';
    display: table;
    clear: both;
}

.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

.wp-caption {
    max-width: 100%;
}

.wp-caption-text,
.gallery-caption {
    margin-top: 8px;
    font-size: var(--fs-14);
    color: var(--color-muted);
    text-align: center;
}

.entry-content iframe,
.entry-content video,
.entry-content embed,
.entry-content object {
    max-width: 100%;
}

.entry-content .wp-video,
.entry-content .wp-embed-responsive .wp-block-embed__wrapper {
    width: 100% !important; /* WordPress in inline width cố định cho trình phát video */
}

.entry-content iframe[src*='youtube'],
.entry-content iframe[src*='vimeo'] {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--radius-md);
}

/* Shortcode [gallery]: html-view dùng .gallery 2 cột – tôn trọng số cột WordPress chọn */
.gallery[class*='gallery-columns-'] {
    grid-template-columns: repeat(var(--gallery-cols, 3), minmax(0, 1fr));
}

.gallery-columns-1 { --gallery-cols: 1; }
.gallery-columns-2 { --gallery-cols: 2; }
.gallery-columns-3 { --gallery-cols: 3; }
.gallery-columns-4 { --gallery-cols: 4; }
.gallery-columns-5 { --gallery-cols: 5; }
.gallery-columns-6 { --gallery-cols: 6; }
.gallery-columns-7 { --gallery-cols: 7; }
.gallery-columns-8 { --gallery-cols: 8; }
.gallery-columns-9 { --gallery-cols: 9; }

.gallery-item {
    margin: 0;
}

.gallery-item img {
    width: 100%;
}

/* Trích dẫn nhập trong trình soạn thảo (không có icon SVG) – vẽ dấu ngoặc bằng CSS */
.entry-content blockquote:not(:has(> .icon))::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 24px;
    width: 30px;
    height: 30px;
    background: var(--color-primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 18.5v-5.2C4 9.4 5.9 6.6 9.6 5l.9 1.6C8.3 7.7 7.3 9.3 7.2 11.4H10v7.1zM13.5 18.5v-5.2c0-3.9 1.9-6.7 5.6-8.3l.9 1.6c-2.2 1.1-3.2 2.7-3.3 4.8h2.8v7.1z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 18.5v-5.2C4 9.4 5.9 6.6 9.6 5l.9 1.6C8.3 7.7 7.3 9.3 7.2 11.4H10v7.1zM13.5 18.5v-5.2c0-3.9 1.9-6.7 5.6-8.3l.9 1.6c-2.2 1.1-3.2 2.7-3.3 4.8h2.8v7.1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.entry-content blockquote p {
    margin: 0;
}

.entry-content blockquote p + p {
    margin-top: 0.8em;
}

/* Bảng dán thẳng từ trình soạn thảo (không có .table-wrap) vẫn cuộn ngang trên di động */
.entry-content > table {
    display: block;
    min-width: 0;          /* CSS gốc đặt 560px cho bảng nằm trong .table-wrap */
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

/* wpautop (Classic Editor) có thể để lại <p> rỗng trong các khối lưới – ẩn đi để không thành ô thừa */
.entry-content .media-text > p:empty,
.entry-content .stats > p:empty,
.entry-content .value-grid > p:empty,
.entry-content .gallery > p:empty {
    display: none;
}

.entry-content .media-text figure {
    margin: 0;
}

/* Ảnh công trình trong trang tĩnh (the_content) */
.entry-content .media-text img {
    border-radius: var(--radius-lg);
}

/* ---------- Widget WordPress mặc định trong thanh bên ---------- */
.sidebar .widget ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar .widget:not(.widget--cta) li > a {
    transition: color var(--duration) var(--ease);
}

.sidebar .widget:not(.widget--cta) li > a:hover {
    color: var(--color-primary);
}

.widget-cats a[aria-current='page'] {
    color: var(--color-primary);
    font-weight: 600;
}

/* ---------- Trạng thái rỗng / 404 ---------- */
.empty-state {
    padding: 40px 32px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-soft);
    text-align: center;
}

.empty-state__title {
    font-size: 1.5rem;
}

.empty-state p {
    margin-top: 8px;
    color: var(--color-muted);
}

.empty-state .search-form {
    max-width: 480px;
    margin: 20px auto 0;
}

.error-404__code {
    font-family: var(--font-display);
    font-size: 6rem;
    font-weight: 600;
    font-stretch: 100%;
    line-height: 1;
    color: var(--color-primary);
}

.error-404__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

.error-404__links {
    margin-top: 28px;
}

.error-404__links .chip-list {
    justify-content: center;
}

.error-404__links .chip-list a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: #fff;
    font-size: var(--fs-15);
    font-weight: 500;
}

.error-404__links .chip-list a:hover {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}

/* ---------- Dải CTA khi chưa bật plugin biểu mẫu ---------- */
.cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
}

.cta-band__actions .icon {
    width: 20px;
    height: 20px;
}

/* ---------- Tìm kiếm: ảnh trong kết quả ---------- */
.search-result > img {
    align-self: stretch;
}

/* ---------- Sửa lỗi kế thừa từ html-view ----------
   .mini-post__title và .mini-post__meta là <span> nên bị dính một dòng
   ("Galaxy KTVSảnh đón…"). Hiển thị dạng khối để mô tả xuống dòng như ý đồ thiết kế. */
.mini-post__title,
.mini-post__meta {
    display: block;
}

/* ==========================================================================
   Cụm nút nổi: Gọi – Zalo – Lên đầu trang
   Ba nút cùng kích thước, cùng cột bên phải; nút lên đầu trang luôn ở dưới cùng.
   Nút .back-to-top là position: fixed riêng để plugin "Nút hỗ trợ liên hệ"
   nhận ra giao diện đã có nút lên đầu trang và tự ẩn nút trùng của nó.
   ========================================================================== */
:root {
    --float-size: 54px;
    --float-gap: 10px;
    --float-right: 45px;
    --float-bottom: 80px;
}

@media (max-width: 1024px) {
    :root {
        --float-right: 20px;
        --float-bottom: 24px;
    }
}

@media (max-width: 560px) {
    :root {
        --float-size: 48px;
        --float-gap: 8px;
        --float-right: 16px;
        --float-bottom: 16px;
    }
}

body .floating-contact {
    right: var(--float-right);
    bottom: var(--float-bottom);
    align-items: center;
    gap: var(--float-gap);
    transition: bottom 0.3s var(--ease);
}

/* Khi nút lên đầu trang hiện: cụm Gọi/Zalo nhường đúng một ô phía dưới */
body.has-back-to-top .floating-contact {
    bottom: calc(var(--float-bottom) + var(--float-size) + var(--float-gap));
}

body .floating-contact a,
.back-to-top {
    width: var(--float-size);
    height: var(--float-size);
    border-radius: 50%;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* Bỏ vòng sáng lan rộng (làm nút Gọi trông to và lệch cột); thay bằng rung nhẹ icon */
body .floating-contact__phone {
    animation: none;
}

body .floating-contact__phone .icon {
    animation: ntd-phone-ring 3s ease-in-out infinite;
}

@keyframes ntd-phone-ring {
    0%, 70%, 100% { transform: rotate(0); }
    74% { transform: rotate(-14deg); }
    78% { transform: rotate(12deg); }
    82% { transform: rotate(-10deg); }
    86% { transform: rotate(8deg); }
    90% { transform: rotate(0); }
}

.back-to-top {
    position: fixed;
    right: var(--float-right);
    bottom: var(--float-bottom);
    z-index: 90;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: #2b3036;
    color: #fff;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s linear 0.3s, background-color var(--duration) var(--ease);
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.back-to-top:hover {
    background: var(--color-primary);
}

.back-to-top .icon {
    width: 24px;
    height: 24px;
}

@media (prefers-reduced-motion: reduce) {
    body .floating-contact__phone .icon {
        animation: none;
    }
}

/* ---------- Thẻ bài viết với nội dung thật ----------
   Giữ nhịp thiết kế: tóm tắt tối đa 2 dòng, tiêu đề tối đa 2 dòng (bài nổi bật: tóm tắt 4 dòng). */
.post-card__title,
.post-card__excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.post-card--featured .post-card__excerpt {
    -webkit-line-clamp: 4;
}

/* ---------- Breadcrumb: bỏ thụt lề mặc định của <ol> (reset chỉ xử lý ol có class) ---------- */
.breadcrumb ol {
    margin: 0;
    padding: 0;
    list-style: none;
}