/* ====================================================== */
/* ============= GLOBAL STYLES & RESETS ============= */
/* ====================================================== */
:root {
/* Thiết lập màu sắc và font chữ cơ bản */
--text-color: #000000;
--primary-color: #0075c1;
--accent-color: #ff5555;
--link-color: #2323ff;
--bg-main: #ffffff;
--font-main: "M PLUS Rounded 1c", sans-serif;
}

.tamahiyo-img[alt] {
  font-size: 1vw !important;
}

.tamahiyo-html, .tamahiyo-body {
margin: 0;
padding: 0;
font-family: var(--font-main);
color: var(--text-color);
background-color: var(--bg-main);
text-align: center;
-webkit-font-smoothing: antialiased;
overflow-wrap: break-word;

}

/* 2. Quy tắc cho các ảnh CẦN kéo giãn full-width và xuống dòng (Image02, Image03) */
/* Cập nhật selector này để nhắm đúng mục tiêu */
.scroll-link.full-width {
    display: block; /* Ép thẻ <a> chiếm toàn bộ chiều rộng và xuống dòng */
    width: 100%;
}
/* Ép ảnh bên trong liên kết full-width chiếm 100% của liên kết */
.scroll-link.full-width img {
    width: 100%;
    height: auto;
    display: block;
}

/* 3. Quy tắc cho các ảnh CẦN hiển thị cùng hàng (Image04, Image05) */
/* KHÔNG áp dụng display: block; cho .scroll-link.inline-item */
/* Quy tắc này chỉ đảm bảo ảnh bên trong thẻ <a> được căn chỉnh đúng */
.scroll-link.inline-item img {
    /* Giữ nguyên định dạng ban đầu của Image04 và Image05 */
    display: block; /* Có thể cần để ảnh bên trong <a> không có khoảng trắng */
    /* Chiều rộng của ảnh sẽ do container cha (.pc-only.image-container) quyết định */
}
/* Áp dụng background cho toàn bộ trang */
.tamahiyo-body {
background-repeat: no-repeat;
background-position: center top;
background-attachment: scroll;
}

.tamahiyo-img {
border: 0;
line-height: 0;
height: auto;
}

.tamahiyo-a {
color: var(--link-color);
text-decoration: none;
}
.tamahiyo-a:hover {
text-decoration: underline;
}

.text-red {
color: var(--accent-color);
}
/* ====================================================== */
/* ============= PC STYLES (pc-only) ============= */
/* ====================================================== */

.tamahiyo-body {
  background-image: url('https://st.benesse.ne.jp/lp/money/images/BG.png');
  background-size: 100% 100%;
  background-attachment: scroll;
}
.pc-only {
display: block;
}

.pc-only .content-wrapper {
width: 90%;
max-width: 1200px;
padding-bottom: clamp(30px, 5vw, 60px);
margin: 1vw auto;
height: auto;
min-height: 100vh;
overflow: hidden;
}

.pc-only .main-content {
width: 100%;
text-align: flex;
margin: clamp(25px, 3vw, 55px) auto;
font-size: 10px;
max-width: 600px;


}
.pc-only .main-top {
width: 100%;
text-align: center;
margin: 0 auto;
font-size: 10px;
max-width: 100%; 
margin-bottom: 20px;


}
.pc-only .main-frame {
width: 100%;
text-align: flex;
margin: clamp(25px, 3vw, 55px) auto;
font-size: 10px;
max-width: 700px;

}

/* --- BANNER PC --- */

/* --- TEXT & HEADINGS PC --- */
.pc-only .text-block {
width: 70%;
line-height: 1.7;
font-size: 18px;
max-width: 600px;
text-align: center;
display: block;
margin-top: 50px;
margin-bottom:20px;
}

/* --- IMAGES PC --- */
.pc-only .content-image {
    margin-top: 20px;
    margin-bottom: 20px;
    max-width: 100%; 
    width: 100%; 
    height: auto; 
}

.pc-only .content-image.top {
    margin-top: 4vh;
    margin-bottom: 4vh;
    max-width: 600px;
    width: 100%; 
    height: auto; 
}

