/* Khung bao ngoài */
.pti-wrapper {
    width: 100%;
    box-sizing: border-box;
}

/* Tiêu đề chính */
.pti-title {
    font-size: 28px;
    color: var(--color-main);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 40px;
    text-align: left;
}

/* Khung cha: CỐ ĐỊNH CHIỀU CAO 520px */
.pti-grid-container {
    display: flex;
    height: 520px;
    position: relative;
    background-color: var(--color-white);
    cursor: pointer;
    box-sizing: border-box;
}

/* Từng cột: Luôn kéo dài 100% từ đỉnh xuống đáy */
.pti-col-item {
    flex: 1;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 15px 30px 25px;
    box-sizing: border-box;
}

/* 1. THANH MỜ DÀI LÊN CAO THEO BẬC THANG CỐ ĐỊNH (ẢNH 2) */
.pti-col-item::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1px;
    background-color: #E2E8F0;
    z-index: 1;
}

/* Độ cao thanh mờ vươn cao tít lên trên (Đúng bậc thang ảnh 2) */
.pti-col-item:nth-child(1)::before { height: 260px; }
.pti-col-item:nth-child(2)::before { height: 340px; }
.pti-col-item:nth-child(3)::before { height: 410px; }
.pti-col-item:nth-child(4)::before { height: 470px; }
.pti-col-item:nth-child(5)::before { height: 500px; }
.pti-col-item:nth-child(6)::before { height: 520px; }

/* 2. KHỐI NỘI DUNG (THANH VÀNG + ẢNH + CHỮ + ĐOẠN VĂN) */
.pti-content-box {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: transform 0.65s cubic-bezier(0.25, 1, 0.5, 1);
    transform: translateY(0);
    z-index: 2;
}

/* THANH VÀNG: Gắn trực tiếp vào mép trái và thẳng hàng với Icon */
.pti-gold-bar {
    position: absolute;
    left: -26px;
    top: 2px;
    width: 3px;
    height: 40px;
    background-color: var(--fs-color-base);
    border-radius: 2px;
    z-index: 3;
}

/* Khung chứa ảnh icon */
.pti-icon-wrap {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    height: 44px;
}

.pti-icon-img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    display: block;
}

/* Tiêu đề cột */
.pti-col-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--fs-color-base);
    margin: 0 0 10px 0;
    line-height: 1.3;
}

/* Đoạn mô tả: Ban đầu giấu hoàn toàn */
.pti-col-desc {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(20px);
    transition: max-height 0.65s cubic-bezier(0.25, 1, 0.5, 1),
                opacity 0.4s ease,
                transform 0.5s ease;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--deep-cool-gray);
    margin: 0;
    text-align: justify;
}

/* 3. KHI HOVER: TRƯỢT DỌC LÊN THEO THANH MỜ (HIỆN NHƯ ẢNH 2) */
/* Hiện đoạn văn mô tả */
.pti-grid-container:hover .pti-col-desc {
    max-height: 260px;
    opacity: 1;
    transform: translateY(0);
}

/* Trượt đồng bộ cả thanh vàng + icon + chữ lên cao dọc thanh mờ */
.pti-grid-container:hover .pti-col-item:nth-child(1) .pti-content-box { transform: translateY(0px); }
.pti-grid-container:hover .pti-col-item:nth-child(2) .pti-content-box { transform: translateY(-50px); }
.pti-grid-container:hover .pti-col-item:nth-child(3) .pti-content-box { transform: translateY(-105px); }
.pti-grid-container:hover .pti-col-item:nth-child(4) .pti-content-box { transform: translateY(-160px); }
.pti-grid-container:hover .pti-col-item:nth-child(5) .pti-content-box { transform: translateY(-215px); }
.pti-grid-container:hover .pti-col-item:nth-child(6) .pti-content-box { transform: translateY(-270px); }

/* Hiệu ứng trễ từng cột */
.pti-grid-container:hover .pti-col-item:nth-child(1) .pti-col-desc { transition-delay: 0.05s; }
.pti-grid-container:hover .pti-col-item:nth-child(2) .pti-col-desc { transition-delay: 0.1s; }
.pti-grid-container:hover .pti-col-item:nth-child(3) .pti-col-desc { transition-delay: 0.15s; }
.pti-grid-container:hover .pti-col-item:nth-child(4) .pti-col-desc { transition-delay: 0.2s; }
.pti-grid-container:hover .pti-col-item:nth-child(5) .pti-col-desc { transition-delay: 0.25s; }
.pti-grid-container:hover .pti-col-item:nth-child(6) .pti-col-desc { transition-delay: 0.3s; }

/* 4. RESPONSIVE CHO TABLET & MOBILE */
@media (max-width: 991px) {
    .pti-grid-container {
        height: auto;
        flex-wrap: wrap;
    }
	
    .pti-col-item {
        flex: 0 0 50%;
        margin-bottom: 30px;
        height: auto;
    }
	
    .pti-col-item::before {
        height: 100% !important;
    }
	
    .pti-content-box,
    .pti-grid-container:hover .pti-content-box {
        transform: none !important;
    }
	
    .pti-col-desc {
        max-height: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (max-width: 576px) {
    .pti-col-item {
        flex: 0 0 100%;
        padding-left: 20px;
    }
	
    .pti-gold-bar {
        left: -21px;
    }
	
    .pti-title {
        font-size: 22px;
        margin-bottom: 25px;
    }
}