:root {
    --grey: #EBEBEB; 
    --white: #FFFFFF; 
    --yellow: #F6C326;
    --black: #211E1E; 
    --red: #ff0000; /* Only one red value */
    --blue: #2e8b2e; 
    --gray: gray; 
    --orange: #f77f00; /* Only one orange value */
    --gold: gold; 
    --skyblue: skyblue;
    --slategray: slategray; 
    --tomato: Tomato; /* Lowercase for consistency */
    --red-pink : #e63946;
    --purple : #8000ff;
    --pink : #e100ff;
    --main-font : "Koulen",Oswald;
}
body{
    font-family: "Koulen","Oswald",serif;
}
/* -------------------------- Heder_handle -------------------------- */
header .container_header{
    width:100%;
    background-color:var(--red-pink);
    padding-block:8px;
}
header .container_header .icon_logo{
    width:75%;
    margin: auto;
    display: flex;
    justify-content: space-between;
}
header .container_header .icon_logo .Pic img{
    height:90px;
}
.icon_logo img{
    height: 90px;
}
.icon-toggle{
    display: none;
    margin-block: auto;
}
.icon-toggle i{
    font-size: 1.5rem;
    color:white;
    cursor:pointer;
}

/* -------------------------- Container_body and Navbar -------------------------- */
.navbar{
    width:100%;
    background-color: #fa1939;
    box-shadow: 0px 8px 10px var(--black);
    z-index: 5;
}
.navbar ul{
    width:75%;
    margin: 0 auto;
    display: flex;
    list-style-type:none;
    overflow: hidden;
    padding:0;
}
.navbar ul li{
    padding: 5px 10px;
}
.navbar ul li a{
    text-decoration: none;
    color:var(--white);
    font-family: var(--main-font);
    font-size: 14pt;
    color: rgb(208, 208, 208);
}
.navbar ul li a:hover{
    color: #FFFFFF;
}

/* container_body */
/* box-shadow: 10px 10px 20px var(--black) inset,-10px -10px 20px var(--black) inset, 10px 0px 15px #fa1939,-10px 0px 15px #fa1939; */
section .container_body{ 
    width:75%;
    margin: 0 auto;
}
section .section_gird_one {
    font-family: var(--main-font);
    font-size: 0.rem; /* Scalable font size */
    width: 100%;
    height: auto; /* Allows flexibility */
    margin-top: 15px;
    display: grid;
    grid-template-columns: 1.3fr 1.1fr 1fr;
    /* Space between grid items */
}

section .section_gird_one .first_box{
    position: relative;
}
.section_gird_one .box_item_2{
    height: 250px;
    width:100%;
}
.box_item_2 b{
    position: absolute;
    top:0;
    background-color:var(--pink);
    padding:6px;
    z-index: 4;
    color: white;
    border-radius: 0px 0px 5px 0px;
    overflow: hidden;
    font-family: 'Khmer OS Battambang';
    font-size: 10pt;
}
.section_gird_one .box_item_2 img{
    width:100%;
    height:250px;
}
.section_gird_one .box_item{
    height: 250px;
    width:100%;
}
.box_item b{
    font-size: 10pt;
    position: absolute;
    top:0;
    padding:6px;
    font-family: 'Khmer OS Battambang';
    background-color:var(--purple);
    z-index: 4;
    color: #ffffff;
    border-radius: 0px 0px 5px 0px;
}
.box_item a{
    color: #211E1E;
}
.box_item_2 a{
    color: #211E1E;
}
.section_gird_one .box_item img{
    width:100%;
    height:250px;
}
.section_gird_one .box_item_1 img{
    width:100%;
    height:250px;
}
.section_gird_one .box_item_1{
    background-color: #ff7700;
    height:250px;
    width:100%;
}
/* Note text_box on .box_item .box_item_2 */
.text_box{
    position: absolute;
    z-index: 3;
    bottom: 0;
    font-family: var(--main-font);
    width:100%;
    height:35px;
    padding:10px 10px 0px 30px;
    color: var(--white);
    backdrop-filter: blur(10px) ;
    background-color: rgba(31, 31, 31, 0.3);
    overflow: hidden;
}
/* Shadow_image */
.shadow_image{
    width:100%;
    height:250px;
    position: absolute;
    top:0;
    background-color: var(--black);
    opacity: 0.5;
    z-index: 1;
}
.text_show{
    width:100%;
    height:250px;
    position: absolute;
    top:0;
    z-index: 2;
    transition: all 0.8s;
    overflow: hidden;
}
.text_show:hover{
    transition: all 01s;
    cursor: pointer;
    overflow: hidden;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1),rgba(0,0,0));
}
.title_txt_box{
    position: absolute;
    top:30%;
    z-index: 2;
    font-family: "Oswald", serif;
    height:250px;
    padding-left: 30px;
    padding-right: 20px;
    transition: all 0.8s;
    width:100%;
    padding-top: 110px;
}
.title_txt_box:hover{
    top:10%;
    transition: all 0.7s;
}
.title_txt_box h4{
    font-size: 15pt;
    color:#ebebeb9d;
}
.text_show .title_txt_box h5{
    color: white;
    font-size: 15px;
}

.icon-sign i{
    padding-inline: 9px;
    transition: all 0.5s;
}
.icon-sign i:hover{
    padding-left: 20px;
    transition: all 0.5s;
}