.pc-only .content-image.wide {
  margin-top: 4vh;
  margin-bottom: 4vh;
  max-width: 600px;
  width: 100%; 
  height: auto; 

}
.pc-only .content-image.chart {
    margin-top: 20px;
    margin-bottom: 20px;
    max-width: 600px; 
    width: 100%; 
    height: auto; 
}

/* Trong phần /* ============= PC STYLES (pc-only) ============= */ */
.pc-only.image-container {
    display: flex !important;
    justify-content: center; 
    gap: 1px;
    width: 100%; 
    height: auto; 
    align-items: center; 
    max-width: 600px; 
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Thiết lập cho các ảnh bên trong container PC-ONLY */
.pc-only.image-container img {
    width: 100%; 
    height: auto; 
    max-width: 291px; 
    flex: auto auto auto; 
    margin-top: 1px;
    margin-bottom: 15px;

    }

#image01, #image08, #image11
{
  max-width: 500px;      
  height: auto;        
  display: block;       
  margin: 30px auto 5px auto;     
  transform-origin: top center; 
}

#image12, #image18, #image19, #image24, #image25, #image38, #image44, #image45, #image50, #image51, #image56, #image57, #image63, #image64, #image65, #image66, #image67, #image68, #image69  
{
  width: 100%;          
  max-width: 500px;       
  height: auto;        
  display: block;        
  margin: 10px auto;     
  transform-origin: top center; 
  margin-top: 20px;
  margin-bottom: 50px;
}

#FV
{
  width: 200%;           /* giữ tỉ lệ gốc */
  max-width: 800px;       /* không giới hạn theo container */
  height: auto;          /* giữ tỉ lệ gốc */
  display: block;        /* để margin auto có hiệu lực */
  margin: 0 auto;     /* trên/dưới 10px, tự động căn giữa ngang */
  transform-origin: top center; /* phóng to từ giữa trên */
  margin-bottom: 50px;
}
/* --- FRAME CONTAINER PC --- */
.pc-only .frame-container {
        display: center; /* Hiển thị lại cho PC */
        width: 700px;
        height: 550px;
        /* Áp dụng ảnh nền */
        background-image: url('https://st.benesse.ne.jp/lp/money/images/frame01.png');
        background-size: contain; /* Hoặc 'contain' tùy thuộc vào cách bạn muốn hình ảnh người phụ nữ hiển thị */
        background-repeat: no-repeat;
        /* Điều chỉnh vị trí để người phụ nữ ở bên phải */
        background-position:  center; 
        position: relative;
        margin-top: -110px;
        margin-bottom: -70px;
}
    .pc-only .buttons-wrapper {
        display: flex;
        flex-direction: column;
        gap: 20px; /* Khoảng cách dọc giữa các hàng */
        width: 100%; /* Chiếm phần lớn không gian Overlay */
        max-width:1000px; /* Giới hạn chiều rộng tổng thể */
        
    }

    .pc-only .buttons-overlay {
        position: absolute;
        top: 30%;
        left: 5%;
        /* Kích thước chiếm phần lớn khu vực trống (khoảng 60-70% chiều rộng) */
        max-width: 400px; 
        height: auto;
        display: flex;
        align-items: center; /* Căn giữa dọc các nút */
        justify-content: flex-start; 


    }
      /* Định kiểu chung cho các hàng */
    .pc-only .button-row {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 10px; /* Khoảng cách ngang giữa các nút */
        justify-content: flex-start; /* Giãn cách các nút ra xa nhau */
    }

    /* Kích thước quan trọng cho Hàng 2 Nút và 3 Nút (Không cần can thiệp) */
    .pc-only .button-row.row-2,
    .pc-only .button-row.row-3 {
        /* Loại bỏ margin auto đã bị vô hiệu hóa */
        margin: 0; 
    }

    /* Định kiểu cho từng nút */
    .pc-only .button-item {
        /* Cho phép nút tự điều chỉnh kích thước theo ảnh */
        flex-shrink: 0; 
        flex-grow: 0; 
        cursor: pointer;
        width: auto;
        height: auto;
    }

    /* Hình ảnh nút thực tế */
    .pc-only .button-item img {
        width: 100%;
        height: auto;
        /* Thay đổi độ trong suốt khi di chuột để có hiệu ứng tương tác */
        transition: opacity 0.2s; 
        object-fit: initial; 

    }

    .pc-only .button-item:hover img {
        opacity: 0.8;
    }
    /* * TẠO HIỆU ỨNG BỐ CỤC 2-2-2-3-3: 
     * Chèn các ô trống (dummy) vào HTML, sau đó ẩn chúng bằng CSS.
     */
    .pc-only .dummy-item {
        visibility: hidden; /* Ẩn ô này nhưng vẫn giữ không gian */
    }

    /* *hiệu ứng đóng mở */
    .pc-only .content-image, .pc-only .toggle-button-img {
        max-width: 100%;
        height: auto;
        display: block;
    }
    
    /* 1. Ẩn checkbox thật sự */
    .pc-only .hidden-checkbox {
        position: absolute;
        opacity: 0;
        pointer-events: none; /* Đảm bảo không tương tác được */
    }

    /* 2. Mặc định: Ẩn 3 ảnh (15, 16, 17) và ảnh 64 */
    #hidden-group  {
        display: none;
    }
    
    /* Cấu hình các nút (Label) */
    .pc-only .toggle-label {
        cursor: pointer;
        margin-top: 15px;
    }

    /* 3. TRẠNG THÁI KHI CHECKBOX ĐƯỢC CHỌN (image18 đã được click) */
    /* Khi checkbox #toggle-content được checked: */

    /* 3a. Ẩn ảnh 18 (.toggle-show) */
    #toggle-content:checked ~ .toggle-show {
        display: none;
    }

    /* 3b. Hiện 3 ảnh (15, 16, 17) */
    #toggle-content:checked ~ #hidden-group {
        display: block;
    }

    /* 3c. Hiện ảnh 64 (.toggle-hide) */
    #toggle-content:checked ~  .toggle-hide {
        display: block;
    }

    /* *hiệu ứng đóng mở 2*/
    #hidden-group-2  {
        display: none;
    }
    
    /* Cấu hình các nút (Label) */
    .pc-only .toggle-label-2 {
        cursor: pointer;
        margin-top: 15px;
    }

    /* 3. TRẠNG THÁI KHI CHECKBOX ĐƯỢC CHỌN (image18 đã được click) */
    /* Khi checkbox #toggle-content được checked: */

    /* 3a. Ẩn ảnh 18 (.toggle-show) */
    #toggle-content-2:checked ~ .toggle-show-2 {
        display: none;
    }

    /* 3b. Hiện 3 ảnh (15, 16, 17) */
    #toggle-content-2:checked ~ #hidden-group-2 {
        display: block;
    }

    /* 3c. Hiện ảnh 64 (.toggle-hide) */
    #toggle-content-2:checked ~  .toggle-hide-2 {
        display: block;
    }


    /* *hiệu ứng đóng mở 3*/
    #hidden-group-3  {
        display: none;
    }
    
    /* Cấu hình các nút (Label) */
    .pc-only .toggle-label-3 {
        cursor: pointer;
        margin-top: 15px;
    }

    /* 3. TRẠNG THÁI KHI CHECKBOX ĐƯỢC CHỌN (image18 đã được click) */
    /* Khi checkbox #toggle-content được checked: */

    /* 3a. Ẩn ảnh 18 (.toggle-show) */
    #toggle-content-3:checked ~ .toggle-show-3 {
        display: none;
    }

    /* 3b. Hiện 3 ảnh (15, 16, 17) */
    #toggle-content-3:checked ~ #hidden-group-3 {
        display: block;
    }

    /* 3c. Hiện ảnh 64 (.toggle-hide) */
    #toggle-content-3:checked ~  .toggle-hide-3 {
        display: block;
    }

        /* *hiệu ứng đóng mở 4*/
    #hidden-group-4  {
        display: none;
    }
    
    /* Cấu hình các nút (Label) */
    .pc-only .toggle-label-4 {
        cursor: pointer;
        margin-top: 15px;
    }

    /* 3. TRẠNG THÁI KHI CHECKBOX ĐƯỢC CHỌN (image18 đã được click) */
    /* Khi checkbox #toggle-content được checked: */

    /* 3a. Ẩn ảnh 18 (.toggle-show) */
    #toggle-content-4:checked ~ .toggle-show-4 {
        display: none;
    }

    /* 3b. Hiện 3 ảnh (15, 16, 17) */
    #toggle-content-4:checked ~ #hidden-group-4 {
        display: block;
    }

    /* 3c. Hiện ảnh 64 (.toggle-hide) */
    #toggle-content-4:checked ~  .toggle-hide-4 {
        display: block;
    }

            /* *hiệu ứng đóng mở 5*/
    #hidden-group-5  {
        display: none;
    }
    
    /* Cấu hình các nút (Label) */
    .pc-only .toggle-label-5 {
        cursor: pointer;
        margin-top: 15px;
    }

    /* 3. TRẠNG THÁI KHI CHECKBOX ĐƯỢC CHỌN (image18 đã được click) */
    /* Khi checkbox #toggle-content được checked: */

    /* 3a. Ẩn ảnh 18 (.toggle-show) */
    #toggle-content-5:checked ~ .toggle-show-5 {
        display: none;
    }

    /* 3b. Hiện 3 ảnh (15, 16, 17) */
    #toggle-content-5:checked ~ #hidden-group-5 {
        display: block;
    }

    /* 3c. Hiện ảnh 68 (.toggle-hide) */
    #toggle-content-5:checked ~  .toggle-hide-5 {
        display: block;
    }

            /* *hiệu ứng đóng mở 6*/
    #hidden-group-6  {
        display: none;
    }
    
    /* Cấu hình các nút (Label) */
    .pc-only .toggle-label-6 {
        cursor: pointer;
        margin-top: 15px;
    }

    /* 3. TRẠNG THÁI KHI CHECKBOX ĐƯỢC CHỌN (image18 đã được click) */
    /* Khi checkbox #toggle-content được checked: */

    /* 3a. Ẩn ảnh 18 (.toggle-show) */
    #toggle-content-6:checked ~ .toggle-show-6 {
        display: none;
    }

    /* 3b. Hiện 3 ảnh (15, 16, 17) */
    #toggle-content-6:checked ~ #hidden-group-6 {
        display: block;
    }

    /* 3c. Hiện ảnh 68 (.toggle-hide) */
    #toggle-content-6:checked ~  .toggle-hide-6 {
        display: block;
    }

