/* ==========================================================================
   WP – phần riêng của WordPress (html-view không có): căn ảnh, caption, block,
   nhúng, admin bar, điều hướng bài, các trạng thái form. Không đổi thiết kế đã duyệt.
   ========================================================================== */

/* ---- Breadcrumb có microdata: <nav.breadcrumb><ol><li> – giữ đúng hình html-view ---- */
.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.page-header__desc > :first-child {
    margin-top: 0;
}

.page-header__desc > :last-child {
    margin-bottom: 0;
}

/* ---- Admin bar + header dính (≤ 1100px) ---- */
@media (max-width: 1100px) {
    .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;
    }
}

/* ---- Nội dung soạn thảo ---- */
.entry-content--page {
    max-width: var(--reading-max);
    margin-top: 0;
}

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

.entry-content .alignleft {
    float: left;
    margin: 0.3em 1.4em 1em 0;
}

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

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

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

.entry-content .wp-caption-text,
.entry-content .wp-element-caption {
    margin-top: 6px;
    font-size: 13px;
    color: var(--color-muted);
    text-align: center;
}

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

.entry-content .wp-block-embed__wrapper,
.entry-content .wp-embed-aspect-16-9 .wp-block-embed__wrapper {
    position: relative;
}

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

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

.entry-content > table,
.entry-content .wp-block-table table {
    width: 100%;
}

.entry-content h4 {
    margin-top: 1.3em;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-heading);
}

.entry-content .note {
    padding: 14px 18px;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: var(--color-surface-alt);
    font-size: 16px;
}

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

.entry__lead {
    max-width: var(--reading-max);
    margin-top: 10px;
    font-size: 18px;
    line-height: 1.55;
    color: var(--color-muted);
}

.page-links {
    display: flex;
    gap: 8px;
    margin-top: 20px;
    font-size: var(--text-sm);
}

/* ---- Bài trước / bài sau ---- */
.post-nav {
    max-width: var(--reading-max);
    margin-top: 18px;
}

.post-nav .nav-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.post-nav a {
    display: block;
    height: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-heading);
}

.post-nav a:hover {
    border-color: var(--color-primary);
}

.post-nav .nav-next {
    grid-column: 2;
    text-align: right;
}

.post-nav__label {
    display: block;
    font-size: 13px;
    color: var(--color-muted);
}

.post-nav__title {
    display: block;
    margin-top: 2px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.35;
}

/* ---- Nút sao chép liên kết ---- */
.social-links__item--copy {
    background: var(--color-heading);
    cursor: pointer;
}

.social-links__item--copy.is-copied {
    background: var(--color-success);
}

/* ---- Form đặt lịch ---- */
.contact-form__title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-heading);
}

.contact-form__note {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
}

.contact-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.contact-form__admin-note {
    margin: 0;
    padding: 10px 12px;
    border: 1px dashed #d0a400;
    border-radius: var(--radius-sm);
    background: #fff8db;
    font-size: 13px;
}

.contact-form [data-aloxovn-message]:empty {
    display: none;
}

.contact-form.is-loading .btn {
    opacity: 0.7;
    pointer-events: none;
}

.page-template-template-contact .contact-form {
    margin-top: 16px;
}

/* ---- Bản đồ nhúng ---- */
.map-card--embed {
    min-height: 120px;
}

.map-card--embed iframe {
    border: 0;
}

/* ---- Đánh giá: chưa có ảnh đại diện thì hiện chữ cái đầu ---- */
.review-card__avatar--initial {
    display: grid;
    place-items: center;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 20px;
    font-weight: 700;
}

a.rating-summary:hover {
    border-color: var(--color-primary);
}

/* ---- 404 ---- */
.not-found__code {
    font-size: 72px;
    font-weight: 800;
    line-height: 1;
    color: var(--color-primary);
}

.not-found .search-form {
    max-width: 520px;
    margin: 18px auto;
}

.not-found__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

/* ---- Widget lõi WordPress trong vùng "Cột bên" ---- */
.widget ul:not([class]) {
    margin: 0;
    padding: 0;
    list-style: none;
}

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

.widget ul:not([class]) a {
    display: block;
    padding-block: 8px;
    font-size: 15px;
    color: var(--color-text);
}

.widget ul:not([class]) a:hover,
.widget-list a[aria-current] {
    color: var(--color-primary);
}

/* ---- Footer: menu WordPress có class menu-item trên <li> ---- */
.footer-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ---- Thẻ .case-card với nội dung thật ----
   html-view cố định thân thẻ 122px và cho mô tả chảy quanh nút (hợp với chữ mẫu ngắn).
   Tiêu đề bài thật dài 2–3 dòng nên thân thẻ chuyển sang cột: tiêu đề (tối đa 2 dòng) →
   mô tả (tối đa 2 dòng, đủ chiều ngang) → nút "Xem chi tiết" ở góc phải dưới. */
.case-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: auto;
    min-height: 122px;
}

.case-card__body::before {
    content: none;
}

.case-card__more {
    order: 3;
    float: none;
    align-self: flex-end;
    margin: auto 0 0;
}

.case-card__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.case-card__desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-bottom: 12px;
    font-size: 15px;
}

.service-card__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* ---- Chữ thương hiệu cách điệu (Kanit 900 nghiêng, từ cuối màu đỏ) ----
   Áp dụng: tên ở đầu trang, menu mobile, chân trang, tiêu đề lớn hero. */
:root {
    --font-brand: "Kanit", var(--font-heading);
}

.site-branding__name,
.footer-brand__name,
.hero__title {
    font-family: var(--font-brand);
    font-style: italic;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.brand-accent {
    color: var(--color-primary);
}

/* Đầu trang + menu mobile: chữ tối, "QB" đỏ */
.site-header .site-branding__name {
    font-size: 26px;
    line-height: 1.05;
    color: var(--color-heading);
}

.site-branding__tagline {
    margin-top: 3px;
}

/* Chân trang: chữ trắng, "QB" đỏ */
.footer-brand__name {
    font-size: 24px;
    color: #fff;
}

/* Hero: chữ trắng, "QB" đỏ, vệt gạch đỏ nghiêng phía dưới */
.hero__title {
    position: relative;
    display: inline-block;
    padding: 0 0.12em 12px 0;
    font-size: 62px;
    line-height: 1;
    color: #fff;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.45);
}

.hero__title::after {
    content: "";
    position: absolute;
    left: 1%;
    right: 0;
    bottom: 0;
    height: 5px;
    background: linear-gradient(90deg, rgba(242, 13, 27, 0) 0%, var(--color-primary) 10%, var(--color-primary) 88%, rgba(242, 13, 27, 0) 100%);
    transform: skewX(-24deg);
    border-radius: 2px;
}

.hero__title + .hero__subtitle {
    margin-top: 8px;
}

@media (max-width: 1200px) {
    .site-header .site-branding__name {
        font-size: 24px;
    }
}

@media (max-width: 768px) {
    .hero__title {
        font-size: 48px;
    }
}

@media (max-width: 576px) {
    .site-header .site-branding__name {
        font-size: 21px;
    }

    .hero__title {
        font-size: 38px;
        padding-bottom: 9px;
    }

    .hero__title::after {
        height: 4px;
    }
}