/* ==========================================================================
   WP ADAPTER — CSS bổ sung RIÊNG cho tích hợp WordPress.
   Không sửa các file port từ html-view; chỉ thêm quy tắc cho những thứ HTML gốc không có:
   admin bar (chỉ khi đăng nhập), menu cấp 2, class căn lề/caption/gallery của trình soạn thảo,
   bình luận, thông báo form liên hệ. Mọi selector đều có phạm vi hẹp.
   ========================================================================== */

/* ---------- Admin bar (chỉ khi đăng nhập) — không ảnh hưởng layout khách ---------- */
.admin-bar .site-header {
    top: 32px;
}

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

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

/* ---------- Menu cấp 2 (html-view không có submenu) ---------- */
.menu .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 1101px) {
    .menu > li > .sub-menu {
        position: absolute;
        top: 100%;
        left: -18px;
        z-index: 20;
        min-width: 240px;
        padding: 10px 0;
        border-radius: var(--radius-sm);
        background: var(--color-white);
        box-shadow: var(--shadow-md);
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
    }

    .menu > li:hover > .sub-menu,
    .menu > li:focus-within > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s;
    }

    .menu .sub-menu a {
        display: flex;
        min-height: 40px;
        padding: 0 18px;
        font-size: 15px;
    }

    .menu .sub-menu a::after {
        display: none;
    }
}

@media (max-width: 1100px) {
    .menu .sub-menu {
        padding-left: 16px;
        border-top: 1px solid var(--color-border);
    }

    .menu .sub-menu a {
        min-height: 46px;
        font-size: 15px;
    }
}

/* ---------- Nội dung từ trình soạn thảo (Classic Editor / block) ---------- */
.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-left: auto;
    margin-right: auto;
}

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

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

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

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

.entry-content .gallery {
    display: grid;
    grid-template-columns: repeat(var(--gallery-cols, 3), minmax(0, 1fr));
    gap: 12px;
}

.entry-content .gallery-columns-2 { --gallery-cols: 2; }
.entry-content .gallery-columns-4 { --gallery-cols: 4; }

.entry-content .gallery-item {
    margin: 0;
}

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

.entry-content .wp-block-embed__wrapper iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}

@media (max-width: 600px) {
    .entry-content .alignleft,
    .entry-content .alignright {
        float: none;
        margin: 1em 0;
    }

    .entry-content .gallery {
        --gallery-cols: 2;
    }
}

/* ---------- Bình luận (chỉ khi bài mở bình luận) ---------- */
.comments-area {
    max-width: 780px;
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--color-border);
}

.comments-area .comment-list {
    list-style: none;
    padding: 0;
}

.comments-area .comment-body {
    padding: 16px 0;
    border-bottom: 1px dashed var(--color-border);
    font-size: var(--fs-sm);
}

.comments-area input[type='text'],
.comments-area input[type='email'],
.comments-area input[type='url'],
.comments-area textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
}

.comments-area .submit {
    min-height: 48px;
    padding: 0 24px;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: 600;
    cursor: pointer;
}

/* ---------- Thông báo form liên hệ ---------- */
.contact-form .form-status {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
}

.contact-form .form-status--success {
    background: #e7f6ee;
    color: #146c43;
}

.contact-form .form-status--error {
    background: #fdecea;
    color: #a4231b;
}

/* Honeypot chống spam: ẩn khỏi người dùng, vẫn là input thật */
.contact-form .npj-hp {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- Widget lõi WordPress đặt vào thanh bên ---------- */
.widget ul:not([class]) {
    list-style: none;
    padding: 0;
}

.widget ul:not([class]) li + li {
    border-top: 1px dashed var(--color-border);
}

.widget ul:not([class]) a {
    display: inline-block;
    padding: 9px 0;
    font-size: var(--fs-sm);
    color: var(--color-text-strong);
}

/* ==========================================================================
   Khung card cho vùng nội dung (1.0.1)
   Bài viết / dự án / giải pháp, trang thường, lưu trữ chuyên mục:
   nền xám xanh nhạt + card trắng viền mảnh — đồng bộ với .widget ở thanh bên.
   ========================================================================== */
.entry-layout {
    background: var(--color-background-soft);
}

.entry-main,
.page-body .container--narrow {
    padding: 44px 48px 40px;
    border-radius: var(--radius-lg);
    background: var(--color-white);
    box-shadow: inset 0 0 0 1px var(--color-border), var(--shadow-xs);
}

.entry-main .entry-content,
.entry-main .entry-footer {
    max-width: none;
}

/* Tiêu đề/khối đầu tiên sát mép trên của card */
.entry-main .entry-content > :first-child,
.page-body .entry-content > :first-child {
    margin-top: 0;
}

/* Trang thường: card rộng hơn cột đọc một khoảng bằng padding để dòng chữ giữ ~820px */
.page-body .container--narrow {
    width: min(calc(100% - (var(--container-gutter) * 2)), calc(var(--container-narrow) + 112px));
    padding-inline: 56px;
}

/* Lưu trữ: thanh lọc thành card, thẻ bài có viền mảnh */
.archive-body .archive-toolbar {
    padding: 14px 20px;
    border-bottom: 0;
    border-radius: var(--radius-md);
    background: var(--color-white);
    box-shadow: inset 0 0 0 1px var(--color-border);
}

.archive-body .archive-grid .card {
    box-shadow: inset 0 0 0 1px var(--color-border), var(--shadow-xs);
}

.archive-body .archive-grid .card:hover {
    box-shadow: inset 0 0 0 1px var(--color-border-strong), var(--shadow-md);
}

@media (max-width: 1100px) {
    .entry-main {
        padding: 36px 36px 32px;
    }
}

@media (max-width: 768px) {
    .entry-layout {
        padding-top: 28px;
    }

    .entry-main,
    .page-body .container--narrow {
        padding: 26px 20px 24px;
        border-radius: var(--radius-md);
    }

    .page-body .container--narrow {
        width: calc(100% - 32px);
    }

    .archive-body .archive-toolbar {
        padding: 12px 14px;
    }
}

/* ---------- Tiêu đề + mô tả ngắn trang chi tiết: rộng bằng ảnh đại diện (1.0.4) ---------- */
.entry-header__content {
    max-width: none;
}