/* ====================================================== */
/* ============= MOBILE STYLES (sp-only) ============= */
/* ====================================================== */
.sp-only {
display: none;
}

@media screen and (max-width: 768px) {
.pc-only { display: none; }
.sp-only { 
    display: block; 
    height: auto;}

.sp-only .scroll-link.full-width {
    display: block; /* Ép thẻ <a> chiếm toàn bộ chiều rộng và xuống dòng */
    width: 100%;
}
.sp-only .scroll-link.full-width img {
    width: 100%;
    height: auto;
    display: block;
}

.sp-only .scroll-link.inline-item img {
    display: block; 
}


.tamahiyo-body {
  background-image: url('https://st.benesse.ne.jp/lp/money/images/sp/BG.png');
  background-size: 100% 100%;
  background-attachment: scroll;
}
.sp-only {
display: block;
}


.sp-only .main-content {
width: 90%;
text-align: flex;
margin: clamp(1px, 1vw, 2px) auto;
font-size: clamp(12px, 1vw, 18px);
max-width: 70vw;


}
.sp-only .main-top {
width: 100%;
text-align: center;
margin: 0 auto;
font-size: 10px;
max-width: 100%; /* Đảm bảo nó chiếm 100% của sp-only */
margin-top: 0px;
margin-bottom: 20px;


}
.sp-only .main-frame {
width: 100%;
text-align: flex;
margin: clamp(15px, 3vw, 25px) auto;
max-width: 200vw;

}

/* --- BANNER SP --- */

/* --- TEXT & HEADINGS SP --- */
.sp-only .text-block {
width: 100%;
line-height: 1.7;
font-size: clamp(6px, 2vw, 20px);
max-width: 1000px;
text-align: center;
display: block;
margin-top: 20px;
margin-bottom:20px;
}

/* --- IMAGES SP --- */

.sp-only .content-image.chart {
    margin: 4vw auto 4vw auto;
    max-width: min(90.3333333333vw, 900px);
    width: 100%; 
    height: auto; 

}

/* Trong phần /* ============= SP STYLES (sp-only) ============= */ 

.sp-only.image-container {
    display: flex;
    justify-content: center; 
    gap: 0vw;
    width: 100%; 
    height: auto; 
    align-items: center; 
    margin: clamp(1px, 1vw, 3px) auto clamp(1px, 1vw, 3px) auto;
    max-width: min(91.3333333333vw, 800px);

}

/* Thiết lập cho các ảnh bên trong container sp-only */
.sp-only.image-container img {
    /* Đặt kích thước ảnh */
    width: 100%;
    height: auto; 
    max-width: min(43.9vw, 440px);
    /* Ngăn ảnh co lại hoặc giãn ra khỏi kích thước đã đặt */
    flex: 1 1 auto; 
    margin: 0 auto 3vw auto;

    }
    

#image01sp
{
  max-width: min(50vw, 1000px);   /* không giới hạn theo container */
  height: auto;          /* giữ tỉ lệ gốc */
  display: block;        /* để margin auto có hiệu lực */
  margin: 35px auto 1px auto;     /* trên/dưới 10px, tự động căn giữa ngang */
}
#image08sp
{
  max-width: min(68vw, 1000px);   /* không giới hạn theo container */
  height: auto;          /* giữ tỉ lệ gốc */
  display: block;        /* để margin auto có hiệu lực */
  margin: 35px auto 1px auto;     /* trên/dưới 10px, tự động căn giữa ngang */
}
#image11sp
{
  max-width: min(50vw, 1000px);   /* không giới hạn theo container */
  height: auto;          /* giữ tỉ lệ gốc */
  display: block;        /* để margin auto có hiệu lực */
  margin: 35px auto 1px auto;     /* trên/dưới 10px, tự động căn giữa ngang */
}
#image12sp, #image18sp, #image19sp, #image24sp, #image25sp, #image38sp, #image44sp, #image45sp, #image50sp, #image51sp, #image56sp, #image57sp, #image63sp, #image64sp, #image65sp, #image66sp, #image67sp, #image68sp, #image69sp  
{
  width: 100%;           /* giữ tỉ lệ gốc */
  max-width: min(60vw, 1000px);   /* không giới hạn theo container */
  height: auto;          /* giữ tỉ lệ gốc */
  display: block;        /* để margin auto có hiệu lực */
  transform-origin: top center; /* phóng to từ giữa trên */
  margin: 5px auto 1px auto;     /* trên/dưới 10px, tự động căn giữa ngang */
}

#FV
{
  width: 100%;           /* giữ tỉ lệ gốc */
  max-width: 70vw;       /* không giới hạn theo container */
  height: auto;          /* giữ tỉ lệ gốc */
  display: block;        /* để margin auto có hiệu lực */
  margin: 10px auto;     /* trên/dưới 10px, tự động căn giữa ngang */
  transform-origin: top center; /* phóng to từ giữa trên */
  margin-top: 20px;
  margin-bottom: 50px;
}
/* --- FRAME CONTAINER SP --- */
.sp-only .frame-container {
        /* Áp dụng ảnh nền */
        background-image: url('https://st.benesse.ne.jp/lp/money/images/sp/frame01.png');
        background-size: contain; /* Hoặc 'contain' tùy thuộc vào cách bạn muốn hình ảnh người phụ nữ hiển thị */
        background-repeat: no-repeat;
        background-position:  center; 
        position: relative;
        display: block;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 7vw;
        margin-bottom: 15vw ;
        padding: 2vw; 
        width: 100%;
        max-width: 90vw;
        height: 55vw;

}
    .sp-only .buttons-wrapper {
        display: flex;
        flex-direction: column;
        gap: clamp(1px, 2vw, 35px) ;
        width: 90%; /* Chiếm phần lớn không gian Overlay */
        max-width:100%; /* Giới hạn chiều rộng tổng thể */

    }

    .sp-only .buttons-overlay {
        position: absolute;
        top: 10%;
        left: 5%;
        /* Kích thước chiếm phần lớn khu vực trống (khoảng 60-70% chiều rộng) */
        max-width: 40vw; 
        height: auto;
        display: flex;
        align-items: flex-start; /* Căn giữa dọc các nút */
        justify-content: flex-start; 

    }
      /* Định kiểu chung cho các hàng */
    .sp-only .button-row {
        display: flex;
        align-items: center;
        width: 1    0%;
        gap: 1.5vw; /* Khoảng cách ngang giữa các nút */
        justify-content: flex-start; /* Giãn cách các nút ra xa nhau */
    }

    /* Kích thước quan trọng cho Hàng 2 Nút và 3 Nút (Không cần can thiệp) */
    .sp-only .button-row.row-2,
    .sp-only .button-row.row-3 {
        /* Loại bỏ margin auto đã bị vô hiệu hóa */
        margin: 0; 
    }

    /* Định kiểu cho từng nút */
    .sp-only .button-item {
        /* Cho phép nút tự điều chỉnh kích thước theo ảnh */
        flex-basis: auto; /* Thay thế cho calc(50% - ...) */
        flex-shrink: 0; 
        flex-grow: 0; 
        cursor: pointer;
        width: auto;
        height: auto;
    }

    /* Hình ảnh nút thực tế */
    .sp-only .button-item img {
        max-width: calc(32vw * var(--scale)); /* 36vw là width cơ sở của image26 */
        width: 100%;
        height: auto;
        display: initial; 
        margin: 0;
        /* Thay đổi độ trong suốt khi di chuột để có hiệu ứng tương tác */
        transition: opacity 0.2s; 
        object-fit:cover ; 
    
        

    }

    .sp-only .button-item:hover img {
        opacity: 0.8;
    }
    
    /* * TẠO HIỆU ỨNG BỐ CỤC 2-2-2-3-3: 
     * Chèn các ô trống (dummy) vào HTML, sau đó ẩn chúng bằng CSS.
     */
    .sp-only .dummy-item {
        visibility: hidden; /* Ẩn ô này nhưng vẫn giữ không gian */
    }

    /* *hiệu ứng đóng mở */
    .sp-only .content-image, .sp-only .toggle-button-img {
        max-width: 100%;
        height: auto;
        display: block;
    }
    
    /* 1. Ẩn checkbox thật sự */
    .sp-only .hidden-checkbox {
        position: absolute;
        opacity: 0;
        pointer-events: none; /* Đảm bảo không tương tác được */
    }

    /* 2. Mặc định: Ẩn 3 ảnh (15, 16, 17) và ảnh 64 */
    #sp-hidden-group  {
        display: none;
    }
    
    /* Cấu hình các nút (Label) */
    .sp-only .toggle-label {
        cursor: pointer;
        margin-top: 5vw;
    }

    /* 3. TRẠNG THÁI KHI CHECKBOX ĐƯỢC CHỌN (image18 đã được click) */
    /* Khi checkbox #toggle-content được checked: */

    /* 3a. Ẩn ảnh 18 (.toggle-show) */
    #sp-toggle-content:checked ~ .sp-toggle-show {
        display: none;
    }

    /* 3b. Hiện 3 ảnh (15, 16, 17) */
    #sp-toggle-content:checked ~ #sp-hidden-group {
        display: block;
    }

    /* 3c. Hiện ảnh 64 (.toggle-hide) */
    #sp-toggle-content:checked ~  .sp-toggle-hide {
        display: block;
    }

    /* *hiệu ứng đóng mở 2*/
    #sp-hidden-group-2  {
        display: none;
    }
    
    /* Cấu hình các nút (Label) */
    .sp-only .toggle-label-2 {
        cursor: pointer;
        margin-top: 5vw;
    }

    /* 3. TRẠNG THÁI KHI CHECKBOX ĐƯỢC CHỌN (image18 đã được click) */
    /* Khi checkbox #toggle-content được checked: */

    /* 3a. Ẩn ảnh 18 (.toggle-show) */
    #sp-toggle-content-2:checked ~ .sp-toggle-show-2 {
        display: none;
    }

    /* 3b. Hiện 3 ảnh (15, 16, 17) */
    #sp-toggle-content-2:checked ~ #sp-hidden-group-2 {
        display: block;
    }

    /* 3c. Hiện ảnh 64 (.toggle-hide) */
    #sp-toggle-content-2:checked ~  .sp-toggle-hide-2 {
        display: block;
    }


    /* *hiệu ứng đóng mở 3*/
    #sp-hidden-group-3  {
        display: none;
    }
    
    /* Cấu hình các nút (Label) */
    .sp-only .toggle-label-3 {
        cursor: pointer;
        margin-top: 5vw;
    }

    /* 3. TRẠNG THÁI KHI CHECKBOX ĐƯỢC CHỌN (image18 đã được click) */
    /* Khi checkbox #toggle-content được checked: */

    /* 3a. Ẩn ảnh 18 (.toggle-show) */
    #sp-toggle-content-3:checked ~ .sp-toggle-show-3 {
        display: none;
    }

    /* 3b. Hiện 3 ảnh (15, 16, 17) */
    #sp-toggle-content-3:checked ~ #sp-hidden-group-3 {
        display: block;
    }

    /* 3c. Hiện ảnh 64 (.toggle-hide) */
    #sp-toggle-content-3:checked ~  .sp-toggle-hide-3 {
        display: block;
    }

        /* *hiệu ứng đóng mở 4*/
    #sp-hidden-group-4  {
        display: none;
    }
    
    /* Cấu hình các nút (Label) */
    .sp-only .toggle-label-4 {
        cursor: pointer;
        margin-top: 5vw;
    }

    /* 3. TRẠNG THÁI KHI CHECKBOX ĐƯỢC CHỌN (image18 đã được click) */
    /* Khi checkbox #toggle-content được checked: */

    /* 3a. Ẩn ảnh 18 (.toggle-show) */
    #sp-toggle-content-4:checked ~ .sp-toggle-show-4 {
        display: none;
    }

    /* 3b. Hiện 3 ảnh (15, 16, 17) */
    #sp-toggle-content-4:checked ~ #sp-hidden-group-4 {
        display: block;
    }

    /* 3c. Hiện ảnh 64 (.toggle-hide) */
    #sp-toggle-content-4:checked ~  .sp-toggle-hide-4 {
        display: block;
    }

            /* *hiệu ứng đóng mở 5*/
    #sp-hidden-group-5  {
        display: none;
    }
    
    /* Cấu hình các nút (Label) */
    .sp-only .toggle-label-5 {
        cursor: pointer;
        margin-top: 5vw;
    }

    /* 3. TRẠNG THÁI KHI CHECKBOX ĐƯỢC CHỌN (image18 đã được click) */
    /* Khi checkbox #toggle-content được checked: */

    /* 3a. Ẩn ảnh 18 (.toggle-show) */
    #sp-toggle-content-5:checked ~ .sp-toggle-show-5 {
        display: none;
    }

    /* 3b. Hiện 3 ảnh (15, 16, 17) */
    #sp-toggle-content-5:checked ~ #sp-hidden-group-5 {
        display: block;
    }

    /* 3c. Hiện ảnh 68 (.toggle-hide) */
    #sp-toggle-content-5:checked ~  .sp-toggle-hide-5 {
        display: block;
    }

            /* *hiệu ứng đóng mở 6*/
    #sp-hidden-group-6  {
        display: none;
    }
    
    /* Cấu hình các nút (Label) */
    .sp-only .toggle-label-6 {
        cursor: pointer;
        margin-top: 5vw;
    }

    /* 3. TRẠNG THÁI KHI CHECKBOX ĐƯỢC CHỌN (image18 đã được click) */
    /* Khi checkbox #toggle-content được checked: */

    /* 3a. Ẩn ảnh 18 (.toggle-show) */
    #sp-toggle-content-6:checked ~ .sp-toggle-show-6 {
        display: none;
    }

    /* 3b. Hiện 3 ảnh (15, 16, 17) */
    #sp-toggle-content-6:checked ~ #sp-hidden-group-6 {
        display: block;
    }

    /* 3c. Hiện ảnh 68 (.toggle-hide) */
    #sp-toggle-content-6:checked ~  .sp-toggle-hide-6 {
        display: block;
    }
}