.section_contant_video .box_video{
    width:100%;
    border-top: 5px solid var(--rad-two);
    box-shadow: 5px 5px 7px var(--black),10px 10px 15px var(--rad-two) inset,-10px -10px 15px var(--rad-two) inset;
    font-family: var(--main-font);
    overflow: hidden;
    border-radius: 0px 0px 20px 0px;
}
.box_video_conatiner span i:hover{
    color: #ff7700;
    position: absolute;
    right:1%;
    transition: all 0.7s;
}
.box_video_conatiner span i{
    position: absolute;
    right:1.5%;
    top : 50%;
    font-size: 25pt;
    animation-name: icon_right;
    transition: all 1s;
}

.box_item_one {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Default: 3 columns */
    column-gap: 8px;
    row-gap: 8px; /* Added row gap for better spacing */
}


.box_item_one .title-item{
    font-size: 10pt;
    padding-top: 10px;
}
.title-item a{
    color:var(--black);
    text-decoration: none;
}
.box_item_one .pic_item_1{overflow: hidden;padding-bottom:10px;}
.box_item_one .pic_item_1 img{
    width:100%;
    height:180px;
    transform: scale(1,1);
    transition: all 1s;
    filter: drop-shadow(5px 3px 8px  var(--rad-two));
}
.box_item_one .pic_item_1 img:hover{
    transform: scale(1.1,1.1);
    transition: all 0.4s;
}
.box_item_two {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 1.5fr; /* Default: 4 equal columns + 1 larger */
    column-gap: 15px;
    row-gap: 15px; /* Added row gap for better spacing */
}

.box_item_two .pic-item_2{
    overflow: hidden;
}
.box_item_two .pic-item_2 img{
    width:100%;
    height: 120px;
    transform: scale(1,1);
    transition: all 1s;
    filter: drop-shadow(5px 3px 8px  var(--rad-two));
    border-bottom: 1px solid var(--black);
}
.box_item_two .pic-item_2 img:hover{
    transform: scale(1.1,1.1);
    transition: all 0.5s;
}
.title-item-2{
    padding-top: 5px;
}
.title-item-2 a{
    color: var(--black);
    text-decoration: none;
    font-size: 10pt;
}
.title-item-2 a:hover{
    text-decoration:underline;
}
.box_item_two .pic-item_3{
    filter: drop-shadow(5px 3px 8px  var(--yellow));
}
.box_item_two .pic-item_3 img{
    width:100%;
    height: 90px;
}
/* section_contant_video_2--------------------------------------- */
.box_video_2{
    border-top: 5px solid orange;
    width:100%;
}
.box_video_2 .box_video_conatiner{
    box-shadow: 5px 5px 7px var(--black),10px 10px 15px orange inset,-10px -10px 15px orange inset;
}
.box-item_three {
    display: grid;
    grid-template-columns: 2fr repeat(4, 1fr); /* Default: Wide first column, 4 equal columns */
    font-family:var(--main-font);
    grid-gap: 15px;
}

/* Grid item spanning two rows */
.box-item_three .play-item_2 {
    height: 380px;
    width: 100%;
    grid-row: 1 / span 2; /* Spans 2 rows */
}

/* Tablet: Reduce to 3 columns */
@media (max-width: 1024px) {
    .box-item_three {
        grid-template-columns: 2fr repeat(2, 1fr);
    }
}

/* Mobile: Switch to 2 columns */
@media (max-width: 768px) {
    .box-item_three {
        grid-template-columns: 1fr 1fr;
    }

    .box-item_three .play-item_2 {
        grid-row: auto; /* Remove spanning for better stacking */
        height: auto;
    }
}

/* Small Mobile: Single column */
@media (max-width: 480px) {
    .box-item_three {
        grid-template-columns: 1fr;
    }
}

.play-item_2 .image-infor {
    overflow: hidden;
    border-top: 5px solid var(--black);
}
.play-item_2 .image-infor  img{
    width:100%;
    height:220px;
    transition: all 0.6s linear;
    transform:scale(1.1,1.1);
}
.play-item_2 .image-infor  img:hover{
    transform:scale(1,1);
    transition: all 0.5s linear;
}
.play-item_2 .text-infor{
    border-top: 5px solid var(--black);
    padding: 10px 10px 5px 15px;
    background-color: #f77f00;
    border-bottom: 5px solid var(--Tomato);
    overflow-y: scroll;
    width:100%;
    height:160px;
    color: var(--white);
    font-size: 11pt;
}
.play-item_2 .text-infor::-webkit-scrollbar{
    width: 10px;
}
.play-item_2 .text-infor::-webkit-scrollbar-track{
    background: #f77f00; 
}
.play-item_2 .text-infor::-webkit-scrollbar-thumb{
    background: rgb(255, 179, 86);
    border-radius: 5px;
}
.play-item_2 .text-infor::-webkit-scrollbar-thumb:hover{
    background-color: var(--gold);
}
.play-item_1{
    width:100%;
    height:190px;
    font-size: 10pt;
    overflow: hidden;
}
.play-item_1 img{
    width:100%;
    height:120px;
    transform: scale(1,1);
    transition: all 0.5s linear;
    border-bottom: 1px solid var(--black);
    filter: drop-shadow(0px 4px 10px  orange);
}
.play-item_1 img:hover{
    transform: scale(1.1,1.1);
    transition: all 0.3s linear;
}
.text-National{
    padding-top: 10px;
}
.text-National a{
    color:var(--black);
    text-decoration: none;
}
.text-National a:hover{
    text-decoration: underline;
}