@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

   /* ============================
      RESET VÀ BIẾN MÀU
      ============================ */
   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }
   
   :root {
       --emerald-green: #0a6e5c;
       --dark-emerald: #074c3f;
       --light-emerald: #e6f4f1;
       --gold: #d4af37;
       --white: #ffffff;
       --light-gray: #f8f9fa;
       --medium-gray: #eaeaea;
       --text-dark: #1a1a1a;
       --text-medium: #333333;
       --text-light: #666666;
   }
   

   
   /* ===== CONTAINER RIÊNG CHO PAGE 1 ===== */
   .du-an-1-container {
       max-width: 1400px;
       margin: 0 auto;
       padding: 20px;
   }
   
   /* ============================
      PAGE 1 - HERO
      ============================ */
   .page-1 {
       width: 100%;
       min-height: 100vh;
   }
   
   .home2-1 {
       position: relative;
       width: 100vw;
       height: 100vh;
       margin: 0;
       padding: 0;
       overflow: hidden;
       z-index: 1;
   }
   
   .home2-1::after {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(0, 0, 0, 0.3);
       z-index: 0;
       pointer-events: none;
   }
   
   .anh-17 {
       position: absolute;
       inset: 0;
       width: 100%;
       height: 100%;
       object-fit: cover;
       object-position: center;
       z-index: 1;
   }

   
   .a {
       position: absolute;
       z-index: 3;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       width: 280px;
       height: auto;
   }
   
   @media (max-width: 768px) {
       .a {
           width: 180px;
       }
   }
   
   /* ============================
      SECTION 2 - GIỚI THIỆU
      ============================ */
   .home2-2 {
       padding: 60px 20px;
       background: linear-gradient(to bottom, #f8f9fa, #ffffff);
   }
   
   .home2-tieu-de1 {
       max-width: 1200px;
       margin: 0 auto 40px;
       text-align: center;
   }
   
   .home2-tieu-de1 h1 {
       font-family: 'Playfair Display', serif;
       font-size: 4rem;
       font-weight: 700;
       background: linear-gradient(135deg, var(--dark-emerald) 30%, var(--gold) 80%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
       margin-bottom: 20px;
       text-align: center;
       letter-spacing: 2px;
       text-transform: uppercase;
       text-shadow: 2px 2px 4px rgba(0,0,0,0.05);
       position: relative;
       padding-bottom: 20px;
   }
   
   .home2-tieu-de1 h1::after {
       content: '';
       position: absolute;
       bottom: 0;
       left: 50%;
       transform: translateX(-50%);
       width: 150px;
       height: 4px;
       background: linear-gradient(to right, var(--emerald-green), var(--gold));
       border-radius: 2px;
   }
   
   .home2-noidung1 {
       max-width: 1200px;
       margin: 0 auto 30px;
       font-size: 1.2rem;
       line-height: 1.8;
       color: var(--text-medium);
       text-align: justify;
       padding: 0 20px;
   }
   
   .home2-noidung1 p {
       margin-bottom: 1.4em;
   }
   
   .highlight {
       color: var(--emerald-green);
       font-weight: 600;
   }
   
   .anh-18 {
       max-width: 1200px;
       margin: 0 auto;
       text-align: center;
       padding: 0 20px;
   }
   
   .anh-18 img {
       width: 100%;
       height: auto;
       border-radius: 10px;
       box-shadow: 0 20px 40px rgba(0,0,0,0.15);
       transition: transform 0.3s ease;
   }
   
   .anh-18:hover img {
       transform: scale(1.02);
   }
   
   /* ============================
      TỔNG QUAN DỰ ÁN
      ============================ */
   .tq2-1 {
       font-family: 'Inter', sans-serif;
       padding: 60px 20px;
       background: linear-gradient(to bottom, #f8f9fa, #ffffff);
   }
   
   .tq2-tieu-de1 {
       font-family: 'Playfair Display', serif;
       font-size: 2.8rem;
       font-weight: 700;
       background: linear-gradient(135deg, var(--dark-emerald) 30%, var(--gold) 80%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
       text-align: center;
       margin-bottom: 50px;
       position: relative;
       padding-bottom: 20px;
       max-width: 1200px;
       margin-left: auto;
       margin-right: auto;
   }
   
   .tq2-tieu-de1::after {
       content: '';
       position: absolute;
       bottom: 0;
       left: 50%;
       transform: translateX(-50%);
       width: 150px;
       height: 4px;
       background: linear-gradient(to right, var(--emerald-green), var(--gold));
       border-radius: 2px;
   }
   
   .tq2-row {
       display: flex;
       flex-wrap: wrap;
       gap: 40px;
       max-width: 1400px;
       margin: 0 auto;
       justify-content: center;
       align-items: stretch;
   }
   
   .tq2-bang-container {
       flex: 1;
       min-width: 500px;
       max-width: 700px;
       background-color: var(--white);
       border-radius: 15px;
       box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
       overflow: hidden;
       border: 1px solid rgba(10, 110, 92, 0.1);
   }
   
   .tq2-bang {
       width: 100%;
       border-collapse: collapse;
   }
   
   .tq2-bang tr {
       border-bottom: 1px solid var(--medium-gray);
       transition: all 0.3s ease;
   }
   
   .tq2-bang tr:last-child {
       border-bottom: none;
   }
   
   .tq2-bang td {
       padding: 20px;
       vertical-align: top;
       font-size: 1.1rem;
   }
   
   .tq2-bang td:first-child {
       background-color: var(--dark-emerald);
       color: var(--white);
       font-weight: 600;
       width: 35%;
       border-right: none;
   }
   
   .tq2-bang td:last-child {
       color: var(--text-medium);
       background-color: var(--white);
   }
   
   .tq2-bang tr:hover {
       background-color: rgba(10, 110, 92, 0.05);
   }
   
   .tq2-bang tr:hover td:first-child {
       background-color: #0a5c4d;
   }
   
   .highlight-text {
       color: var(--emerald-green);
       font-weight: 600;
       font-size: 1.1rem;
   }
   
   .anh-19 {
       flex: 1;
       min-width: 500px;
       max-width: 700px;
       overflow: hidden;
       border-radius: 15px;
       box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
       position: relative;
       border: 3px solid var(--emerald-green);
       transition: all 0.3s ease;
   }
   
   .anh-19:hover {
       transform: scale(1.02);
       box-shadow: 0 30px 60px rgba(39, 174, 96, 0.3);
       border-color: var(--gold);
   }
   
   .anh-19 img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform 0.5s ease;
   }
   
   .anh-19:hover img {
       transform: scale(1.05);
   }
   
   
   
   .anh-23 {
       width: 100%;
       display: block;
   }
   
   /* ============================
      VỊ TRÍ SECTION
      ============================ */
   .content-section {
       background-color: white;
       border-radius: 15px;
       box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
       padding: 50px;
       margin-bottom: 40px;
   }
   
   .section-title {
       font-family: 'Playfair Display', serif;
       font-size: 2.8rem;
       font-weight: 700;
       background: linear-gradient(135deg, var(--dark-emerald) 30%, var(--gold) 80%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
       margin-bottom: 40px;
       position: relative;
       padding-bottom: 20px;
       display: flex;
       align-items: center;
       gap: 15px;
   }

   .section-title i {
       color: var(--gold);
       font-size: 2.5rem;
   }
   
   .content-text {
       font-size: 1.2rem;
       line-height: 1.8;
       color: var(--text-medium);
       margin-bottom: 30px;
       text-align: justify;
   }
   
   .content-text p {
       margin-bottom: 20px;
   }
   
   .content-text strong {
       color: var(--emerald-green);
       font-weight: 600;
   }
   
   /* Advantages Section */
   .advantages {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
       gap: 30px;
       margin-top: 40px;
   }
   
   .advantage-card {
       background: linear-gradient(145deg, var(--light-emerald), #ffffff);
       border-radius: 15px;
       padding: 30px;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
       border-left: 5px solid var(--gold);
       transition: all 0.3s ease;
       height: 100%;
       position: relative;
       overflow: hidden;
   }
   
   .advantage-card::before {
       content: '“';
       position: absolute;
       top: -20px;
       right: 20px;
       font-size: 8rem;
       color: rgba(212, 175, 55, 0.1);
       font-family: serif;
       z-index: 0;
   }
   
   .advantage-card:hover {
       transform: translateY(-10px);
       box-shadow: 0 20px 40px rgba(0, 110, 92, 0.15);
       border-left-color: var(--emerald-green);
   }
   
   .advantage-icon {
       font-size: 2.8rem;
       color: var(--emerald-green);
       margin-bottom: 20px;
       position: relative;
       z-index: 1;
   }
   
   .advantage-card h3 {
       font-family: 'Playfair Display', serif;
       font-size: 1.6rem;
       color: var(--dark-emerald);
       margin-bottom: 20px;
       position: relative;
       z-index: 1;
   }
   
   .advantage-card ul {
       list-style: none;
       padding-left: 0;
       position: relative;
       z-index: 1;
   }
   
   .advantage-card li {
       margin-bottom: 12px;
       padding-left: 25px;
       position: relative;
       color: var(--text-medium);
   }
   
   .advantage-card li::before {
       content: '•';
       color: var(--gold);
       font-weight: bold;
       font-size: 1.3rem;
       position: absolute;
       left: 0;
       top: -3px;
   }
   
   .anh-24 {
       margin: 40px 0;
       border-radius: 15px;
       overflow: hidden;
       box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
       position: relative;
       height: 700px;
       border: 3px solid var(--emerald-green);
   }
   
   .anh-24 img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       object-position: center;
       display: block;
       transition: transform 0.5s ease;
   }
   
   .anh-24:hover img {
       transform: scale(1.03);
   }
   
   .anh-24:hover {
       border-color: var(--gold);
   }
   
   /* Infrastructure Section */
   .infrastructure {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
       gap: 25px;
       margin-top: 40px;
   }
   
   .infra-item {
       display: flex;
       align-items: center;
       gap: 20px;
       background: linear-gradient(145deg, #f8f9fa, #ffffff);
       padding: 25px;
       border-radius: 12px;
       transition: all 0.3s ease;
       cursor: pointer;
       border-right: 4px solid var(--emerald-green);
   }
   
   .infra-item:hover {
       transform: translateX(10px);
       background-color: var(--light-emerald);
       border-right-color: var(--gold);
       box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
   }
   
   .infra-icon {
       background: linear-gradient(135deg, var(--emerald-green), var(--dark-emerald));
       color: white;
       width: 60px;
       height: 60px;
       border-radius: 50%;
       display: flex;
       justify-content: center;
       align-items: center;
       font-size: 1.6rem;
       flex-shrink: 0;
       box-shadow: 0 5px 15px rgba(10, 110, 92, 0.3);
   }
   
   .infra-text h4 {
       font-family: 'Playfair Display', serif;
       color: var(--dark-emerald);
       margin-bottom: 5px;
       font-size: 1.2rem;
   }
   
   .infra-text p {
       color: var(--text-light);
       font-size: 1rem;
   }
   
   /* ============================
      ẢNH BỔ SUNG
      ============================ */

   
   /* ============================
      TIỆN ÍCH DỰ ÁN
      ============================ */
   .utilities-section {
       padding: 60px 20px;
       background: linear-gradient(to bottom, #ffffff, #f8f9fa);
   }
   
   .utilities-intro {
       max-width: 1200px;
       margin: 0 auto 40px;
       font-size: 1.2rem;
       line-height: 1.8;
       color: var(--text-medium);
       text-align: justify;
       padding: 30px;
       background: linear-gradient(145deg, var(--light-emerald), #ffffff);
       border-radius: 15px;
       border-left: 8px solid var(--gold);
       position: relative;
   }
   
   .utilities-intro::before {
       content: '“';
       position: absolute;
       top: -20px;
       left: 30px;
       font-size: 8rem;
       color: rgba(212, 175, 55, 0.2);
       font-family: serif;
       z-index: 0;
   }
   
   .anh-26, .anh-27, .anh-28 {
       max-width: 1300px;
       margin: 30px auto;
       display: block;
       border-radius: 15px;
       overflow: hidden;
       box-shadow: 0 20px 40px rgba(0,0,0,0.15);
       border: 3px solid var(--emerald-green);
       transition: all 0.3s ease;
   }
   
   .anh-26:hover, .anh-27:hover, .anh-28:hover {
       transform: scale(1.02);
       border-color: var(--gold);
       box-shadow: 0 30px 60px rgba(39, 174, 96, 0.3);
   }
   
   .anh-26 img, .anh-27 img, .anh-28 img {
       width: 100%;
       height: auto;
       display: block;
       transition: transform 0.5s ease;
   }
   
   .anh-26:hover img, .anh-27:hover img, .anh-28:hover img {
       transform: scale(1.03);
   }
   
   .anh-29 {
    width: 100%;
    max-width: 1200px;
    margin: 20px auto;
    display: block;
    height: auto;
}
   
   .anh-30-container {
       display: flex;
       gap: 0;
       max-width: 1600px;
       margin: 0 auto;
       padding: 0 20px;
   }
   
   .anh-30-1, .anh-30-2 {
       flex: 1;
       width: 50%;
       overflow: hidden;
       border: 2px solid var(--emerald-green);
       transition: all 0.3s ease;
   }
   
   .anh-30-1:hover, .anh-30-2:hover {
       border-color: var(--gold);
       transform: scale(1.02);
       z-index: 2;
       box-shadow: 0 20px 40px rgba(0,0,0,0.2);
   }
   
   .anh-30-1 img, .anh-30-2 img {
       width: 100%;
       height: auto;
       display: block;
       transition: transform 0.5s ease;
   }
   
   .anh-30-1:hover img, .anh-30-2:hover img {
       transform: scale(1.05);
   }
   
   /* ============================
      TIỆN ÍCH NỘI KHU - GIỮ NGUYÊN
      ============================ */
   .ti2-2 {
       padding: 60px 20px;
       background: #ffffff;
   }
   
   .ti2-tieu-de1 {
       color: #0a5c36;
       font-size: 2.2rem;
       margin-bottom: 40px;
       padding-bottom: 15px;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 15px;
       text-align: center;
   }
   
   .tien-ich-block {
       max-width: 1100px;
       margin: 0 auto 50px;
   }
   
   .tien-ich-text {
       margin-bottom: 30px;
   }
   
   .tien-ich-text p {
       font-size: 1.2rem;
       line-height: 1.7;
       color: #333;
       margin-bottom: 15px;
       text-align: justify;
   }
   
   .tien-ich-img {
       max-width: 1100px;
       margin: 0 auto;
   }
   
   .tien-ich-img img {
       width: 100%;
       height: auto;
       display: block;
   }
   
   /* TIỆN ÍCH NGOẠI KHU */
   .tien-ich-ngoai-khu {
       max-width: 1300px;
       margin: 80px auto 0;
       padding: 40px;
       background: #f8f9fa;
       border-radius: 15px;
       border-left: 5px solid #0a5c36;
   }
   
   .tien-ich-subtitle {
       color: #0a5c36;
       font-size: 1.8rem;
       margin-bottom: 25px;
       text-align: center;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 15px;
   }
   
   .tien-ich-subtitle i {
       color: #ffd700;
   }
   
   .tien-ich-ngoai-text {
       margin-bottom: 40px;
   }
   
   .tien-ich-ngoai-text p {
       font-size: 1.1rem;
       line-height: 1.7;
       color: #333;
       margin-bottom: 15px;
       text-align: justify;
   }
   
   .tien-ich-ngoai-img {
       max-width: 1100px;
       margin: 0 auto;
   }
   
   .tien-ich-ngoai-img img {
       width: 100%;
       margin-bottom: 20px;
       height: auto;
       display: block;
   }
   
   /* ============================
      MẶT BẰNG - GIỮ NGUYÊN
      ============================ */
   .floor-plan-vertical {
       width: 100%;
       padding: 20px;
   }
   
   .plan-item {
       position: relative;
       width: 100%;
       margin-bottom: 0;
       border-radius: 8px;
       overflow: hidden;
   }
   
   .plan-img-full {
    display: block;
    width: 100%; /* Thay đổi từ 1200px thành 100% */
    max-width: 1200px; /* Giới hạn chiều rộng tối đa */
    height: auto;
    max-height: 600px;
    object-fit: contain;
    background-color: #e6e7b5;
    margin-bottom: 30px;
    margin-left: auto; /* Thay đổi từ 150px thành auto */
    margin-right: auto; /* Thêm margin-right auto để căn giữa */
}

/* Tùy chọn: Thêm media query cho màn hình nhỏ */
@media (max-width: 768px) {
    .plan-img-full {
        max-height: 400px; /* Giảm chiều cao tối đa trên mobile */
        margin-bottom: 20px; /* Giảm margin dưới trên mobile */
    }
}

#mat-bang {
    width: 100%;
    padding: 0 15px; 
    box-sizing: border-box;
}

.floor-plan-vertical {
    display: flex;
    flex-direction: column;
    align-items: center; /* Căn giữa các item */
    width: 100%;
}

.plan-item {
    width: 100%;
    display: flex;
    justify-content: center; /* Căn giữa ảnh trong item */
}
   
   
   @media (max-width: 768px) {
       .floor-plan-vertical {
           padding: 15px;
       }
       
       .plan-item {
           margin-bottom: 20px;
           border-radius: 5px;
       }
       
       
   }

   /* ============================
      ANIMATIONS
      ============================ */
   @keyframes fadeInUp {
       from {
           opacity: 0;
           transform: translateY(30px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }
   
   .content-section,
   .tq2-row,
   .advantage-card,
   .infra-item {
       animation: fadeInUp 0.8s ease forwards;
   }
   
   /* ============================
      RESPONSIVE
      ============================ */
   @media (max-width: 1400px) {
       .home2-tieu-de1 h1,
       .tq2-tieu-de1,
       .section-title {
           font-size: 3.2rem;
       }
   }
   
   @media (max-width: 1200px) {
       .tq2-row {
           flex-direction: column;
           align-items: center;
       }
       
       .tq2-bang-container,
       .anh-19 {
           min-width: 90%;
           max-width: 90%;
       }
       
       .anh-30-container {
           flex-direction: column;
       }
       
       .anh-30-1, .anh-30-2 {
           width: 100%;
           margin-bottom: 20px;
       }
   }
   
   @media (max-width: 992px) {
       .content-section {
           padding: 35px;
       }
       
       .section-title {
           font-size: 2.5rem;
       }
       
       .home2-tieu-de1 h1 {
           font-size: 3rem;
       }
       
       .advantages {
           grid-template-columns: repeat(2, 1fr);
       }
       
       .qa-table {
           font-size: 0.95rem;
       }
       
       .qa-table th,
       .qa-table td {
           padding: 15px 10px;
       }
   }
   
   @media (max-width: 768px) {
       .home2-tieu-de1 h1 {
           font-size: 2.5rem;
       }
       
       .tq2-tieu-de1,
       .section-title {
           font-size: 2.2rem;
       }
       
       .section-title {
           flex-direction: column;
           align-items: flex-start;
           gap: 10px;
       }
       
       .advantages {
           grid-template-columns: 1fr;
       }
       
       .content-section {
           padding: 25px;
       }
       
       .anh-row {
           flex-direction: column;
           height: auto;
       }
       
       .anh-col {
           flex: none;
           height: 350px;
           width: 100vw;
       }
       
       .anh-col-center {
           margin: 0;
       }
       
       .qa-table {
           display: block;
           overflow-x: auto;
           white-space: nowrap;
       }
       
       .qa-table th,
       .qa-table td {
           min-width: 200px;
       }
       
       .tien-ich-ngoai-khu {
           padding: 30px 20px;
       }
       
       .tien-ich-subtitle {
           font-size: 1.8rem;
           flex-direction: column;
       }
   }
   
   @media (max-width: 576px) {
       .home2-tieu-de1 h1 {
           font-size: 2rem;
       }
       
       .tq2-tieu-de1,
       .section-title {
           font-size: 1.8rem;
       }
       
       .content-text,
       .home2-noidung1,
       .utilities-intro,
       .tien-ich-text p,
       .tien-ich-ngoai-text p {
           font-size: 1rem;
       }
       
       .tq2-bang td {
           padding: 15px 10px;
           font-size: 0.95rem;
       }
       
       .advantage-card {
           padding: 20px;
       }
       
       .advantage-card h3 {
           font-size: 1.3rem;
       }
       
       .infra-item {
           padding: 15px;
       }
       
       .infra-icon {
           width: 50px;
           height: 50px;
           font-size: 1.3rem;
       }
       
       .anh-24 {
           height: 400px;
       }
   } 



/* ============================
   RESPONSIVE FULL CHO ĐIỆN THOẠI & TABLET
   ẢNH GIỮA DÀI HƠN 1/3 SO VỚI 2 ẢNH KIA
   ============================ */

/* Tablet: 769px - 1024px */
@media (max-width: 1024px) {
    .home2-tieu-de1 h1 {
        font-size: 3.5rem;
    }
    
    .tq2-tieu-de1,
    .section-title {
        font-size: 2.5rem;
    }
    
    .anh-row {
        height: 700px;
    }
}

/* Tablet nhỏ: 577px - 768px */
@media (max-width: 768px) {
    /* TIÊU ĐỀ */
    .home2-tieu-de1 h1 {
        font-size: 2.5rem;
    }
    
    .tq2-tieu-de1,
    .section-title {
        font-size: 2.2rem;
    }
    
    .section-title {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
    }
    
    .section-title i {
        font-size: 2rem;
    }
    
    /* VĂN BẢN */
    .home2-noidung1,
    .content-text,
    .utilities-intro,
    .tien-ich-text p,
    .tien-ich-ngoai-text p {
        font-size: 1rem;
    }
    
    /* BẢNG TỔNG QUAN */
    .tq2-row {
        flex-direction: column;
        gap: 30px;
    }
    
    .tq2-bang-container,
    .anh-19 {
        min-width: 100%;
        max-width: 100%;
    }
    
    .tq2-bang td {
        padding: 15px 10px;
        font-size: 0.95rem;
    }
    
    .tq2-bang td:first-child {
        width: 40%;
    }
    
    
    /* ADVANTAGES CARDS */
    .advantages {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .advantage-card {
        padding: 25px;
    }
    
    .advantage-card h3 {
        font-size: 1.4rem;
    }
    
    .advantage-card li {
        margin-bottom: 10px;
    }
    
    /* INFRASTRUCTURE */
    .infrastructure {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .infra-item {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    
    .infra-icon {
        margin-bottom: 10px;
    }
    
    .infra-text h4 {
        font-size: 1.1rem;
    }
    
    .infra-text p {
        font-size: 0.95rem;
    }
    
    /* ẢNH TIỆN ÍCH */
    .anh-30-container {
        flex-direction: column;
    }
    
    .anh-30-1, .anh-30-2 {
        width: 100%;
        margin-bottom: 20px;
    }
    
    .anh-30-1 img, .anh-30-2 img {
        width: 100%;
        height: auto;
    }
    
    /* MẶT BẰNG - ĐÃ XÓA VIỀN TRẮNG */
    .floor-plan-vertical {
        padding: 15px;
    }
    
    .plan-item {
        margin-bottom: 20px;
    }
    
    
    
    
    }
    
    /* BẢNG CÂU HỎI */
    .qa-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .qa-table th,
    .qa-table td {
        min-width: 200px;
    }
    
    .stt-cell {
        width: 60px;
        min-width: 60px;
    }
    
    .question-cell {
        min-width: 200px;
    }
    
    .answer-cell {
        min-width: 300px;
    }
    
    /* TIỆN ÍCH NGOẠI KHU */
    .tien-ich-ngoai-khu {
        padding: 30px 20px;
    }
    
    .tien-ich-subtitle {
        font-size: 1.6rem;
        flex-direction: column;
    }
    
    .tien-ich-ngoai-img {
        width: 100%;
        margin-bottom: 15px;
    }
    
    .tien-ich-ngoai-img img {
        width: 100%;
        height: auto;
    }
    
    /* PADDING CÁC SECTION */
    .home2-2,
    .tq2-1,
    .utilities-section,
    .ti2-2 {
        padding: 50px 15px;
    }
    
    .content-section {
        padding: 30px 20px;
    }
    
    /* ẢNH LỚN */
    .anh-24 {
        height: 500px;
    }
    
    .anh-24 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .anh-26, .anh-27, .anh-28 {
        margin: 20px auto;
    }
    
    .anh-26 img, .anh-27 img, .anh-28 img {
        width: 100%;
        height: auto;
    }


/* Điện thoại: 375px - 576px */
@media (max-width: 576px) {
    /* TIÊU ĐỀ */
    .home2-tieu-de1 h1 {
        font-size: 2rem;
    }
    
    .tq2-tieu-de1,
    .section-title {
        font-size: 1.8rem;
    }
    
    .section-title i {
        font-size: 1.8rem;
    }
    
    /* LOGO TRÊN BANNER */
    .a {
        width: 180px;
    }
    
    /* 3 ẢNH - GIỮA VẪN DÀI HƠN */
    .anh-col-left,
    .anh-col-right {
        height: 350px;
    }
    
    .anh-col-center {
        height: 480px; /* ẢNH GIỮA CAO HƠN 130px */
    }
    
    /* ẢNH LỚN */
    .anh-24 {
        height: 400px;
    }
    
    /* BẢNG */
    .tq2-bang td {
        padding: 12px 8px;
        font-size: 0.9rem;
    }
    
    /* TIỆN ÍCH */
    .tien-ich-block {
        margin: 30px auto;
    }
    
    .tien-ich-text p {
        font-size: 0.95rem;
    }
    
    .tien-ich-ngoai-text p {
        font-size: 0.95rem;
    }
    
    /* CARD */
    .advantage-card {
        padding: 20px;
    }
    
    .advantage-card h3 {
        font-size: 1.3rem;
    }
    
    .infra-item {
        padding: 15px;
    }
    
    .infra-icon {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
    }
    
    /* PADDING */
    .home2-2,
    .tq2-1,
    .utilities-section,
    .ti2-2{
        padding: 40px 12px;
    }
    
    .content-section {
        padding: 25px 15px;
    }
    
    
    
}

/* Điện thoại nhỏ: dưới 375px */
@media (max-width: 375px) {
    /* TIÊU ĐỀ */
    .home2-tieu-de1 h1 {
        font-size: 1.6rem;
    }
    
    .tq2-tieu-de1,
    .section-title {
        font-size: 1.5rem;
    }
    
    .section-title i {
        font-size: 1.5rem;
    }
    
    /* VĂN BẢN */
    .home2-noidung1,
    .content-text,
    .utilities-intro,
    .tien-ich-text p,
    .tien-ich-ngoai-text p {
        font-size: 0.9rem;
    }
    
    /* LOGO */
    .a {
        width: 140px;
    }
    
    /* 3 ẢNH - GIỮA VẪN DÀI HƠN */
    .anh-col-left,
    .anh-col-right {
        height: 300px;
    }
    
    .anh-col-center {
        height: 420px; /* ẢNH GIỮA CAO HƠN 120px */
    }
    
    /* ẢNH LỚN */
    .anh-24 {
        height: 300px;
    }
    
    /* BẢNG */
    .tq2-bang td {
        padding: 10px 6px;
        font-size: 0.85rem;
    }
    
    .tq2-bang td:first-child {
        width: 35%;
    }
    
    /* CARD */
    .advantage-card h3 {
        font-size: 1.2rem;
    }
    
    .advantage-card li {
        font-size: 0.9rem;
        padding-left: 20px;
    }
 
    
    
    
    /* BẢNG CÂU HỎI */
    .qa-table th,
    .qa-table td {
        padding: 15px 10px;
        font-size: 0.9rem;
    }
}



/* BẢNG CÂU HỎI - ĐÃ RESPONSIVE */
@media (max-width: 768px) {
    /* ... các CSS khác ... */
    
    /* BẢNG CÂU HỎI */
    .qa-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .qa-table th,
    .qa-table td {
        min-width: 200px;
    }
    
    .stt-cell {
        width: 60px;
        min-width: 60px;
    }
    
    .question-cell {
        min-width: 200px;
    }
    
    .answer-cell {
        min-width: 300px;
    }
}




/* ============================
   3 ẢNH DÍNH LIỀN - CHỈ GIỮ LẠI PHẦN NÀY
   ============================ */

/* DESKTOP LỚN (>1400px) */
.anh-full-width {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    overflow: hidden;
    background: #000;
}

.anh-row {
    display: flex;
    width: 100%;
    height: 1000px; /* Tăng lên để ảnh to hơn */
    margin: 0;
    padding: 0;
}

.anh-col {
    flex: 1;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.anh-col-left {
    flex: 1.5;
}

.anh-col-center {
    flex: 1.2;}

.anh-col-right {
    flex: 1.5;
}

.anh-col img {
    width: 100%;
    height: 100%;
    display: block;
    object-position: center;
    transition: transform 0.5s ease;
}

.anh-col:hover img {
    transform: scale(1.05);
}

/* DESKTOP NHỎ (1200px - 1400px) */
@media (max-width: 1400px) {
    .anh-row {
        height: 900px;
    }
}

/* DESKTOP TRUNG BÌNH (1025px - 1200px) */
@media (max-width: 1200px) {
    .anh-row {
        height: 800px;
    }
}

/* TABLET NGANG (901px - 1024px) */
@media (min-width: 901px) and (max-width: 1024px) {
    .anh-row {
        height: 700px;
    }
    
    /* Điều chỉnh để giữ chữ */
    .anh-col-left img {
        object-position: 25% center; /* Dịch phải 25% để lộ chữ bên trái */
    }
    
    .anh-col-right img {
        object-position: 75% center; /* Dịch trái 25% để lộ chữ bên phải */
    }
}

/* TABLET DỌC (768px - 900px) */
@media (min-width: 768px) and (max-width: 900px) {
    .anh-row {
        height: 550px;
    }
    
    .anh-col-left img {
        object-position: 20% center;
    }
    
    .anh-col-right img {
        object-position: 80% center;
    }
}

/* MOBILE LỚN (577px - 767px) */
@media (min-width: 577px) and (max-width: 767px) {
    .anh-full-width {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
    }
    
    .anh-row {
        flex-direction: column;
        height: auto;
    }
    
    .anh-col-left,
    .anh-col-center,
    .anh-col-right {
        width: 100%;
        flex: none;
    }
    
    /* TỰ ĐỘNG TĂNG DẦN TỪ 577px LÊN 767px */
    .anh-col-left {
        height: calc(600px + (100vw - 577px) * 1.2);
        /* 600px ở 577px, tăng dần lên 828px ở 767px */
    }
    
    .anh-col-center {
        height: calc(800px + (100vw - 577px) * 1.6);
        /* 800px ở 577px, tăng lên 1104px ở 767px (dài hơn 1/3) */
        margin: 8px 0;
    }
    
    .anh-col-right {
        height: calc(600px + (100vw - 577px) * 1.2);
    }
    
    .anh-col img {
        width: 100%;
        height: 100%;
        object-position: center;
    }
    
    .anh-col-left img {
        object-position: 30% center;
    }
    
    .anh-col-right img {
        object-position: 70% center;
    }
}

/* MOBILE TRUNG BÌNH (376px - 576px) - TĂNG DẦN */
@media (min-width: 376px) and (max-width: 576px) {
    .anh-full-width {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
    }
    
    .anh-row {
        flex-direction: column;
        height: auto;
    }
    
    .anh-col-left,
    .anh-col-center,
    .anh-col-right {
        width: 100%;
        flex: none;
    }
    
    /* TỰ ĐỘNG TĂNG DẦN TỪ 376px LÊN 576px */
    .anh-col-left {
        height: calc(500px + (100vw - 376px) * 0.8);
        /* 500px ở 376px, tăng dần lên 660px ở 576px */
    }
    
    .anh-col-center {
        height: calc(667px + (100vw - 376px) * 1.07);
        /* 667px ở 376px, tăng lên 881px ở 576px (dài hơn 1/3) */
        margin: 6px 0;
    }
    
    .anh-col-right {
        height: calc(500px + (100vw - 376px) * 0.8);
    }
    
    .anh-col img {
        width: 100%;
        height: 100%;
        object-position: center;
    }
    
    .anh-col-left img {
        object-position: 30% center;
    }
    
    .anh-col-right img {
        object-position: 70% center;
    }
}

/* MOBILE NHỎ (≤375px) - XẾP DỌC, TĂNG NHẸ */
@media (max-width: 375.9px) {
    .anh-full-width {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
    }
    
    .anh-row {
        flex-direction: column !important; /* ÉP XẾP DỌC */
        height: auto;
    }
    
    .anh-col-left,
    .anh-col-center,
    .anh-col-right {
        width: 100% !important;
        flex: none !important;
    }
    
    .anh-col-left {
        height: 480px;
    }
    
    .anh-col-center {
        height: 600px;
        margin: 5px 0;
    }
    
    .anh-col-right {
        height: 480px;
    }
    
    .anh-col img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    
    .anh-col-left img {
        object-position: 30% center;
    }
    
    .anh-col-right img {
        object-position: 70% center;
    }
}







.showcase-container {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    padding: 60px 20px;
    font-family: 'Montserrat', sans-serif;
    background: #f5f5f5;
    box-sizing: border-box;
}

.showcase-title {
    text-align: center;
    margin-bottom: 40px;
}

.showcase-title h2 {
    font-size: 42px;
    color: #1B5E20;
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    display: inline-block;
}

.showcase-title h2:after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: #4CAF50;
    border-radius: 2px;
}

.showcase-title p {
    font-size: 18px;
    color: #666;
    margin-top: 25px;
}

/* TABS */
.showcase-tabs {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.showcase-tab {
    padding: 15px 40px;
    background: white;
    border: 2px solid #4CAF50;
    border-radius: 50px;
    font-weight: 700;
    font-size: 18px;
    color: #4CAF50;
    cursor: pointer;
    transition: all 0.3s ease;
}

.showcase-tab:hover {
    background: #4CAF50;
    color: white;
    transform: translateY(-3px);
}

.showcase-tab.active {
    background: #4CAF50;
    color: white;
}

/* Nội dung căn hộ */
.showcase-content {
    display: none;
}

.showcase-content.active {
    display: block;
}

/* GRID ẢNH */
.image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

.image-item {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 4/3;
}

.image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

.image-item:hover img {
    transform: scale(1.1);
}

/* Ảnh đầu tiên to nhất */
.image-item.large {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: 12/9;
}

.image-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: white;
    padding: 20px 15px 15px;
    font-weight: 600;
    font-size: 16px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.image-item:hover .image-caption {
    transform: translateY(0);
}

/* LIGHTBOX */
.lightbox-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 999999;
    justify-content: center;
    align-items: center;
}

.lightbox-overlay.active {
    display: flex;
}

.lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

.lightbox-content img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
}

.lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    font-size: 30px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.lightbox-close:hover {
    background: rgba(255,255,255,0.3);
    transform: rotate(90deg);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .showcase-title h2 {
        font-size: 36px;
    }
    
    .showcase-tab {
        padding: 12px 30px;
        font-size: 16px;
    }
    
    .image-grid {
        gap: 15px;
    }
    
    .image-caption {
        font-size: 14px;
        padding: 15px;
    }
}

@media (max-width: 768px) {
    .showcase-container {
        padding: 40px 15px;
    }
    
    .showcase-title h2 {
        font-size: 28px;
    }
    
    .showcase-title p {
        font-size: 16px;
        margin-top: 20px;
    }
    
    .showcase-tabs {
        gap: 10px;
        margin-bottom: 30px;
    }
    
    .showcase-tab {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    /* Chuyển grid 2 cột */
    .image-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .image-item.large {
        grid-column: span 2;
        grid-row: span 1;
        aspect-ratio: 16/10;
    }
    
    .image-caption {
        transform: translateY(0);
        padding: 12px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .showcase-container {
        padding: 30px 12px;
    }
    
    .showcase-title h2 {
        font-size: 24px;
    }
    
    .showcase-title p {
        font-size: 14px;
    }
    
    .showcase-tabs {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .showcase-tab {
        text-align: center;
        padding: 12px;
        font-size: 15px;
    }
    
    /* Chuyển grid 1 cột */
    .image-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .image-item.large {
        grid-column: span 1;
        aspect-ratio: 16/9;
    }
    
    .image-item {
        aspect-ratio: 16/9;
    }
    
    .image-caption {
        font-size: 14px;
        padding: 15px;
    }
    
    /* Lightbox */
    .lightbox-close {
        top: -50px;
        right: 0;
        width: 35px;
        height: 35px;
        font-size: 25px;
    }
}




.tt {
    max-width: 1000px;
    width: 90%;
    height: auto;
    margin: 30px auto;
    display: block;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* ===== BẢNG GIÁ ===== */
.price-table-container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Montserrat', sans-serif;
}

.price-table-title {
    text-align: center;
    margin-bottom: 40px;
}

.price-table-title h2 {
    font-size: 42px;
    color: #1B5E20;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.price-table-title .date {
    font-size: 18px;
    color: #4CAF50;
    font-weight: 500;
    background: rgba(76, 175, 80, 0.1);
    display: inline-block;
    padding: 8px 25px;
    border-radius: 50px;
    margin-top: 5px;
}

/* Grid bảng giá */
.price-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

/* Card căn hộ */
.price-card {
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 40, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid rgba(76, 175, 80, 0.1);
    border-radius: 20px;
}

.price-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(76, 175, 80, 0.15);
    border-color: rgba(76, 175, 80, 0.3);
}

/* Ảnh căn hộ */
.card-image {
    height: 240px;
    overflow: hidden;
    position: relative;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    cursor: pointer;
}

.price-card:hover .card-image img {
    transform: scale(1.1);
}

/* Nội dung card */
.card-content {
    padding: 20px;
}

.card-title {
    font-size: 22px;
    font-weight: 700;
    color: #1B5E20;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px dashed rgba(76, 175, 80, 0.3);
    text-transform: uppercase;
}

.card-details {
    margin-bottom: 20px;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    color: #2c3e50;
    font-size: 15px;
}

.detail-item i {
    width: 24px;
    color: #4CAF50;
    font-size: 16px;
}

.detail-item span {
    font-weight: 600;
    color: #1a1a1a;
    margin-right: 5px;
}

.card-price {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(27, 94, 32, 0.05));
    padding: 15px;
    border-radius: 12px;
    margin: 15px 0;
    text-align: center;
}

.card-price .price-label {
    font-size: 13px;
    color: #4CAF50;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.card-price .price-value {
    font-size: 26px;
    font-weight: 700;
    color: #1B5E20;
    line-height: 1.2;
}

.card-price .price-value small {
    font-size: 14px;
    font-weight: 500;
    color: #666;
}

.btn-price {
    width: 100%;
    background: #4CAF50;
    color: white;
    border: none;
    padding: 14px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    letter-spacing: 0.5px;
    text-decoration: none !important;
}

.btn-price:hover {
    background: #1B5E20;
    transform: scale(1.02);
}

.btn-price i {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.btn-price:hover i {
    transform: translateX(5px);
}

/* ===== LIGHTBOX ===== */
.lightbox-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 999999;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.lightbox-overlay.active {
    display: flex;
}

.lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

.lightbox-content img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

.lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    font-size: 30px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.lightbox-close:hover {
    background: rgba(255,255,255,0.3);
    transform: rotate(90deg);
}

.lightbox-prev, .lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 40px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

.lightbox-prev {
    left: -70px;
}

.lightbox-next {
    right: -70px;
}

.lightbox-prev:hover, .lightbox-next:hover {
    background: rgba(255,255,255,0.3);
    transform: translateY(-50%) scale(1.1);
}

/* ===== RESPONSIVE ĐƠN GIẢN - CHUẨN NHẤT ===== */

/* Tablet (769px - 1024px) - 2 cột */
@media (min-width: 769px) and (max-width: 1024px) {
.price-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}

.card-image {
height: 260px;
}

.lightbox-prev, .lightbox-next {
left: 10px;
right: 10px;
}
}

/* Mobile ngang (577px - 768px) - 2 cột */
@media (min-width: 577px) and (max-width: 768px) {
.price-grid {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}

.card-image {
height: 220px;
}

.card-content {
padding: 15px;
}

.card-title {
font-size: 18px;
}

.detail-item {
font-size: 14px;
}

.card-price .price-value {
font-size: 20px;
}

.btn-price {
padding: 12px;
font-size: 14px;
}

.lightbox-prev, .lightbox-next {
left: 10px;
right: 10px;
width: 40px;
height: 40px;
font-size: 30px;
}
}

/* Mobile dọc (dưới 576px) - 1 cột */
@media (max-width: 576px) {
.price-grid {
grid-template-columns: 1fr;
gap: 20px;
}

.card-image {
height: 250px;
}

.card-title {
font-size: 20px;
}

.detail-item {
font-size: 15px;
}

.card-price .price-value {
font-size: 22px;
}

.btn-price {
padding: 14px;
font-size: 15px;
}

.lightbox-prev, .lightbox-next {
left: 5px;
right: 5px;
width: 40px;
height: 40px;
font-size: 30px;
}

.lightbox-close {
top: -35px;
width: 35px;
height: 35px;
font-size: 25px;
}
}

/* Mobile rất nhỏ (dưới 400px) */
@media (max-width: 400px) {
.card-image {
height: 200px;
}

.card-title {
font-size: 18px;
}

.detail-item {
font-size: 14px;
}

.card-price .price-value {
font-size: 20px;
}

.btn-price {
padding: 12px;
font-size: 14px;
}

.lightbox-prev, .lightbox-next {
width: 35px;
height: 35px;
font-size: 25px;
}
}

/* Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.price-card {
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
}

.price-card:nth-child(1) { animation-delay: 0.1s; }
.price-card:nth-child(2) { animation-delay: 0.2s; }
.price-card:nth-child(3) { animation-delay: 0.3s; }
.price-card:nth-child(4) { animation-delay: 0.4s; }