.quy-trinh-container {
    width: 1440px;
    height: auto;
    margin: 0 auto;
    position: relative;
}

.khung-a {
    width: 1440px;
    height: 482px;
    position: relative;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.khung-a1 {
    width: 1056px;
    height: 335px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.khung-a2 {
    width: 1056px;
    height: 79px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.khung-a2 h1 {
    font-size: 39px;
    color: #fff600;
    font-weight: bold;
    text-align: center;
    margin: 0;
}

.khung-a3 {
    width: 1056px;
    height: 140px;

    margin-top: 38px;
    position: relative;
}

.khung-a31 {
    width: 419px;
    height: 140px;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
}

.khung-a31 ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.khung-a31 li {
    font-size: 20px;
    color: #ffffff;
    font-weight: normal;
    text-align: left;
    margin-bottom: 10px;
    position: relative;
    padding-left: 20px;
}

.khung-a31 li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #ffffff;
}

.khung-a32 {
    width: 334px;
    height: 140px;
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
}

.khung-a32 ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.khung-a32 li {
    font-size: 20px;
    color: #ffffff;
    font-weight: normal;
    text-align: left;
    margin-bottom: 10px;
    position: relative;
    padding-left: 20px;
}

.khung-a32 li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #ffffff;
}

.khung-a4 {
    width: 204px;
    height: 40px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff600;
    border-radius: 12px;
}

.khung-a4 span {
    font-size: 16px;
    color: #000000;
    font-weight: normal;
    text-align: center;
}

/* Khung B: 1238x992, 91px dưới khung A */
.khung-b {
    width: 1238px;
    height: 992px;
    margin: 91px auto 0;
    position: relative;
}

/* Khung B1: 1238x468, căn trên khung B (copy từ khung C2) */
.khung-b1 {
    width: 1238px;
    height: 468px;
    position: relative;
    display: flex;
    gap: 65px;
    align-items: flex-start;
    justify-content: space-between;
}

/* Khung B11: 510x468, top-left của B1 */
.khung-b11 {
    width: 510px;
    height: 468px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.khung-b11a {
    width: 510px;
    height: 302px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.qt-home4-image {
    width: 510px;
    height: 302px;
    object-fit: cover;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.khung-b11b {
    width: 510px;
    height: 40px;
    margin-top: 16px;
    color: #000000;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    padding-left: 10px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.khung-b11c {
    width: 510px;
    height: 65px;
    margin-top: 10px;
    color: #000000;
    font-size: 10px;
    font-weight: 400;
    line-height: 150%;
    text-align: left;
    padding-left: 10px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Khung B12: 300x468, 65px bên phải B11 */
.khung-b12 {
    width: 300px;
    height: 468px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.khung-b12a {
    width: 300px;
    height: 302px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.qt-home5-image {
    width: 300px;
    height: 302px;
    object-fit: cover;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.khung-b12b {
    width: 300px;
    height: 40px;
    margin-top: 16px;
    color: #000000;
    font-size: 13px;
    font-weight: 700;
    padding-left: 10px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.khung-b12c {
    width: 300px;
    height: 110px;
    margin-top: 10px;
    color: #000000;
    font-size: 10px;
    font-weight: 400;
    line-height: 150%;
    padding-left: 10px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Khung B13: 300x468, 65px bên phải B12 */
.khung-b13 {
    width: 300px;
    height: 468px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.khung-b13a {
    width: 300px;
    height: 302px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.qt-home6-image {
    width: 300px;
    height: 302px;
    object-fit: cover;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.khung-b13b {
    width: 300px;
    height: 40px;
    margin-top: 16px;
    color: #000000;
    font-size: 13px;
    font-weight: 700;
    padding-left: 10px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.khung-b13c {
    width: 300px;
    height: 110px;
    margin-top: 10px;
    color: #000000;
    font-size: 10px;
    font-weight: 400;
    line-height: 150%;
    padding-left: 10px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Khung B2: 1238x453, căn dưới khung B (copy từ khung C3) */
.khung-b2 {
    width: 1238px;
    height: 453px;
    margin-top: 71px;
    display: flex;
}

/* Khung B21: 350x453 */
.khung-b21 {
    width: 350px;
    height: 453px;
}

.khung-b21a {
    width: 350px;
    height: 317px;
}

.qt-home7-image {
    width: 350px;
    height: 317px;
    object-fit: cover;
}

.khung-b21b {
    width: 350px;
    height: 40px;
    margin-top: 16px;
    color: #000000;
    font-size: 13px;
    font-weight: 700;
    padding-left: 10px;
}

.khung-b21c {
    width: 350px;
    height: 80px;
    margin-top: 10px;
    color: #000000;
    font-size: 10px;
    font-weight: 400;
    line-height: 150%;
    padding-left: 10px;
}

/* Khung B22: 350x453, 94px bên phải B21 */
.khung-b22 {
    width: 350px;
    height: 453px;
    margin-left: 94px;
}

.khung-b22a {
    width: 350px;
    height: 317px;
}

.qt-home8-image {
    width: 350px;
    height: 317px;
    object-fit: cover;
}

.khung-b22b {
    width: 350px;
    height: 40px;
    margin-top: 16px;
    color: #000000;
    font-size: 13px;
    font-weight: 700;
    padding-left: 10px;
}

.khung-b22c {
    width: 350px;
    height: 80px;
    margin-top: 10px;
    color: #000000;
    font-size: 10px;
    font-weight: 400;
    line-height: 150%;
    padding-left: 10px;
}

/* Khung B23: 350x453, 94px bên phải B22 */
.khung-b23 {
    width: 350px;
    height: 453px;
    margin-left: 94px;
}

.khung-b23a {
    width: 350px;
    height: 317px;
}

.qt-home9-image {
    width: 350px;
    height: 317px;
    object-fit: cover;
}

.khung-b23b {
    width: 350px;
    height: 40px;
    margin-top: 16px;
    color: #000000;
    font-size: 13px;
    font-weight: 700;
    padding-left: 10px;
}

.khung-b23c {
    width: 350px;
    height: 80px;
    margin-top: 10px;
    color: #000000;
    font-size: 10px;
    font-weight: 400;
    line-height: 150%;
    padding-left: 10px;
}

/* Khung C: auto height, 104px dưới khung B */
.khung-c {
    width: 1249px;
    margin: 104px auto 0;
    position: relative;
    display: grid;
    grid-template-columns: 906px 277px;
    column-gap: 66px; /* 1249 - 906 - 277 = 66 */
}

/* Khung C1: cột trái, auto height */
.khung-c1 { 
    width: 906px; 
    max-height: 1502px; 
    overflow-y: auto; 
    /* Hide scrollbar across browsers */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
/* Hide scrollbar for WebKit browsers */
.khung-c1::-webkit-scrollbar { display: none; }
/* one continuous grid for all items; 9 đầu tiên nằm phía trên fold tự nhiên */

/* Grid 3 cột, tự xuống dòng, tối đa 9 phần tử */
 .khung-c1-grid {
     display: grid;
     grid-template-columns: repeat(3, 260px);
     grid-auto-rows: 468px;
     gap: 0 63px; /* 906 - (260*3) = 126 => 63px mỗi khoảng */
     height: auto;
 }
.khung-c-extras { width: 906px; height: 1px; }

.khung-c1-card { width: 260px; height: 468px; }
.khung-c1-card-a { width: 260px; height: 302px; }
.khung-c1-card-img { width: 260px; height: 302px; object-fit: cover; display: block; }
.khung-c1-card-b { width: 260px; height: 40px; margin-top: 16px; color: #000; font-size: 13px; font-weight: 700; padding-left: 10px; }
.khung-c1-card-c { width: 260px; height: 110px; margin-top: 10px; color: #000; font-size: 10px; font-weight: 400; line-height: 150%; padding-left: 10px; }

/* Khung C2: 277x838, căn trên phải khung C, viền vàng */
.khung-c2 {
    width: 277px;
    height: 838px;
    position: absolute;
    top: 0;
    right: 0;
    
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

/* Khung C21: 249x542, căn trái trên khung C2 */
.khung-c21 {
    width: 249px;
    height: 542px;
    position: absolute;
    top: 0;
    left: 0;
}

/* Khung C211: 249x38, căn trên khung C21 */
.khung-c211 {
    width: 249px;
    height: 38px;
    position: absolute;
    top: 0;
    left: 0;
    color: #fff600;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Khung C212: 249x480, dưới C211 24px */
.khung-c212 {
    width: 249px;
    height: 480px;
    position: absolute;
    top: 62px; /* 38px (C211 height) + 24px */
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

/* Các khung item trong C212: 229x60 */
.khung-c212-item {
    width: 229px;
    height: 60px;
    color: #000000;
    font-size: 13px;
    font-weight: normal;
    text-align: left;
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
}

/* Các đường phân chia giữa các item */
.khung-c212-divider {
    width: 229px;
    height: 0;
    border-top: 1px solid #000000;
    margin: 10px 0;
}

/* Khoảng cách giữa các item */
.khung-c212-item.item-1 {
    margin-top: 10px;
}

.khung-c212-item.item-2,
.khung-c212-item.item-3,
.khung-c212-item.item-4,
.khung-c212-item.item-5,
.khung-c212-item.item-6 {
    margin-top: 20px;
}

/* Khung CZ: 277x838, căn trên căn phải khung C */
.khung-cz { width: 277px; height: 838px; }

/* Khung CZ1: 249x542, căn trái căn trên khung CZ */
.khung-cz1 {
    width: 249px;
    height: auto; /* was 542px; now auto to shrink to content */
    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: auto; /* was 480px; now auto to fit posts count */
    margin-top: 24px; /* keep a modest gap below title */
    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;
    border-bottom: 2px solid #333333; /* always show a separator */
}
/* remove separator for the last item */
.khung-cz3 .khung-bai-viet:last-child { border-bottom: none; }
/* spacing similar to previous .duong-ngang margins */
.khung-cz3 .khung-bai-viet:not(:last-child) { margin-bottom: 20px; }

.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 */
.duong-ngang {
    width: 229px;
    height: 2px;
    background-color: #333333;
    margin: 20px 0;
    opacity: 0.8;
    display: none; /* hidden because we now use border-bottom */
}

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

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

/* Khung CZ3 Tags: 277x200, dưới đường ngang CZZ 48px */
.khung-cz3-tags {
    width: 277px;
    height: 200px;
    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;
}

/* Khung Z: Copy từ khung E của trang chủ, 807px dưới khung C */
.khung-z {
    width: 1440px;
    height: 599px;
    margin: 104px auto 65px;
    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;
}

/* Qt Frame E: Form liên hệ sử dụng template part chung */
.qt-frame-e {
    width: 915px;
    height: 438px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.qt-frame-e1 {
    width: 915px;
    height: 438px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

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

.qt-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;
}

.qt-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;
}

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

.qt-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;
}

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

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

/* Override to ensure Z1 vertical stacking so Z5 sits correctly */
.khung-z > .khung-z1 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* Z1: 915x438 centered box with vertical stack */
.khung-z1 {
    width: 915px;
    height: 438px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

/* Z2: 915x273, 32px from top of Z1 */
.khung-z2 {
    width: 915px;
    height: 273px;
    margin-top: 32px;
}

/* Z3: 915x47 centered title */
.khung-z3 {
    width: 915px;
    height: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF600;
    font-size: 31px;
    font-weight: 700;
    text-align: center;
}

/* Z4: 915x194 grid of four fields, 32px below Z3 */
.khung-z4 {
    width: 915px;
    height: 194px;
    margin-top: 32px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 32px 41px; /* vertical 32, horizontal ~41 to fit 437+437+41=915 */
}

/* Each Z41..Z44 block: 437x81 */
.khung-z41, .khung-z42, .khung-z43, .khung-z44 {
    width: 437px;
    height: 81px;
}

/* Label row: height 38, bold white 16 */
.khung-z41a {
    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;
}

/* Input row: 437x38, white bg, radius 30 */
.khung-z41b {
    width: 437px;
    height: 38px;
    border-radius: 30px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
}

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

/* Dropdown specific styles */
.qt-dropdown-container {
    position: relative;
}

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

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

/* Z5: CTA 61px below Z4, centered */
.khung-z5 {
    width: 915px;
    height: 40px;
    margin-top: 61px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qt-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;
}

/* Khung Y: Copy từ faq-section-4 của trang FAQ, 104px trên khung Z */
.khung-y {
    width: 100%;
    margin: 104px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.khung-y-box {
    width: 1236px;
    height: 569px;
}

.khung-y-top {
    width: 1236px;
    height: 47px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 54px;
}

.khung-y-top-text {
    color: var(--Foundation-black-Normal, #333);
    font-family: Montserrat;
    font-size: 31px;
    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;
    text-align: left;
}

.khung-y-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;
}

.khung-y-bottom::-webkit-scrollbar { display: none; }

.khung-y-bottom.is-dragging {
    scroll-snap-type: none; /* disable snap while dragging for smoothness */
}

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

/* Disable interactions that interfere with dragging */
.khung-y-bottom *, .khung-y-article-card *, .khung-y-article-title, .khung-y-article-desc {
    -webkit-user-select: none;
    user-select: none;
}
.khung-y-article-card * { pointer-events: none; }

.khung-y-article-image {
    width: 300px;
    height: 302px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
}

.khung-y-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 */
}

.khung-y-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;
}

.khung-y-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;
}

/* Remove underline from related posts links */
.khung-y-bottom a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.khung-y-bottom a:hover {
    text-decoration: none;
    color: inherit;
}

.khung-y-bottom a:visited {
    text-decoration: none;
    color: inherit;
}

.khung-y-bottom a:active {
    text-decoration: none;
    color: inherit;
}