/* Bài viết - Khung 1 (1241 x 3001.89) */
.baiviet-container {
    width: 100%;
    max-width: 1440px;
    margin: 80px auto; /* top 80, bottom 80 */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: row;
}

.baiviet-frame-a {
    width: 100%;
    max-width: 1241px;
    height: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    gap: 75px; /* Khoảng cách giữa khung A1 và B */
    align-items: flex-start;
    flex-wrap: nowrap;
    margin-bottom: 80px;
}

/* Box A1: top-left inside frame, fixed 294 x 1539 */
.baiviet-box-a1 {
    width: 294px;
    height: 1539px;
    flex-shrink: 0;
    flex-basis: 294px;
    min-width: 294px;
    max-width: 294px;
}

/* Box B: top-right inside frame, fixed 872 x auto */
.baiviet-box-b {
    width: 872px;
    height: auto;
    flex-shrink: 0;
    flex-basis: 872px;
    min-width: 872px;
    max-width: 872px;
}

/* Breadcrumb styling */
.baiviet-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 16px 0;
}

.baiviet-breadcrumb-item {
    color: var(--Foundation-black-Normal, #333);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
    transition: color 0.2s ease;
}

.baiviet-breadcrumb-item:hover {
    color: var(--Foundation-Yellow-Dark, #BFB900);
}

.baiviet-breadcrumb-separator {
    color: var(--Foundation-black-Normal, #333);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
}

/* Khung 852x43 */
.baiviet-frame-852x43 {
    width: 852px;
    height: 43px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

/* Button fit content */
.baiviet-button-195x43 {
    display: inline-flex;
    min-width: fit-content;
    height: 43px;
    padding: 0 20px;
    border-radius: 32px;
    border: 1px solid rgba(0, 0, 0, 0.20);
    background: transparent;
    color: var(--Foundation-black-Normal, #333);
    text-align: center;
    font-family: Inter;
    font-size: 16px;
    font-style: italic;
    font-weight: 700;
    line-height: normal;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.baiviet-button-195x43:hover {
    background: rgba(0, 0, 0, 0.05);
    text-decoration: none;
    color: var(--Foundation-black-Normal, #333);
}

/* Khung 852x39 - Thông tin cập nhật và lượt xem */
.baiviet-frame-852x39 {
    width: 852px;
    height: 39px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
}

.baiviet-update-info-wrapper {
    width: 250px;
    height: 39px;
    display: flex;
    align-items: center;
    padding: 10px;
}

.baiviet-view-count-wrapper {
    width: 137px;
    height: 39px;
    display: flex;
    align-items: center;
    padding: 10px;
}

.baiviet-update-info,
.baiviet-view-count {
    color: var(--Foundation-black-Normal, #333);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
}



/* Card A1: 294 x 682 at top of A1 */
.baiviet-card-a1 {
    width: 294px;
    height: 682px;
    border-radius: 32px;
    border: 1px solid var(--Foundation-black-Normal, #333);
    overflow: hidden;
    transition: height 0.25s ease;
}

/* Khung CZ: 277xauto, căn trên căn phải khung C (ACF) */
.khung-cz {
    width: 277px;
    height: auto;
    margin-top: 27px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
}

/* Khung CZ1: 249x542, căn trái căn trên khung CZ */
.khung-cz1 {
    width: 249px;
    height: 542px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Khung CZ2: 249x38, căn trên CZ1 */
.khung-cz2 {
    width: 249px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.khung-cz2 span {
    font-size: 25px;
    color: #BFB900;
    font-weight: bold;
    text-align: center;
}

/* Khung CZ3: 249x480, căn dưới CZ1 */
.khung-cz3 {
    width: 249px;
    height: 480px;
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Khung bài viết: 229x60 */
.khung-bai-viet {
    width: 229px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.khung-bai-viet span {
    font-size: 13px;
    color: #000000;
    font-weight: normal;
    text-align: left;
    line-height: 1.4;
    padding: 0 10px;
}

/* Đường ngang giữa các khung bài viết */
.khung-duong-ngang {
    width: 229px;
    height: 1px;
    background-color: #333333;
    margin: 20px 0;
}

/* Khoảng cách cho khung bài viết đầu tiên */
.khung-cz3 .khung-bai-viet:first-child {
    margin-top: 10px;
}

/* Khoảng cách giữa các bài viết */
.khung-cz3 .khung-bai-viet:not(:first-child) {
    margin-top: 0;
}

/* Đường ngang CZZ: 277x1, dưới khung CZ1 48px */
.khung-czz {
    width: 277px;
    height: 1px;
    background-color: #333333;
    margin-top: 48px;
}

/* Khung CZ3 Tags: 277xauto, dưới đường ngang CZZ 48px */
.khung-cz3-tags {
    width: 277px;
    height: auto;
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Khung CZ31: 277x38, căn trên CZ3 */
.khung-cz31 {
    width: 277px;
    height: 38px;
    display: flex;
    align-items: center;
    padding-left: 14px;
}

.khung-cz31 span {
    font-size: 25px;
    color: #BFB900;
    font-weight: bold;
    text-align: left;
}

/* Khung tags: dưới khung CZ31 11px */
.khung-tags {
    width: 277px;
    height: auto; /* Auto height để fit với content */
    margin-top: 11px;
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    padding: 0 14px;
    align-content: flex-start;
}

/* Tag individual */
.tag {
    height: 43px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 32px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    font-size: 16px;
    color: #000000;
    font-weight: bold;
    font-style: italic;
    white-space: nowrap;
    background-color: #ffffff;
}

/* Card A1 header: left text 262x50, right chevron 12x24, gap 10 */
.baiviet-card-a1-header {
    width: 262px;
    height: 50px;
    display: grid;
    grid-template-columns: 1fr 24px; /* title takes the rest, icon fixed */
    column-gap: 10px;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    margin: 0 auto; /* center within card */
}

.baiviet-card-a1-title {
    width: auto;
    height: 50px;
    color: var(--Foundation-Yellow-Dark, #BFB900);
    text-align: center;
    font-family: Montserrat;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.baiviet-card-a1-icon {
    width: 24px;
    height: 12px;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.baiviet-card-a1-icon-svg {
    width: 24px;
    height: 12px;
}

/* Collapsed state: shrink card height to only show header (50px + padding top/bottom 0 since header has its own padding) */
.baiviet-card-a1.collapsed { height: 70px; }
.baiviet-card-a1.collapsed .baiviet-card-a1-icon-svg { transform: rotate(-90deg); transition: transform 0.25s ease; }

/* TOC basic styling under header */
.baiviet-toc {
    width: 262px;
    margin: 8px auto 0 auto;
    counter-reset: baivietToc;
    max-height: 620px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbar for TOC */
.baiviet-toc::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for webkit browsers */

.baiviet-toc-item {
    width: 242px;
    margin: 0 auto;
    color: var(--Foundation-black-Normal, #333);
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    flex: 1 0 0;
    padding: 10px 0;
    display: grid;
    grid-template-columns: 18px 1fr; /* number column + text column */
    column-gap: 6px;
    box-sizing: border-box;
    cursor: pointer;
}

.baiviet-toc-item::before {
    counter-increment: baivietToc;
    content: counter(baivietToc) ".";
    text-align: right;
}

/* TOC Answer block (collapsible) */
.baiviet-toc-answer {
    width: 242px;
    margin: 0 auto;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease;
}
.baiviet-toc-answer.active {
    max-height: 600px;
    opacity: 1;
}
.baiviet-toc-answer-title {
    color: var(--Foundation-black-Normal, #333);
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    padding: 6px 0 4px 24px; /* indent to align under text column */
    box-sizing: border-box;
}
.baiviet-toc-answer-list {
    list-style: disc;
    margin: 0;
    padding: 0 0 8px 24px; /* indent body to align with title text */
}
.baiviet-toc-answer-list li {
    color: var(--Foundation-black-Normal, #333);
    font-family: Montserrat;
    font-size: 13px; /* Body 2 */
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

/* Hide frame if it has no content to avoid empty whitespace */
.baiviet-frame-a:empty {
    display: none;
}

/* No fixed min-height; frame grows only with content */

/* Phần nội dung chính */
.baiviet-content-wrapper {
    margin-top: 33px;
    width: 100%;
}

/* Điều chỉnh khoảng cách dòng cho nội dung WYSIWYG */
.baiviet-content-wrapper p {
    margin: 0 0 8px 0; /* Giảm margin bottom giữa các đoạn */
    line-height: 1.4; /* Giảm line-height */
}

.baiviet-content-wrapper h1,
.baiviet-content-wrapper h2,
.baiviet-content-wrapper h3,
.baiviet-content-wrapper h4,
.baiviet-content-wrapper h5,
.baiviet-content-wrapper h6 {
    margin: 16px 0 8px 0; /* Giảm margin giữa các heading */
    line-height: 1.3; /* Giảm line-height cho heading */
}

.baiviet-content-wrapper ul,
.baiviet-content-wrapper ol {
    margin: 8px 0; /* Giảm margin cho list */
    line-height: 1.4; /* Giảm line-height cho list */
}

.baiviet-content-wrapper li {
    margin-bottom: 4px; /* Giảm khoảng cách giữa các list item */
    line-height: 1.4; /* Giảm line-height cho list item */
}

/* Khung 872x85.89 */
.baiviet-frame-872x85 {
    width: 872px;
    height: 85.89px;
    margin-top: 33px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* Khung tác giả */
.baiviet-author-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: transparent;
}

.baiviet-author-label {
    color: #000;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.baiviet-author-name {
    color: #000;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

/* Khung 313x85.89 */
.baiviet-frame-313x85 {
    width: 313px;
    height: 85.89px;
    position: relative;
}

/* Khung 313x56 phía trên */
.baiviet-frame-313x56 {
    width: 313px;
    height: 56px;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* Khung 89.99x24.89 góc phải dưới */
.baiviet-frame-89x24 {
    width: 89.99px;
    height: 24.89px;
    position: absolute;
    bottom: 0;
    right: 0;
}

/* Component đánh giá */
.baiviet-rating-component {
    display: flex;
    width: 293px;
    height: 36px;
    flex-direction: row;
    justify-content: flex-end;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
}

.baiviet-rating-label {
    color: #000;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.baiviet-stars-container {
    display: flex;
    gap: 4px;
    align-items: center;
}

.baiviet-star {
    font-size: 28px;
    color: #ccc;
    cursor: pointer;
    transition: color 0.2s ease;
    user-select: none;
    line-height: 1;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.baiviet-star.active {
    color: #ff6b6b;
}

.baiviet-star.partial {
    color: #ccc;
}

.baiviet-star.partial::after {
    content: '★';
    position: absolute;
    left: 0;
    top: 0;
    color: #ff6b6b;
    overflow: hidden;
    width: var(--partial-width, 0%);
    transition: width 0.3s ease;
}

.baiviet-star:hover {
    color: #ff6b6b;
}

.baiviet-rating-score {
    color: #000;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

/* .baiviet-reset-rating {
    background: none;
    border: none;
    color: #999;
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
    margin-left: 8px;
}

.baiviet-reset-rating:hover {
    color: #ff6b6b;
    background-color: rgba(255, 107, 107, 0.1);
} */

/* Social Icons */
.baiviet-social-icons {
    display: flex;
    gap: 13px;
    align-items: center;
}

.baiviet-social-icon {
    display: block;
    transition: opacity 0.2s ease;
}

.baiviet-social-icon:hover {
    opacity: 0.8;
}

.baiviet-social-icon img {
    width: 21.8px;
    height: 23.965px;
    object-fit: contain;
}

/* Khung C */
.baiviet-khung-c {
    width: 100%;
    margin-top: 80px;
}

.baiviet-khung-c-container {
    width: 1236px;
    height: 599px;
    margin: 0 auto 80px;
}

.baiviet-khung-c-title {
    width: 1236px;
    height: 59px;
    display: flex;
    align-items: center;
    margin-bottom: 72px;
}

.baiviet-khung-c-title h3 {
    color: var(--Foundation-black-Normal, #333);
    font-family: Montserrat;
    font-size: 39px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    align-self: stretch;
    margin: 0;
}

.baiviet-khung-c-content {
    width: 1236px;
    height: 468px;
}

/* Optional: scale down on smaller screens to keep spec size layout visible */
@media (max-width: 1241px) {
    .baiviet-container { 
        overflow: visible; 
        max-width: 100%;
        padding: 0 16px;
    }
    .baiviet-frame-a {
        width: 100%;
        max-width: 1241px;
        height: auto;
        padding: 16px;
        flex-wrap: nowrap;
        gap: 20px;
    }
    .baiviet-box-a1 {
        width: 250px;
        min-width: 250px;
        max-width: 250px;
        flex-basis: 250px;
    }
    .baiviet-box-b {
        width: calc(100% - 270px);
        min-width: 600px;
        max-width: none;
        flex-basis: calc(100% - 270px);
    }
    .khung-cz {
        width: 250px;
        min-width: 250px;
        max-width: 250px;
    }
}

/* Khung Bài viết liên quan */
/* CSS cho phần bài viết hữu ích (faq-section-4-bottom) */
.faq-section-4-bottom {
    width: 1236px;
    height: 468px;
    display: flex;
    gap: 76px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: none;
    -webkit-overflow-scrolling: touch;
    /* Hide scrollbar across browsers */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    cursor: default; /* arrow cursor */
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-x;
    scroll-behavior: smooth;
}

.faq-section-4-bottom.is-dragging {
    cursor: default; /* keep arrow cursor even when dragging */
    scroll-snap-type: none; /* disable snap while dragging for smoothness */
}

.faq-section-4-bottom::-webkit-scrollbar { display: none; }

.faq-section-4-bottom.is-dragging {
    scroll-snap-type: none; /* disable snap while dragging for smoothness */
}

.faq-article-card {
    width: 300px;
    height: 468px;
    flex: 0 0 auto;
    scroll-snap-align: start;
}

/* Disable interactions that interfere with dragging */
.faq-section-4-bottom *, .faq-article-card *, .faq-article-title, .faq-article-desc {
    -webkit-user-select: none;
    user-select: none;
}
.faq-article-card * { pointer-events: auto; }
.faq-article-card a { display: block; width: 100%; height: 100%; text-decoration: none; color: inherit; }

.faq-article-image {
    width: 300px;
    height: 302px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
}
.faq-article-image img {
    width: 300px;
    height: 302px;
    object-fit: cover;
    display: block;
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none; /* avoid capturing drag */
}
.faq-article-title {
    width: 300px;
    height: 40px;
    margin-top: 16px; /* gap ảnh 16px */
    color: var(--Foundation-black-Normal, #333);
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    flex: 1 0 0;
    display: flex;
    padding: 0 10px;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    box-sizing: border-box; /* keep padding inside 300px */
    text-align: left;
}
.faq-article-desc {
    width: 300px;
    height: 110px;
    padding: 10px;
    color: var(--Foundation-black-Normal, #333);
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    flex: 1 0 0;
    box-sizing: border-box;
}

/* Khung D (1440x599) */
.baiviet-khung-d {
    width: 100%;
    margin-top: 80px;
}

.baiviet-khung-d-container {
    width: 1440px;
    height: 599px;
    margin: 0 auto 80px;
}

/* CSS cho phần liên hệ (faq-section-3) */
.faq-section-3-top {
    width: 1440px;
    height: 59px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 45px;
}

.faq-section-3-top-text {
    color: var(--Foundation-black-Normal, #333);
    text-align: center;
    font-family: Montserrat;
    font-size: 39px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 58.5px */
    align-self: stretch;
}

.faq-section-3-bottom {
    width: 1440px;
    height: 599px;
    margin: 0 auto;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), url('/wp-content/themes/Web-tuvanhosocapdo-attt/public/images/home10.png') lightgray 50% / cover no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* FAQ Contact Form Styles */
.faq-frame-e1 {
    width: 915px;
    height: 438px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.faq-frame-e2 {
    width: 915px;
    height: 273px;
    margin-top: 32px;
}

.faq-frame-e3 {
    width: 915px;
    height: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF600;
    font-size: 31px;
    font-weight: 700;
    text-align: center;
}

.faq-frame-e4 {
    width: 915px;
    height: 194px;
    margin-top: 32px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 32px 41px;
}

.faq-frame-e41, .faq-frame-e42, .faq-frame-e43, .faq-frame-e44 {
    width: 437px;
    height: 81px;
}

.faq-frame-e41a {
    height: 38px;
    color: #FFFFFF !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    display: flex;
    align-items: center;
    padding-left: 10px;
}

.faq-frame-e41b {
    width: 437px;
    height: 38px;
    border-radius: 30px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
}

.faq-input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    font-size: 14px;
    color: #000;
    background: transparent;
    padding-left: 28px;
}

.faq-dropdown-container {
    position: relative;
}

.faq-dropdown {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 40px;
    cursor: pointer;
}

.faq-dropdown-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 12px;
    flex-shrink: 0;
    pointer-events: none;
}

.faq-frame-e5 {
    width: 915px;
    height: 40px;
    margin-top: 61px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-cta-button {
    width: 150px;
    height: 40px;
    background-color: #FFF600;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #000000;
    font-size: 16px;
    font-weight: normal;
    transition: all 0.3s ease;
}

.faq-cta-button:hover {
    background-color: #E6DD00;
    transform: translateY(-2px);
}