@media only screen and (max-width: 1200px) {
    :root{
        --mg-t-pc: 6em;
      }
    header, section, .row_pf, main{
        /* margin-top: var(--mg-t-pc); */
        margin-left: 1em;
        margin-right: 1em;
    }
    .section_head .row_pf{
        margin-bottom: 0;
    }
    header{
        margin-top: -60px;
    }
    section.section_guide div[class^="box_card-item"]::after{
        right: -112px;
    }
}

@media only screen and (max-width: 1024px) {
    button {
        padding: 0.7em 1.5em;
    }

    section.section_head {
        align-items: end;
    }
    section, .row_pf{
        margin-top: var(--mg-t-pc);
    }

    section.section_head .box{
        width: 88%;
    }
    section.section_head .box h1{
        font-size: 1.7em;
    }

    section.section_why div[class^="box_card-item"] {
        padding: 2em;
    }
    section.section_why .box_card {
        gap: 1em 1em;
    }

    section.section_guide div[class^="box_card-item"]::after{
        right: -70px;
    }
    section.section_guide .box {
        padding-right: 1em;
    }

    .level_table .table_tbody-tr:last-child .table_tbody-td {
        padding: 1em;
    }

    footer .row_pf{
        margin-top: 0;
    }

    .grid-box_service {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-auto-columns: 1fr;
        grid-auto-rows: 1fr;
        gap: 1em 1em;
        grid-template-areas:
          "grid-item-1 grid-item-1 grid-item-2"
          "grid-item-1 grid-item-1 grid-item-3"
          "grid-item-4 grid-item-5 grid-item-6"
          "grid-item-7 grid-item-8 grid-item-9";
      }
      .grid-item-1 { grid-area: grid-item-1; }
      .grid-item-2 { grid-area: grid-item-2; }
      .grid-item-3 { grid-area: grid-item-3; }
      .grid-item-4 { grid-area: grid-item-4; }
      .grid-item-5 { grid-area: grid-item-5; }
      .grid-item-6 { grid-area: grid-item-6; }
      .grid-item-7 { grid-area: grid-item-7; }
      .grid-item-8 { grid-area: grid-item-8; }
      .grid-item-9 { grid-area: grid-item-9; }

}

@media only screen and (max-width: 768px) {
    section.section_why {
        display: block;
    }
    section.section_why .box_card{
        margin-top: 1em;
        gap: 1em ;
    }
    section.section_why div[class^="box_card-item"]::after {
        top: 50%;
        transform: translateY(-50%);
        width: 32%;
        opacity: 0.2;
        position: absolute;
        left: -20px;
    }

    section.section_head .box{
        width: 99%;
    }

    section.section_guide .row_pf {
        z-index: 1;
        display: block;
    }
    section.section_guide .box {
        padding: 0 0 1em 0;
        margin-right: 0;
    }
    section.section_guide .box_card {
        padding-left: 3.2em;
        padding: 0 0 4.7em 3.2em;
    }
    .section_price .level_gird {
        display: grid; 
        grid-auto-columns: 1fr; 
        grid-auto-rows: 1fr; 
        grid-template-columns: 1fr 1fr; 
        grid-template-rows: 0.1fr 0.1fr 1.6fr 0.1fr 0.1fr 1.6fr 0.1fr; 
        gap: 0px 0px; 
        grid-template-areas: 
          "gird_thead-td-1 gird_thead-td-2"
          "gird_tbody-td-1 gird_tbody-td-2"
          "gird_tbody-td-5 gird_tbody-td-6"
          "gird_thead-td-3 gird_thead-td-4"
          "gird_tbody-td-3 gird_tbody-td-4"
          "gird_tbody-td-7 gird_tbody-td-8"
          "gird_tbody-td-9 gird_tbody-td-9"; 
    }
    .section_price .level_gird .gird_thead-td-3{
    border-top-left-radius: var(--bor-radius-main);
    }
    .section_price .level_gird .gird_thead-td-4{
    border-top-right-radius: var(--bor-radius-main);
    }
    .level_gird .gird_thead-td-2,
    .level_gird .gird_tbody-td-2,
    .level_gird .gird_tbody-td-6 {
        border-right: none !important;
    }
}

/* Chiều dọc của điện thoại */
@media only screen and (max-width: 576px) {

    header nav .cb_btn_mobile{
        display: block;
    }
    .menu{
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        padding-top: 24px;    
        display: flex;
        flex-direction: column;
        align-items: center;
        transform: translateY(calc(-100%));
        background-color: rgba(29, 29, 29, 0.9);
        /* background-color: rgba(255, 71, 0,0.9); */
    }
    header .menu > li {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-top: 1.5em;
        text-align: center;
    }
    header .menu li a,
    header .menu li span,
    header .menu li i{
        font-size: 1.3em;
        color: var(--color-white);
    }

    nav{
        display: block;
    }
    header nav .btn_mobile_mn {
        display: block;
    }
    nav .btn_mobile_mn span:nth-of-type(1) {
      top: 0;
    }
    nav .btn_mobile_mn span:nth-of-type(2) {
        top: 15px;
    }
    nav .btn_mobile_mn span:nth-of-type(3) {
      bottom: 0;
    }
    nav .cb_btn_mobile:checked + button span:nth-of-type(1) {
        width: 45%;
        background-color: var(--color-white);
        transform: translate3d(4px, 7px, 0) rotate(45deg);
    }
    nav .cb_btn_mobile:checked + button span:nth-of-type(2) {
        background-color: var(--color-white);
        transform: translate3d(2px, 0, 0) rotate(-45deg);
    }
    nav .cb_btn_mobile:checked + button span:nth-of-type(3) {
        width: 45%;
        background-color: var(--color-white);
        transform: translate3d(22px, -6px, 0) rotate(45deg);
    }
    nav .cb_btn_mobile:checked ~ .menu{
        transform: translateY(0);
    }
    nav .cb_btn_mobile:not(:checked) ~.menu{
        transform: translateY(-100%);
    }
    nav .choose-language .dropdown-language {
        margin-top: 32px;
        padding-left: 40%;
        padding-right: 40%;
        /* flex-direction: row; */
    }

    nav .li_mobi_mn{
        background-color: rgb(127, 127, 127);
    }
    nav .pc_mn_user{
        display: none;
    }
    nav .mobile_mn_user{
        display: flex;
        justify-content: center;
        margin: 0.9em;
        color: var(--color-white);
    }
    nav .list_menu_user div{
        text-align: left;
    }
    nav .list_menu_user {
        opacity: 0;
        top: 0;
        width: 100%;
        border-radius: 0;
        transform-origin: top center;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    }
    nav .list_menu_user a{
        font-size: 1.2em !important;
        color: var(--color-black) !important;
        line-height: 0 !important;
    }
    nav .li_mn_login{
        margin-bottom: 1.5em;
    }
    nav .dropdown-language a {
        padding-bottom: 0;
        margin-bottom: 0;
    }

    section.section_why{
        flex-wrap: wrap;
    }
    section.section_why .box {
        margin-right: 0;
        margin-bottom: 1em;
    }
    section.section_why .box_card {
        gap: 1em 1em;
    }

    section.section_head .box h1{
        font-size: 1.5em;
    }

    section.section_why .box_card {  display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        gap: 1em 1em;
        grid-auto-flow: row;
        grid-template-areas:
        "box_card-item-1"
        "box_card-item-2"
        "box_card-item-3"
        "box_card-item-4";
    }
    
    footer .row_pf{
        margin-top: 0;
    }    
    footer .logo{
        height: 20px;
    }

    .grid-box_service {  
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-auto-columns: 1fr;
        grid-auto-rows: 1fr;
        gap: 16px ;
        grid-template-areas:
          "grid-item-1"
          "grid-item-2"
          "grid-item-3"
          "grid-item-4"
          "grid-item-5"
          "grid-item-6"
          "grid-item-7"
          "grid-item-8"
          "grid-item-9";
    }
    .grid-item-1 { grid-area: grid-item-1; }
    .grid-item-2 { grid-area: grid-item-2; }
    .grid-item-3 { grid-area: grid-item-3; }
    .grid-item-4 { grid-area: grid-item-4; }
    .grid-item-5 { grid-area: grid-item-5; }
    .grid-item-6 { grid-area: grid-item-6; }
    .grid-item-7 { grid-area: grid-item-7; }
    .grid-item-8 { grid-area: grid-item-8; }
    .grid-item-9 { grid-area: grid-item-9; }

    .section_price .table_pf ul {
    list-style-type: disc;
    padding-left: 1.4em;
    list-style-position: inside;
    }
    .custom-list ul li::marker {
        content: "";
    }
}

@media only screen and (max-width: 376px) {
}