.kanit-thin {
    font-family: "Kanit", sans-serif;
    font-weight: 100;
    font-style: normal;
}

.kanit-extralight {
    font-family: "Kanit", sans-serif;
    font-weight: 200;
    font-style: normal;
}

.kanit-light {
    font-family: "Kanit", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.kanit-regular {
    font-family: "Kanit", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.kanit-medium {
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.kanit-semibold {
    font-family: "Kanit", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.kanit-bold {
    font-family: "Kanit", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.kanit-extrabold {
    font-family: "Kanit", sans-serif;
    font-weight: 800;
    font-style: normal;
}

.kanit-black {
    font-family: "Kanit", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.kanit-thin-italic {
    font-family: "Kanit", sans-serif;
    font-weight: 100;
    font-style: italic;
}

.kanit-extralight-italic {
    font-family: "Kanit", sans-serif;
    font-weight: 200;
    font-style: italic;
}

.kanit-light-italic {
    font-family: "Kanit", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.kanit-regular-italic {
    font-family: "Kanit", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.kanit-medium-italic {
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-style: italic;
}

.kanit-semibold-italic {
    font-family: "Kanit", sans-serif;
    font-weight: 600;
    font-style: italic;
}

.kanit-bold-italic {
    font-family: "Kanit", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.kanit-extrabold-italic {
    font-family: "Kanit", sans-serif;
    font-weight: 800;
    font-style: italic;
}

.kanit-black-italic {
    font-family: "Kanit", sans-serif;
    font-weight: 900;
    font-style: italic;
}

.phone-number {
    color: gray;
}
.text-red {
    color: #cf0a2c;
}


.text-red1 {
    color: #cf0a2c;
}

.text-red1:hover {
    transform: rotate(360deg);
    transition: all 0.3s ease;
}

.border-red1 {
    filter: drop-shadow(0px 0px 30px #696969);
    animation: shadowPulse 4s infinite;
}

/*** Spinner Start ***/
/*** Spinner ***/
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Kanit", sans-serif;
    font-weight: 700;
}

#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-out, visibility 0s linear 0.5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity 0s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;

}

@keyframes scaleAnimation {
    0% {
        transform: scale(0.9);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(0.9);
    }
}

#spinnerLogo {
    animation: scaleAnimation 2.5s infinite ease-in-out;
}

.loading-bar-container {
    width: 150px;
    height: 12px;
    background-color: #f1f1f1;
    margin: 10px auto;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}

/* Loading bar itself */
.loading-bar {
    height: 100%;
    width: 0;
    background-color: #ff0000;
    transition: width 0.1s linear;
    border-radius: 5px;
}

.text-center2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}



@keyframes popup {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.red-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-radius: 50%;
    background-color: red;
    z-index: 100000;
    opacity: 0;
    transition: width 1s ease-out, height 1s ease-out, opacity 1s ease-out;
}

.red-circle.expand {
    opacity: 1;
    width: 500vw;
    height: 500vw;
}

.white-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-radius: 50%;
    background-color: white;
    z-index: 100001;
    opacity: 0;
    transition: width 1s ease-out, height 1s ease-out, opacity 1s ease-out;
}

.white-circle.expand {
    opacity: 1;
    width: 500vw;
    height: 500vw;
}



/*** Spinner End ***/

.back-to-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    transition: 0.5s;
    z-index: 99;
}

/*** Button Start ***/
.btn {
    font-family: "Kanit", sans-serif;
    font-weight: 600;
    transition: .5s;
}

.btn-square {
    width: 32px;
    height: 32px;
}

.btn-sm-square {
    width: 34px;
    height: 34px;
}

.btn-md-square {
    width: 44px;
    height: 44px;
}

.btn-lg-square {
    width: 56px;
    height: 56px;
}

.btn-xl-square {
    width: 66px;
    height: 66px;
}

.btn-square,
.btn-sm-square,
.btn-md-square,
.btn-lg-square,
.btn-xl-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}

.btn.btn-primary {
    color: #ffffff;
    background: #cf0a2c;
    border: 2px solid #ffffff;
}

.btn.btn-primary:hover {
    background: #ffffff;
    color: #cf0a2c;
    border: 2px solid #cf0a2c;
}

.btn.btn-light {
    color: #cf0a2c;
    border: none;
}

.btn.btn-light:hover {
    color: var(--bs-white);
    background: #cf0a2c;
}

.text-dark3-topbar {
    color: #131313;
}


.text-dark3-topbar:hover {
    color: #cf0a2c;
}



/* Tablet view (up to 991px) */
@media (max-width: 991px) {
    .col-lg-4.text-center.text-lg-end {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        margin-top: -25px;
        flex-wrap: wrap;
    }
}

/* Mobile view (up to 687px) */
@media (max-width: 687px) {
    .col-lg-4.text-center.text-lg-end {
        flex-direction: column;
        align-items: center;
        margin-top: 10px;
        gap: 5px;
    }

    .text-head-start {
        display: none;
    }
}


.col-lg-4.text-center.text-lg-end>* {
    margin-bottom: 5px;
    margin-left: -200px;
    white-space: nowrap;
}


.language-menu {
    max-height: 200px;
    /* Adjust the height based on your design */
    overflow-y: auto;
    /* Adds a scrollbar if the content exceeds the height */
    width: 250px;
    /* Set the width to fit the content */
}

/* Optional: Style the scrollbar */
.language-menu::-webkit-scrollbar {
    width: 8px;
}

.language-menu::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 10px;
}



/*** Topbar Start ***/

.topbar .dropdown .dropdown-menu {
    display: none;
    opacity: 0;
    visibility: hidden;
    transform: rotateX(-10deg);
    transition: opacity 0.5s, visibility 0.5s, transform 0.5s;
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    min-width: 200px;
    background: var(--bs-light);
    padding-top: 10px;
    border: 0;
}

.topbar .dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: rotateX(0deg);
}

.dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    vertical-align: middle;
    margin-left: 8px;
    color: #cf0a2c;
}

.dropdown-menu a:hover {
    background: #cf0a2c;
}

.dropdown-item .check-icon {
    display: none;
}

.dropdown-item.active .check-icon {
    display: inline-block;

}

.dropdown-item.active {
    background-color: #cf0a2c;
}


/*** Topbar End ***/
body {
    font-family: "Kanit", sans-serif;
}





/*** Navbar ***/
.navbar-light .navbar-nav .nav-link {
    font-family: 'kanit', sans-serif;
    position: relative;
    margin-right: 25px;
    padding: 35px 0;
    color: #00000070;
    font-size: 17px;
    font-weight: 400;
    outline: none;
    transition: .5s;
}

.sticky-top.navbar-light .navbar-nav .nav-link,
.sticky-top.navbar-light .navbar-nav .nav-item .nav-link {
    padding: 20px 0;
    color: #ffffff8f;
}

.navbar-light .navbar-nav .nav-item .nav-link {
    color: #00000070;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-item .nav-link:hover,
.navbar-light .navbar-nav .nav-item .nav-link.active {
    color: rgb(255, 255, 255);
    text-shadow: 0px 0px 5px #494949;
}


.navbar-light .navbar-brand img {
    max-height: 64px;
    transition: 0.6s;
    margin-top: 5px;
    filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.));
}

/*---- start text kanit----*/
.text-red2 {
    color: #cf0a2c;
    /* เปลี่ยนสีเป็นน้ำเงิน */
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 2.5rem;
    /* เพิ่มขนาดฟอนต์ */
}

.text-red3 {
    color: #cf0a2c;


}

.text-white1 {
    color: #ffffff;
}

.text-white1:hover {
    color: #cf0a2c;
}

.logo-text-footer {
    color: #ffffff;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-style: normal;
    transition: .6s;
    margin-top: 0px;
    text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
    font-size: 2.0rem;
}



.semi-logo-text-footer {
    color: #ffffff;
    font-family: "Kanit", sans-serif;
    font-weight: 400;
    font-style: italic;
    transition: .6s;
    margin-top: -30px;
    margin-left: 75px;
    text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
    font-size: 0.8rem;
}

@media(max-width: 991px) {
    .logo-text-footer {
        font-size: 1.6rem;
    }

    .semi-logo-text-footer {
        font-size: 0.7rem;
        margin-left: 65px;
    }
}

.semi-logo-text-main {
    color: #cf0a2c;
    font-family: "Kanit", sans-serif;
    font-weight: 400;
    font-style: italic;
    transition: .6s;
    margin-top: -30px;
    margin-left: 75px;
    text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}

.semi-logo-nav-main {
    color: #ffffff;
    font-family: "Kanit", sans-serif;
    font-weight: 400;
    font-style: italic;
    transition: .6s;
    margin-top: -30px;
    margin-left: 75px;
    text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}

.logo-navbartext {
    color: #ffffff;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-style: normal;
    transition: .6s;
    margin-top: 0px;
    text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}

.logo-text-main {
    color: #cf0a2c;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-style: normal;
    transition: .6s;
    margin-top: 0px;
    text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}

@media (max-width: 1339px) {
    .logo-text-main {
        font-size: 35px;
    }

    .semi-logo-text-main {
        font-size: 14px;
    }
}

@media (max-width: 1293px) {
    .logo-text-main {
        font-size: 25px;
    }

    .semi-logo-text-main {
        font-size: 10px;
    }
}

@media (max-width: 30000px) {

    .logo-navbartext {
        display: none;
    }

    .semi-logo-nav-main {
        display: none;
    }
}

@media (max-width: 1210px) {
    .logo-text-main {
        display: none;
    }

    .logo-navbartext {
        display: block;
        font-size: 0px;
    }

    .semi-logo-nav-main {
        display: block;
        font-size: 0px;
    }

    .semi-logo-text-main {
        display: none;

    }
}

@media (max-width: 991px) {


    .logo-navbartext {
        display: block;
        font-size: 30px;
        margin-bottom: 10px;
    }

    .semi-logo-nav-main {
        display: block;
        font-size: 12px;
        margin-left: 70px;
    }

}

@media (max-width: 520px) {


    .logo-navbartext {
        font-size: 0px;
        margin-bottom: 25px;
    }

    .semi-logo-nav-main {
        font-size: 0px;
    }
}


.Mainmenu-text1 {
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-style: normal;
    text-transform: uppercase;
    font-size: 2.5rem;
    color: #cf0a2c;
    font-weight: bold;
    margin-bottom: -1rem;
}

.Mainmenu-text {
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 6rem;
    color: #ffffff;
    font-weight: bold;
    margin-bottom: -1rem;
}

@media(max-width: 991px) {
    .Mainmenu-text {
        font-size: 5rem;
    }

}

@media(max-width: 767px) {
    .Mainmenu-text {
        font-size: 4rem;
    }

}

.Mainmenu-texth2 {
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 2rem;
    color: #ffffff;
}

.Mainmenu-textp {
    font-family: "Kanit", sans-serif;
    font-weight: 300;
    font-style: normal;
    color: #ffffff;
}

/*---- End text kanit----*/

.sticky-top.navbar-light .logo-text-main {
    font-weight: 700;
    color: white;
}

.sticky-top.navbar-light .semi-logo-text-main {
    color: white;
    margin-top: -35px;
    transition: .6s;
    margin-left: 90px;

}


.sticky-top.navbar-light .navbar-brand img {
    max-height: 80px;
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    vertical-align: middle;
    margin-left: 8px;
    color: #ffffff;
}

.dropdown .dropdown-menu a:hover {
    background-color: #cf0a2c;
    color: var(--bs-white);
    background: #cf0a2c;
}

.navbar .nav-item:hover .dropdown-menu {
    transform: rotateX(0deg);
    visibility: visible;
    background: var(--bs-light);
    transition: .5s;
    opacity: 1;
}

@media (max-width: 991.98px) {
    .sticky-top.navbar-light {
        position: relative;
        color: #fefefe9b;

    }

    .navbar.navbar-expand-lg .navbar-toggler {
        padding: 10px 20px;
        border: 1px solid #cf0a2c;
        color: #cf0a2c;
        background: #fefefe;

    }

    .navbar-light .navbar-collapse {
        margin-top: 15px;

    }

    .navbar-light .navbar-nav .nav-link,
    .sticky-top.navbar-light .navbar-nav .nav-link {
        padding: 10px 0;
        margin-left: 0;
        color: #fefefe9b;
    }




    .navbar-light .navbar-nav .nav-item .nav-link {
        color: #fefefe9b;

    }

    .navbar-light .navbar-brand img {
        max-height: 60px;
    }
}


@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        visibility: hidden;
        top: 100%;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
        border: 0;
        border-radius: 10px;
        transition: .5s;
        opacity: 0;
    }

    .navbar-light {
        position: absolute;
        width: 100%;
        top: 0;
        right: 0;
        box-shadow: inset 0 0 0 500px rgba(255, 255, 255, 0.3);
        border-bottom: 4px solid rgba(255, 255, 255, 0.3);
        z-index: 999;
        filter: drop-shadow(10px 10px 10px 10px);
    }


    .sticky-top.navbar-light {
        position: fixed;
        background: #cf0a2c;

    }

    .navbar-light .navbar-nav .nav-link::before {
        position: absolute;
        content: "";
        width: 0;
        height: 2px;
        bottom: -4px;
        left: 50%;
        background-color: #cf0a2c;
        transition: .5s;
    }

    .navbar-light .navbar-nav .nav-link:hover::before,
    .navbar-light .navbar-nav .nav-link.active::before {
        width: calc(100% - 2px);
        left: 1px;
    }

    .navbar-light .navbar-nav .nav-link::after {
        position: absolute;
        content: "";
        width: 0;
        height: 0;
        bottom: -1px;
        left: 50%;
        background-color: #cf0a2c;
        transition: .5s;
    }

    .navbar-light .navbar-nav .nav-link:hover::after,
    .navbar-light .navbar-nav .nav-link.active::after {
        width: 2px;
        height: 25px;
    }
}

/*** Navbar End ***/

/*** Carousel Hero Header Start ***/
.header-carousel .header-carousel-item img {
    object-fit: cover;
}

.header-carousel .header-carousel-item,
.header-carousel .header-carousel-item img {
    height: 900px;
}


@media (max-width: 1200px) {

    .header-carousel .header-carousel-item,
    .header-carousel .header-carousel-item img {
        height: 750px;
    }
}


@media (max-width: 767px) and (min-width: 521px) {

    .header-carousel .header-carousel-item,
    .header-carousel .header-carousel-item img {
        height: 650px;
    }
}

/* For screen widths 520px and below */
@media (max-width: 520px) {

    .header-carousel .header-carousel-item,
    .header-carousel .header-carousel-item img {
        height: 550px;
        /* Adjusted from 85px to ensure better visual consistency */
    }
}




.header-carousel .owl-nav .owl-prev,
.header-carousel .owl-nav .owl-next {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 60px;
    background-color: #cf0a2c;
    color: var(--bs-white);
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;

}

.header-carousel .owl-nav .owl-prev {
    bottom: 30px;
    left: 30px;
    margin-left: 90px;
}

.header-carousel .owl-nav .owl-next {
    bottom: 30px;
    left: 30px;

}

.header-carousel .owl-nav .owl-prev:hover,
.header-carousel .owl-nav .owl-next:hover {
    box-shadow: inset 0 0 100px 0 var(--bs-light);
    color: #cf0a2c;
}


.header-carousel .header-carousel-item .carousel-caption {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    padding-top: 60px;
    background: rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
}


@media (max-width: 991px) {
    .header-carousel .header-carousel-item .carousel-caption {
        padding-top: -200px;
    }
}

@media (max-width: 520px) {
    .header-carousel .header-carousel-item .carousel-caption {
        padding-top: 100px;
    }
}

@media (max-width: 767px) {
    .header-carousel .owl-nav .owl-prev {
        left: 50%;
        transform: translateX(-50%);
        margin-left: -45px;
        margin-bottom: -15px;
    }


    .header-carousel .owl-nav .owl-next {
        left: 50%;
        transform: translateX(-50%);
        margin-left: 45px;
        margin-bottom: -15px;
    }
}



.header-carousel .header-carousel-item img {
    animation-name: image-zoom;
    animation-duration: 10s;
    animation-delay: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    transition: 1.5s;

}

@keyframes image-zoom {
    0% {
        height: 100%;
    }



    60% {
        height: 110%;
    }
}

/*** Carousel Hero Header End ***/
code {
    color: #cf0a2c;
}

/*** Single Page Hero Header Start ***/


@media (min-width: 992px) {
    .bg-breadcrumb {
        padding: 140px 0 60px 0;
    }
}

@media (max-width: 991px) {
    .bg-breadcrumb {
        padding: 60px 0 60px 0;
    }
}

.bg-breadcrumb .breadcrumb {
    position: relative;
}

.bg-breadcrumb .breadcrumb .breadcrumb-item a {
    color: var(--bs-white);

}

.breadcrumb-item+.breadcrumb-item::before {
    content: "/";
    color: #fff;
    /* กำหนดสีให้ตรงกับสีของปุ่ม */
    margin: 0 5px;
    /* กำหนดระยะห่างระหว่างเครื่องหมายกับข้อความ */
    opacity: 0.7;
    /* ปรับความโปร่งใสเพื่อให้ดูสมูท */
    font-size: 1.6rem;
    /* ปรับขนาดให้เข้ากับปุ่ม */
}

.text-red3 {
    color: #cf0a2c;
}

/*** Single Page Hero Header End ***/
.container-fluid {
    position: relative;
    overflow: visible;
}

/* Style the 404 background image */
.bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
    z-index: 0;
}


.container.text-center2 {
    position: relative;
    z-index: 1;
    color: #000;
    text-align: center;
}


.container-fluid2 .container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 20vh;
}

/*** aboutconfig **/
.configabout2 {
    padding-left: 250px;
}

.configabout3 {
    padding-right: 250px;
}

.abouttitle {
    position: absolute;
    bottom: 40px;
    left: 25px;
    z-index: 5;
}

.abouttitle a {
    color: var(--bs-white);
    background: #cf0a2c;
    transition: 0.5s;
}


.abouttitle a:hover {
    color: var(--bs-white);
    background: #0acf3f;
    transition: 0.5s;
}


/*** Service Start ***/
.service .service-item {
    font-family: "Kanit", sans-serif;
    font-weight: 400;
    background: var(--bs-light);
    border-radius: 10px;
    transition: 0.5s;
}

.service .service-item:hover {
    box-shadow: 0 0 45px rgba(0, 0, 0, .2);
}

.service .service-item .service-img {
    position: relative;
    overflow: hidden;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    transition: 0.5s;
}

.service .service-item .service-img img {
    transition: 0.5s;
}

.service .service-item:hover .service-img img {
    transform: scale(1.08);
}

/*** Service End ***/


/*** Features Start ***/
.feature .feature-item {
    text-align: center;
    border-radius: 10px;
    background: var(--bs-light);
    border: 1px solid transparent;
    transition: 0.5s;
}

.feature .feature-item:hover {
    border: 1px solid #cf0a2c;
}

.feature .feature-item .feature-icon {
    background: var(--bs-white);
    border-radius: 10px;
    display: inline-block;
}

/*** Features End ***/

/*** Offer Start ***/
.offer-section .nav a.accordion-link {
    width: 100%;
    border-radius: 10px;
    display: flex;
    background: var(--bs-white);
    transition: 0.5s;
}

.offer-section .nav a.accordion-link.active {
    color: var(--bs-white);
    background: #cf0a2c;
}

.offer-section .nav a.accordion-link h5 {
    transition: 0.5s;
}

.offer-section .nav a.accordion-link.active h5 {
    color: var(--bs-white);
}

/*** Offer End ***/

/*** Blog Start ***/
.blog .blog-item {
    font-family: "Kanit", sans-serif;
    font-weight: 300;
    border-radius: 10px;
    background: var(--bs-white);
    box-shadow: inset 0 0 45px rgba(0, 0, 0, .1);
    transition: 0.5s;
}

.blog .blog-item a {
    transition: 0.5s;
}

.blog .blog-item:hover a:hover {
    color: #cf0a2c;
}

.blog .blog-item .blog-img {
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.blog .blog-item .blog-img img {
    transition: 0.5s;
}



.blog .blog-item .blog-img::after {

    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 10px;
    background: rgba(207, 10, 44, 0.05);
    opacity: 0;
    transition: 0.5s;
    z-index: 0;
}

.blog .blog-item:hover .blog-img::after {
    opacity: 1;
}

.service-title {
    position: absolute;
    bottom: 25px;
    left: 25px;
    z-index: 5;
}

.img-fluid.rounded-circle.image-recommened1 {
    width: 60px;
    height: 60px;
    border: 3px solid #ffffff;
    box-shadow: 0 0 0 2px white, 0 0 0 3px #cf0a2c;
}

.service-title a {
    color: var(--bs-white);
    background: #cf0a2c;
    transition: 0.5s;
}

.blog .blog-item .blog-img .blog-title {
    position: absolute;
    bottom: 25px;
    left: 25px;
    z-index: 5;
}

.blog .blog-item .blog-img .blog-title a {
    color: var(--bs-white);
    background: #cf0a2c;
    transition: 0.5s;
}

.service-itemmain2 {
    color: #cf0a2b62;
}

.service-itemmain2:hover {
    color: #cf0a2c;
}

.service-itemmain1:hover {
    color: #cf0a2c;
}


.blog .blog-item:hover .blog-img .blog-title a:hover {
    color: #cf0a2c;
    background: #ffffff;
}

.blog-carousel .owl-stage-outer {
    margin-top: 58px;
}

.blog .owl-nav .owl-prev {
    position: absolute;
    top: -58px;
    left: 0;
    background: #cf0a2c;
    color: var(--bs-white);
    padding: 6px 35px;
    border-radius: 30px;
    transition: 0.5s;
}

.blog .owl-nav .owl-prev:hover {
    background: var(--bs-white);
    color: #cf0a2c;
    border: 1px solid #cf0a2c;
}

.blog .owl-nav .owl-next {
    position: absolute;
    top: -58px;
    right: 0;
    background: #cf0a2c;
    color: var(--bs-white);
    padding: 6px 35px;
    border-radius: 30px;
    transition: 0.5s;
}

.blog .owl-nav .owl-next:hover {
    background: var(--bs-white);
    color: #cf0a2c;
    border: 1px solid #cf0a2c;
}

/*** Blog End ***/


.tadasocail {
    animation: tada 2s infinite;
}

@keyframes tada {
    0% {
        transform: scale(1);
    }

    10% {
        transform: scale(1.30);
    }

    20% {
        transform: scale(0.95);
    }

    30% {
        transform: scale(1.30);
    }

    40% {
        transform: scale(0.95);
    }

    50% {
        transform: scale(1.30);
    }

    60% {
        transform: scale(0.95);
    }

    70% {
        transform: scale(1.30);
    }

    80% {
        transform: scale(0.95);
    }

    90% {
        transform: scale(1.30);
    }

    100% {
        transform: scale(1);
    }
}


/*** FAQs Start ***/
.faq-section .accordion .accordion-item .accordion-header .accordion-button {
    color: var(--bs-secondary);
}

.faq-section .accordion .accordion-item .accordion-header .accordion-button.collapsed {
    color: var(--bs-dark);
}

.accordion-button:not(.collapsed) {
    background-color: var(--bs-accordion-active-bg);
    border-color: var(--bs-accordion-active-bg);/
}

.accordion-button:not(.collapsed) {
    background-color: var(--bs-accordion-active-bg);
    border-color: var(--bs-accordion-active-bg);
}


.accordion-button:focus {
    background-color: var(--bs-accordion-focus-bg, #cf0a2b2b);
    box-shadow: 0 0 0 0.2rem #cf0a2b6a;
}




/*** FAQs End ***/

/*** Team Start ***/
.team .team-item {
    position: relative;
    padding: 0 25px 25px 25px;
    border-radius: 10px;
    transition: 0.5s;
}

.team .team-item::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    background: var(--bs-light);
    border-radius: 10px;
    transition: 0.5s;
    z-index: -1;
}

.team .team-item:hover::before {
    height: 0;
}

.team .team-item::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 0;
    bottom: 0;
    left: 0;
    border-radius: 10px;
    transition: 0.5s;
    z-index: -1;
}

.team .team-item:hover::after {
    height: 100%;
    background: #cf0a2c;
}

.team .team-item .team-img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    position: relative;
    margin-top: 50%;
    transform: translateY(-50%);
    margin-bottom: -50%;
    display: flex;
    justify-content: center;
    padding: 4px;
    background: var(--bs-white);
    transition: 0.5s;
}



.text-left2 {
    text-align: left;
    transform: translateX(10px);
}

.text-left h6 {
    color: #cf0a2c;
    text-align: left;
}

.team .team-item .team-title {
    padding: 25px 0 25px 0;
    text-align: center;
}

.team .team-item .team-title h4,
.team .team-item .team-title p {
    transition: 0.5s;
}

.team .team-item:hover .team-title h4,
.team .team-item:hover .team-title p,
.team .team-item:hover .team-title h6 {
    color: var(--bs-white);
}

.team .team-item .team-icon {
    display: flex;
    justify-content: center;
}

.team .team-item .team-icon a {
    transition: 0.5s;
}

.team .team-item:hover .team-icon a {
    color: #cf0a2c;
    background: var(--bs-white);
    border: 3px solid #ffffff;
}

.team .team-item:hover .team-icon a:hover {
    color: var(--bs-white);
    background: #cf0a2c;
}

/*** Team End ***/

/*** Testimonial Start ***/
.testimonial .testimonial-item {
    font-family: "Kanit", sans-serif;
    font-weight: 400;
    margin-bottom: 30px;
    padding: 0 25px 25px 25px;
}

.testimonial .testimonial-item::before {
    content: "";
    position: absolute;
    width: 100%;
    height: calc(100% - 50px);
    bottom: 0;
    left: 0;
    border-radius: 10px;
    background: var(--bs-light);
    z-index: -1;
}

.testimonial .testimonial-item .testimonial-img {
    display: flex;
    justify-content: center;
}

.testimonial .testimonial-item .testimonial-img img {
    width: 100px;
    height: 100px;
    border-radius: 100px;
    border: 5px solid #cf0a2c;
    background: var(--bs-white);
}

.testimonial .testimonial-item .testimonial-text {
    padding: 25px 0;
    text-align: center;
}

.testimonial .testimonial-item .testimonial-title {
    display: flex;
    justify-content: space-between;

}
.testimonial .testimonial-item .testimonial-quote-left {
    position: absolute;
    width: 60px;
    height: 60px;
    top: 20px;
    left: 25px;
    border-radius: 60px;
    color: #cf0a2c;
    background: var(--bs-white);
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial .testimonial-item .testimonial-quote-right {
    position: absolute;
    width: 60px;
    height: 60px;
    bottom: 10px; /* Adjusted to prevent overlap */
    right: 10px; /* Adjusted to give more spacing */
    margin-top: 0; /* Remove unnecessary margin */
    border-radius: 50%; /* Keeps it circular */
    color: #cf0a2c;
    background: var(--bs-white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15); /* Optional: adds a soft shadow */
}

.testimonial-carousel .owl-stage-outer {
    margin-top: 58px;
    margin-right: -1px;
}

.testimonial .owl-nav .owl-prev {
    position: absolute;
    top: -58px;
    left: 0;
    background: #cf0a2c;
    color: var(--bs-white);
    padding: 5px 30px;
    border-radius: 30px;
    transition: 0.5s;
}

.testimonial .owl-nav .owl-prev:hover {
    background: var(--bs-white);
    color: #cf0a2c;
    border: 1px solid #cf0a2c;
}

.testimonial .owl-nav .owl-next {
    position: absolute;
    top: -58px;
    right: 0;
    background: #cf0a2c;
    color: var(--bs-white);
    padding: 5px 30px;
    border-radius: 30px;
    transition: 0.5s;
}

.testimonial .owl-nav .owl-next:hover {
    background: var(--bs-white);
    color: #cf0a2c;
    border: 1px solid #cf0a2c;
}

.testimonial-carousel .owl-dots {
    display: flex;
    justify-content: center;
}

.testimonial-carousel .owl-dots .owl-dot {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    margin: 5px 10px 0 10px;
    background: #ffffff;
    transition: 0.5s;
}

.testimonial-carousel .owl-dots .owl-dot.active {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background: #cf0a2c;
    color: #ffffff;
    transition: 0.5s;
}

.testimonial-carousel .owl-dots .owl-dot span {
    position: relative;
    margin-top: 50%;
    margin-left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.testimonial-carousel .owl-dots .owl-dot.active span::after {
    background: #ffffff;
}

.testimonial-carousel .owl-dots .owl-dot span::after {
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 15px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #cf0a2c;
    transition: 0.5s;
}

/*** Testimonial End ***/

/*** Footer Start ***/
.footer {
    background: #cf0a2c;
}

.footer .footer-item {
    display: flex;
    flex-direction: column;
}


.footer .footer-item a {
    font-family: "Kanit", sans-serif;
    font-weight: 300;
    line-height: 35px;
    color: #ffffff6c;
    transition: 0.5s;
}

.footer .footer-item a:hover {
    line-height: 35px;
    color: #ffffff;
    transition: 0.5s;
}

.footer .footer-item p {
    line-height: 35px;
}

.footer .footer-item a:hover {
    color: var#cf0a2c;
}

.footer .footer-item .footer-btn a,
.footer .footer-item .footer-btn a i {
    transition: 0.5s;
}

.footer .footer-item .footer-btn a:hover {
    background: var(--bs-white);
}

.footer .footer-item .footer-btn a:hover i {
    color: #cf0a2c;
}

.text-white2 {
    color: #cf0a2c;
}

.bg-white1 {
    background-color: #ffffff;
}

.bg-white1:hover {
    background-color: #136da9;
}

.bg-white1:hover .text-white2 {
    color: #ffffff;
}


.text-dark2 {
    color: #cf0a2c;
}

.bg-dark2 {
    background-color: #ffffff;
}

.bg-dark2:hover {
    background-color: #2ea913;
}

.bg-dark2:hover .text-dark2 {
    color: #ffffff;
}

.resize-element {
    width: 300%;
}

/*** Footer End ***/

/*** copyright Start ***/
.copyright {
    background: #202020;
}

/*** copyright end ***/

/*** ข่าวสาร ***/
.service-itemmain1 {
    font-family: "Kanit", sans-serif;
    font-weight: 700;

}

.news-details1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    flex-direction: column;
    line-height: 1.5em; /* ตั้งค่า line-height */
    max-height: 3em; /* จำนวนบรรทัดที่ต้องการ x line-height */
    white-space: normal;
}





/*** แถบล่างเลขด้านล่าง ***/
.pagination {
    display: flex;
    list-style: none;
    padding: 0;
    align-items: center;
    justify-content: center;
    margin: 20px auto;
}

.pagination li {
    margin: 0 5px;
    font-size: 1.5em;
}

.pagination li a {
    text-decoration: none;
    color: #1d1d1d;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.3s ease, color 0.3s ease;
}

.pagination li a:hover {
    transform: scale(1.5);
    color: #cf0a2c;
}

.pagination li.arrow a {
    font-size: 1.8em;
    color: #999;
}

.pagination li.arrow a:hover {
    color: #cf0a2c;
    transform: scale(1.5);
}

.pagination li a.active {
    color: #cf0a2c;
    border-bottom: 2px solid #cf0a2c;
    transform: scale(1.6);
}

.hidden-group {
    display: flex;
    /* ตั้งค่า display เป็น flex เพื่อให้ลูกอยู่ในแถวเดียวกัน */
    align-items: center;
}

.hidden-group .hidden {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
        transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: none;
    /* Hidden initially */
}

.hidden-group .hidden:hover {
    transform: scale(1.5);
    /* Scale up to 1.5 when hovered */
    color: #cf0a2c;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
        color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}




/*** sitemap ***/
/* Styles for the overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 234, 234, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 0.6s ease, transform 0.8s ease;
}

/* Styles for the content container */
.content-container {
    position: relative;
    background: rgba(255, 255, 255, 0.8); /* Transparent background */
    padding: 2vw;
    border-radius: 15px;
    color: #f13737;
    max-width: 1200px;
    width: 90vw;
    height: 85vh;
    box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.6);
    overflow-y: auto;
    transform-origin: center;
    transform: perspective(1000px) rotateX(10deg); /* 3D Tilt Effect */
    transition: transform 0.8s ease, opacity 0.6s ease;
}
.overlay.show {
    display: flex;
    opacity: 1;
    transform: scale(1);
    animation: fadeIn 0.6s ease forwards;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


.overlay.show .content-container {
    opacity: 1;
    animation: contentZoomIn 0.5s ease forwards;
}

@keyframes contentZoomIn {
    from { transform: rotateX(0deg) scale(0.9); }
    to { transform: rotateX(10deg) scale(1); }
}


.content-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}


.menu-list {
    flex: 1;
}

.categories {
    display: flex;
    flex-direction: column;
    /* Stack categories vertically */
    align-items: flex-start;
    /* Align items to the start of the container */
    width: 100%;
    /* Use the full width */
    text-align: left;
    /* Align text to the left */
}

.combined-row {
    display: flex;
    gap: 40px;
    padding: 30px;
    background: transparent; /* เปลี่ยนพื้นหลังให้ใส */
    font-family: "Prompt", sans-serif;
    border-radius: 15px; /* เพิ่มความมนให้กับกรอบ */
}

/* เมนูหลักด้านซ้าย */
.menu-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 20px;
    background: transparent;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    height: auto; /* Adjust height as needed */
    font-size: 20px; /* Increased font size */
}

.menu-item a {
  display: block;
  padding: 10px 18px;
  color: #333;
  font-weight: 500;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.menu-item a:hover {
  background: #000000;
  color: #fff;
  transform: translateX(6px);
}

/* ส่วนหมวดหมู่ */
.categories-container {
  flex: 1;
}

.categories-header {
  margin-bottom: 15px;
}

.menu-item1 a {
    font-size: 28px; /* Increased font size */
    font-weight: 600;
    color: #000000;
    border-bottom: 3px solid #4a4b45;
    padding-bottom: 6px;
}

/* การจัด category */
.categories-horizontal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* ปรับขนาดการ์ด */
  gap: 20px; /* ระยะห่างระหว่างการ์ด */
  margin-top: 15px; /* ระยะห่างด้านบน */
}

.list-unstyled {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1.8; /* เพิ่มระยะห่างระหว่างบรรทัด */
    letter-spacing: 0.5px; /* เพิ่มระยะห่างระหว่างตัวอักษร */
}

.category {
    flex: 1 1 calc(25% - 30px); /* เพิ่มระยะห่างระหว่างการ์ด */
    min-width: 220px;
    background: #d8d9da;
    border-radius: 12px;
    padding: 20px 25px; /* เพิ่ม padding ภายในการ์ด */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* เพิ่มเงาให้เด่นขึ้น */
    transition: all 0.3s ease;
}

.category:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
/* ปุ่มปิด */
.close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    color: #ffffff;
    background: #cf0a2c;
    border-radius: 20%;
    box-shadow: 0px 4px 10px rgba(207, 10, 44, 0.5);
    transition: transform 0.3s ease, background-color 0.3s ease;
}


.close-btn:hover {
    background-color: #e82e3f;
    transform: rotate(360deg) scale(1.2);
}

.categories-horizontal {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    margin-bottom: 20px;
    /* เว้นระยะห่างระหว่างบล็อก */
    padding: 20px;  
    
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    margin-top: 20px;
    
    
}

.sitemaptext {
    color: #cf0a2c;
    font-weight: bold;
    font-size: calc(1.5rem + 0.5vw);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
}


/* สำหรับ iPad (แนวนอนและแนวตั้ง) */
@media (max-width: 1024px) {
    .content-container {
        padding: 10px;
        width: 90%;
        max-width: 750px;
        height: 85vh; /* จำกัดความสูงเพื่อไม่ให้ล้นจอ */
        overflow-y: auto; /* เพิ่มการ scroll แนวตั้ง */
        overflow-x: hidden; /* ปิดการ scroll แนวนอน */
    }

    .categories-horizontal,
    .categories {
        flex-direction: column; /* เปลี่ยนเป็นคอลัมน์ */
        gap: 10px;
        align-items: center;
        width: 100%;
    }

    .menu-item a, .category-item a {
        padding: 8px;
        font-size: 14px;
        width: 100%; /* ใช้ความกว้างเต็ม */
        text-align: center;
    }

    .sitemaptext {
        font-size: 20px;
        text-align: center; /* จัดให้อยู่ตรงกลาง */
    }

    .close-btn {
        top: 10px;
        right: 10px;
        width: 30px;
        height: 30px;
        font-size: 18px;
    }
}

/* สำหรับมือถือ (หน้าจอกว้างไม่เกิน 768px) */
@media (max-width: 768px) {
    .overlay {
        padding: 10px;
    }

    .content-container {
        padding: 10px;
        width: 100%;
        max-width: 100%;
        height: 90vh; /* จำกัดความสูง */
        overflow-y: auto; /* เพิ่มการ scroll แนวตั้ง */
        overflow-x: hidden; /* ปิดการ scroll แนวนอน */
    }

    .categories-horizontal, .categories {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        width: 100%;
    }

    .menu-item a, .category-item a {
        padding: 8px;
        font-size: 12px;
        width: 100%;
        text-align: center;
    }

    .category h5 {
        font-size: 16px;
        text-align: center;
    }

    .sitemaptext {
        font-size: 18px;
        text-align: center;
    }

    .close-btn {
        top: 5px;
        right: 5px;
        width: 25px;
        height: 25px;
        font-size: 16px;
    }
}

/* Default styles for large screens (above 1200px) */
@media (min-width: 1200px) {
    .overlay {
        /* Adjust overlay styles for large screens if needed */
    }

    .content-container {
        width: 80vw;
        height: 80vh;
    }
}

/* Tablet landscape (1200px and below) */
@media (max-width: 1200px) {
    .content-container {
        width: 85vw;
        height: 80vh;
        padding: 1.5vw;
    }

    .menu-item a, .category-item a {
        font-size: calc(0.85rem + 0.3vw);
        padding: 10px 15px;
    }
}

/* Tablet portrait (991px and below) */
@media (max-width: 991px) {
    .content-container {
        width: 90vw;
        height: 75vh;
    }

    .menu-item a, .category-item a {
        padding: 8px 12px;
        font-size: calc(0.8rem + 0.3vw);
    }

    .close-btn {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }
}

/* Small tablets and large phones (767px and below) */
@media (max-width: 767px) {
    .content-container {
        width: 95vw;
        height: 70vh;
    }

    .menu-item a, .category-item a {
        padding: 6px 10px;
        font-size: calc(0.75rem + 0.3vw);
    }

    .categories-horizontal {
        flex-direction: column;
        gap: 10px;
    }
}

/* Small phones (687px and below) */
@media (max-width: 687px) {
    .content-container {
        padding: 1vw;
        height: 65vh;
    }

    .sitemaptext {
        font-size: calc(1.3rem + 0.4vw);
    }

    .close-btn {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }
}

/* Extra small phones (520px and below) */
@media (max-width: 520px) {
    .content-container {
        padding: 0.5vw;
        height: 60vh;
    }

    .menu-item a, .category-item a {
        padding: 4px 8px;
        font-size: calc(0.7rem + 0.3vw);
    }

    .close-btn {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }
}
/* news- blog  */
:root {
    --primary: #;
    --secondary: #777777;
    --light: #F8F8F8;
    --dark: #252525;
}

.blog-item {
    transition: .5s;

}

.blog-item img {
    transition: .5s;

}

.blog-item .overflow-hidden {
    height: auto;
    /* กำหนดความสูงของ container */

    overflow: hidden;
    /* ซ่อนส่วนที่เกินออกมาจาก container */
}

.blog-item img {
    transition: .5s;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* ปรับขนาดรูปภาพให้ครอบคลุมพื้นที่ container */
}

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

.blog-meta {
    text-transform: uppercase;
}

.blog-meta a {
    color: var(--secondary);
}

.blog-meta a:hover {
    color: #cf0a2c;
}

.btn-outline-









{
    color: #cf0a2c;
    border-color: #cf0a2c;
}

.btn-outline-body:hover {
    color: #f0f0f0;
    background: #cf0a2c;
}

.btn-tag {
    color: #cf0a2c;
    border-color: #cf0a2c;
}

.btn-tag:hover {
    color: #f0f0f0;
    background: #cf0a2c;
}


.category-list a {
    margin-bottom: 7px;
    padding: 12px 15px;
    transition: .5s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.category-list a::before {
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #cf0a2c;
    transition: 0.5s;
    opacity: 0;
    width: 16px; /* กำหนดความกว้างล่วงหน้าเพื่อไม่ให้ข้อความขยับ */
    margin-right: 10px;
}

.category-list a:hover::before {
    opacity: 1;
}

.category-list a > span {
    margin-left: auto;
}


.blog-tab .nav-pills .nav-item .active {
    border-bottom: 5px solid var(--dark);
}

.blog-tab .tab-content img {
    width: 75px;
    height: 75px;
    object-fit: cover;
}

.btn {
    font-weight: 500;
    transition: .5s;
}

.btn-sm {
    font-size: .875rem;
    padding: .25rem .5rem;
}

.wow.fadeInUp {
    visibility: hidden;
    animation-name: fadeInUp;
    animation-duration: 1s;
    animation-delay: var(--wow-delay, 0s);
    animation-fill-mode: both;
}

@keyframes fadeInUp {
    from {
        transform: translate3d(0, 40px, 0);
        visibility: visible;
        opacity: 0;
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}



.news-count {
    font-weight: normal;
    margin-left: auto;
    /* Moves the number to the far right */
}

.blog-tab .nav-pills .nav-item .active h4 {
    color: #cf0a2c;
    opacity: 1;
    border-bottom: 5px solid #cf0a2c;
}

.blog-tab .nav-pills .nav-item a:not(.active) h4 {
    color: #000000;
    /* เปลี่ยนเป็นสีที่คุณต้องการ */
    opacity: 0.15;
    /* ทำให้ตัวหนังสือจางลง */
}


.blog-tab .tab-content img {
    width: 75px;
    height: 75px;
    object-fit: cover
}

#cart-icon:hover i {
    animation: bounce 0.5s ease infinite;
    transform: scale(1.2);
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0) scale(1.2);
        /* ให้ขนาดเพิ่มขึ้นด้วย */
    }

    50% {
        transform: translateY(-5px) scale(1.2);
        /* เด้งขึ้นพร้อมกับขนาดเพิ่ม */
    }
}



#cart-count {
    font-size: 0.75rem;
    padding: 0.2rem 0.4rem;
}

/* Hover animation (bounce) */
#cart-icon:hover i {
    animation: bounce 0.5s ease-in-out infinite;
    transform: scale(1.2);

}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0) scale(1.2);
    }

    50% {
        transform: translateY(-4px) scale(1.2);
    }
}

/* Smooth downward only icon switch animation */
#cart-icon i::before {
    content: "\f07a";
    /* Default icon - shopping cart */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    animation: downwardIconSwitch 9s infinite;
    display: inline-block;
    transition: transform 0.8s ease, opacity 0.8s ease;
}

@keyframes downwardIconSwitch {

    0%,
    28% {
        opacity: 1;
        transform: translateY(0);
        content: "\f07a";
        /* Shopping cart */
    }

    29%,
    30% {
        opacity: 0;
        transform: translateY(20px);
        /* Move down smoothly */
    }

    31%,
    59% {
        opacity: 1;
        transform: translateY(0);
        content: "\f49e";
        /* Box */
    }

    60%,
    61% {
        opacity: 0;
        transform: translateY(20px);
        /* Move down smoothly */
    }

    62%,
    90% {
        opacity: 1;
        transform: translateY(0);
        content: "\f0d1";
        /* Truck */
    }

    91%,
    92% {
        opacity: 0;
        transform: translateY(20px);
        /* Move down smoothly */
    }

    93%,
    100% {
        opacity: 1;
        transform: translateY(0);
        content: "\f07a";
        /* Back to shopping cart */
    }
}

.text-animated {
    display: block;
    width: 100%;
    /* กำหนดความกว้างให้เต็มบรรทัด */
    height: 1.2em;
    /* กำหนดความสูงให้เท่ากับความสูงของข้อความ */
    white-space: nowrap;
    /* ป้องกันการขึ้นบรรทัดใหม่ */
    overflow: hidden;
    /* ป้องกันข้อความล้น */
    text-align: center;
    /* จัดให้อยู่ตรงกลาง */
}

.news-text-red1:hover {
    color: #cf0a2c;
}

.news-text-red1 {
    color: #3d3d3d;
    transition: all 0.3s ease;
}

.news-text-red1 .fa-arrow-right {
    transition: transform 0.3s ease;
    /* เพิ่ม transition เพื่อให้การเคลื่อนไหวของลูกศรสมูท */
}

.news-text-red1:hover .fa-arrow-right {
    transform: translateX(5px);
    /* ขยับลูกศรไปทางขวา 5px เมื่อ hover */
}


#detail-carousel li {
    background-color: #00000073;
    height: 5px;
    width: 50px;

}

#detail-carousel li.active {
    background-color: #cf0a2c;
}



.related-carousel .owl-nav {
    position: absolute;
    width: 76px;
    top: -52px;
    right: 0;
    display: flex;
}

.related-carousel .owl-nav .owl-prev,
.related-carousel .owl-nav .owl-next {
    margin-left: 10px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    border: 1px solid var(--secondary);
    font-size: 14px;
    transition: .3s;
}


/* CSS สำหรับจัดการสีของแต่ละ reaction */
.reaction-like {
    color: #cf0a2c; /* สีแดง */
}

.reaction-love {
    color: #e046c7; /* สีแดงเข้ม */
}

.reaction-laugh {
    color: #f1a90f; /* สีเหลือง */
}

.reaction-empathy {
    color: #4644b6; /* สีม่วง */
}

.reaction-surprise {
    color: #34db58; /* สีน้ำเงิน */
}

.reaction-wow {
    color: #ccc12e; /* สีเขียว */
}

.reaction-scary {
    color: #4d345e; /* สีเทาเข้ม */
}
.comment-add-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}







/* Base Styles */
.comment-section {
    padding: 2rem;
    background-color: #f9f9f9;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.comment-section:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.comment-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #a30823;
}

/* User Information Styles */
.name-user-comment,
.name-user-reply {
    font-weight: 500;
    color: #343a40; /* สีเข้มกว่าคอมเม้นต์ */
    transition: color 0.3s ease;
}

.comment-user-comment,
.comment-user-reply {
    color: #666; /* สีอ่อนกว่า */
    font-size: 1rem;
}

/* Reaction Styles */
.reaction-option-showonselected {
    font-size: 0.9rem;
    font-weight: 500;
    color: #6c757d;
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
    opacity: 0.8;
}

.reaction-option-showonselected:hover {
    color: #a30823;
    text-decoration: underline;
    transform: scale(1.1);
    opacity: 1;
}

/* Keyframe for ultimate cinematic bounce with shadow and unique colors */
@keyframes ultimate-cinematic-bounce {
    0% {
        transform: scale(1) rotate(0);
        box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
        filter: brightness(1);
    }
    10% {
        transform: scale(1.2) translateY(-12px) rotate(-5deg);
        box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.35);
        filter: brightness(1.2);
    }
    25% {
        transform: scale(1.15) translateY(0) rotate(3deg);
        box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.3);
        filter: brightness(1.15);
    }
    40% {
        transform: scale(1.22) translateY(-10px) rotate(-3deg);
        box-shadow: 0px 20px 35px rgba(0, 0, 0, 0.4);
        filter: brightness(1.3);
    }
    55% {
        transform: scale(1.18) translateY(0) rotate(2deg);
        box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.35);
        filter: brightness(1.2);
    }
    70% {
        transform: scale(1.1) translateY(-6px) rotate(-1deg);
        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.25);
        filter: brightness(1.1);
    }
    100% {
        transform: scale(1) rotate(0);
        box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
        filter: brightness(1);
    }
}

/* Applying cinematic bounce with specific colors on hover */
.reaction-like:hover {
    animation: ultimate-cinematic-bounce 3.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
    color: #cf0a2c;
    filter: drop-shadow(0px 0px 5px rgba(207, 10, 44, 0.5));
}

.reaction-love:hover {
    animation: ultimate-cinematic-bounce 3.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
    color: #e046c7;
    filter: drop-shadow(0px 0px 5px rgba(224, 70, 199, 0.5));
}

.reaction-laugh:hover {
    animation: ultimate-cinematic-bounce 3.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
    color: #f1a90f;
    filter: drop-shadow(0px 0px 5px rgba(241, 169, 15, 0.5));
}

.reaction-empathy:hover {
    animation: ultimate-cinematic-bounce 3.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
    color: #4644b6;
    filter: drop-shadow(0px 0px 5px rgba(70, 68, 182, 0.5));
}

.reaction-surprise:hover {
    animation: ultimate-cinematic-bounce 3.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
    color: #34db58;
    filter: drop-shadow(0px 0px 5px rgba(52, 219, 88, 0.5));
}

.reaction-wow:hover {
    animation: ultimate-cinematic-bounce 3.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
    color: #ccc12e;
    filter: drop-shadow(0px 0px 5px rgba(204, 193, 46, 0.5));
}

.reaction-scary:hover {
    animation: ultimate-cinematic-bounce 3.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
    color: #4d345e;
    filter: drop-shadow(0px 0px 5px rgba(77, 52, 94, 0.5));
}


/* Comment Input and Warnings */
.comment-form input[type="text"],
.comment-form textarea {
    border: 1px solid #d1d1d1;
    border-radius: 8px;
    padding: 10px;
    font-size: 1rem;
    color: #333;
    transition: border-color 0.3s ease;
}

.comment-form input[type="text"]:focus,
.comment-form textarea:focus {
    border-color: #a30823;
}

.comment-form .name-warning,
.comment-form .comment-warning,
.comment-form .upload-warning {
    font-size: 0.85rem;
    color: #a30823;
}

.comment-add-section p {
    color: #a30823;
}

/* Comment Form Buttons with Hover Effects */
.send-comment-toggle,
.submit-comment,
.submit-cancel {
    background-color: #a30823;
    color: white;
    font-weight: 600;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.send-comment-toggle:hover,
.submit-comment:hover,
.submit-cancel:hover {
    background-color: #8d0720;
    transform: translateY(-2px);
}

.comment-added-message {
    font-size: 1rem;
    color: #28a745;
}

/* Reaction Toggle and Option Buttons */
.reaction-toggle {
    color: #a30823;
    border: 1px solid #a30823;
    padding: 4px 12px;
    border-radius: 5px;
    font-weight: 600;
    background: none;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.reaction-toggle:hover {
    color: #fff;
    background-color: #a30823;
    transform: scale(1.1);
}

.reaction-option {
    color: #6c757d;
    font-weight: 500;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.reaction-option:hover {
    color: #a30823;
    text-decoration: underline;
    transform: translateX(3px);
}



/* Reply Form Input */
.reply-add-section .form-reply {
    border: 1px solid #d1d1d1;
    border-radius: 8px;
    padding: 8px;
    color: #333;
}

.send-reply-toggle {
    color: #a30823;
    border: 1px solid #a30823;
    padding: 4px 12px;
    border-radius: 5px;
    font-weight: 600;
    background: none;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.send-reply-toggle:hover {
    color: #fff;
    background-color: #a30823;
}




.marquee-wrapper {
    position: relative;
    height: 125px; /* Increase height if necessary */
    overflow: hidden;
    white-space: nowrap;
    background-color: #cf0a2c;
    padding-top: 20px; /* Adjust top padding */
    padding-bottom: 20px; /* Adjust bottom padding */
}

.text-slider {
    color: white;
    font-size: 80px;
    line-height: 65px;
    text-transform: capitalize;
    font-family: var(--prosto-one);
}


.marquee-inner {
    position: absolute;
    display: inline-flex;
    width: 200%;
}

.marquee-list {
    float: left;
    width: 50%;
}

.marquee-item {
    float: left;
    transition: animation 0.5s ease-out;
    color: white; /* Ensure all text within marquee items is white */
}

.marquee-item img {
    filter: brightness(0) invert(1); /* Make images appear white */
}

.marquee-inner.to-left {
    animation: marqueeLeft 30s linear infinite;
}

@keyframes marqueeLeft {
    0% {
        left: 0;
    }
    100% {
        left: -100%;
    }
}



.ebook-link:hover {
    background-color: #cf0a2c; /* เปลี่ยนสีพื้นหลังเมื่อ Hover */
    color: #ffffff !important; /* ใช้ !important เพื่อให้แน่ใจว่าสีจะเปลี่ยน */
    border-color: #cf0a2c; /* เปลี่ยนสีขอบเมื่อ Hover */
}

.ebook-link:hover i {
    color: #ffffff !important; /* ใช้ !important เพื่อให้แน่ใจว่าสีจะเปลี่ยน */
}

.container-ebook {
    position: absolute; /* ทำให้ container-ebook อยู่ในตำแหน่งที่อิงจาก .ebook-title */
    top: 50%; /* จัดให้อยู่กึ่งกลางแนวตั้ง */
    left: 58%; /* จัดให้อยู่กึ่งกลางแนวนอน */
    transform: translate(-50%, -50%); /* ปรับตำแหน่งให้กึ่งกลางจริง */
    display: flex;
    justify-content: center; /* จัดให้อยู่กึ่งกลางแนวนอน */
    align-items: center; /* จัดให้อยู่กึ่งกลางแนวตั้ง */
    flex-direction: column; /* จัดเรียงลูกในแนวตั้ง */
}

.cover-leaflet,.cover-leaflet2,.cover-leaflet3,.cover-leaflet4,.cover-leaflet5,.cover-leaflet6,.cover-leaflet7,.cover-leaflet8,.cover-leaflet9,.cover-leaflet10,.cover-leaflet11,.ebook-head1, .ebook-head2 ,.ebook-head3,.ebook-head4,.ebook-head111, .ebook-head222 ,.ebook-head333,.ebook-head444, .ebook-head5 , .ebook-head6 , .ebook-head10 , .ebook-head11,.page-number-text,.center-box2,.center-box1,.book-item-detail1,.book-item-detail2{
    white-space: nowrap; /* ป้องกันการแบ่งบรรทัด */
}
.ebook-head1 {
    font-size: 35px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #FFFFFF; /* สีตัวหนังสือ */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    bottom: 100px; /* จัดให้อยู่ล่าง */
    right: 30px; /* จัดให้อยู่ขวา */
    margin: 50px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ตัวหนังสือ */
    transition: color 0.3s ease, transform 0.3s ease; /* เพิ่ม transition */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */
}

.ebook-head111 {
    font-size: 38px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #5c3e3e; /* สีตัวหนังสือ */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    bottom: 25px; /* จัดให้อยู่ล่าง */
    right: -150px; /* จัดให้อยู่ขวา */
    margin: 75px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    text-shadow: 0 0 10px #ffffff, 0 0 15px #ffffff, 0 0 20px #5c3e3e, 0 0 25px #5c3e3e; /* เพิ่มเงารอบตัวอักษร */
    transition: color 0.3s ease, transform 0.3s ease; /* เพิ่ม transition */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */
}

.ebook-head1:hover {
    color: #FFFFFF; /* เปลี่ยนสีเมื่อ hover */
    transform: scale(1.1); /* ขยายขนาดเมื่อ hover */
} 

.ebook-head2 {
    font-size: 50px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #FFFFFF; /* สีตัวหนังสือ */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    bottom: 50px; /* จัดให้อยู่ล่าง */
    right: -50px; /* จัดให้อยู่ขวา */
    margin: 60px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    transition: color 0.3s ease, transform 0.3s ease; /* เพิ่ม transition */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */
}
.ebook-head222{
    font-size: 50px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #4d3232; /* สีตัวหนังสือ */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    bottom: 50px; /* จัดให้อยู่ล่าง */
    right: -70px; /* จัดให้อยู่ขวา */
    margin: 60px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    transition: color 0.3s ease, transform 0.3s ease; /* เพิ่ม transition */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */
}
.ebook-head2:hover {
    color: #cac0c0; /* เปลี่ยนสีเมื่อ hover */
    transform: scale(1.1); /* ขยายขนาดเมื่อ hover */
}


.ebook-title a {
    color: var(--bs-white);
    background: #cf0a2c;
    transition: 0.5s;

}
.ebook-title a:hover {
    color: #d8d8d8;
    background: #ffffff;
}
.ebook-head3 {
    font-size: 45px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #ec5252; /* สีตัวหนังสือ */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    top: -190px; /* จัดให้อยู่ด้านบน */
    right: 170px; /* จัดให้อยู่ขวา */
    margin: 20px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ตัวหนังสือ */
}
.ebook-head333 {
    font-size: 23px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #ee2525; /* สีตัวหนังสือ */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    top: -250px; /* จัดให้อยู่ด้านบน */
    right: 10px; /* จัดให้อยู่ขวา */
    margin: 20px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ตัวหนังสือ */
}

.ebook-head4 {
    font-size: 14px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #f03e3e; /* สีตัวหนังสือ */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    top: -150px; /* จัดให้อยู่ด้านบน */
    right: 130px; /* จัดให้อยู่ขวา */
    margin: 30px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ตัวหนังสือ */

    
}
.ebook-head444 {
    font-size: 18px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #111111; /* สีตัวหนังสือ */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    top: -250px; /* จัดให้อยู่ด้านบน */
    right: -50px; /* จัดให้อยู่ขวา */
    margin: 80px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ตัวหนังสือ */
}


.ebook-head5 {
    font-size: 35px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #FFFFFF; /* สีตัวหนังสือ */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    bottom: 100px; /* จัดให้อยู่ล่าง */
    right: 40px; /* จัดให้อยู่ขวา */
    margin: 50px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ตัวหนังสือ */
    transition: color 0.3s ease, transform 0.3s ease; /* เพิ่ม transition */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */
}

.ebook-head5:hover {
    color: #cac0c0; /* เปลี่ยนสีเมื่อ hover */
    transform: scale(1.1); /* ขยายขนาดเมื่อ hover */
}
.ebook-head6 {
    font-size: 50px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #FFFFFF; /* สีตัวหนังสือ */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    bottom: 50px; /* จัดให้อยู่ล่าง */
    right: -10px; /* จัดให้อยู่ขวา */
    margin: 50px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    transition: color 0.3s ease, transform 0.3s ease; /* เพิ่ม transition */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */
}
.ebook-head6:hover {
    color: #cac0c0; /* เปลี่ยนสีเมื่อ hover */
    transform: scale(1.1); /* ขยายขนาดเมื่อ hover */
}
.ebook-head7 {
    font-size: 45px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #1d6123; /* สีตัวหนังสือ */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    top: -190px; /* จัดให้อยู่ด้านบน */
    right: 35px; /* จัดให้อยู่ขวา */
    margin: 20px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ตัวหนังสือ */
}
.ebook-head8 {
    font-size: 14px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #1d6123; /* สีตัวหนังสือ */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    top: -150px; /* จัดให้อยู่ด้านบน */
    right: 200px; /* จัดให้อยู่ขวา */
    margin: 30px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ตัวหนังสือ */
}
.ebook-head9 {
    font-size: 14px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #1d6123; /* สีตัวหนังสือ */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    top: -150px; /* จัดให้อยู่ด้านบน */
    right: 80px; /* จัดให้อยู่ขวา */
    margin: 30px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ตัวหนังสือ */
}

.ebook-head10 {
    font-size: 35px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #694b13; /* สีตัวหนังสือ */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    bottom: 100px; /* จัดให้อยู่ล่าง */
    right: 40px; /* จัดให้อยู่ขวา */
    margin: 50px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ตัวหนังสือ */
    transition: color 0.3s ease, transform 0.3s ease; /* เพิ่ม transition */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */
}
.ebook-head10:hover {
    color: #cac0c0; /* เปลี่ยนสีเมื่อ hover */
    transform: scale(1.1); /* ขยายขนาดเมื่อ hover */
}
.ebook-head11{
    font-size: 50px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #694b13; /* สีตัวหนังสือ */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    bottom: 50px; /* จัดให้อยู่ล่าง */
    right: 10px; /* จัดให้อยู่ขวา */
    margin: 50px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    transition: color 0.3s ease, transform 0.3s ease; /* เพิ่ม transition */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */
}
.ebook-head11:hover {
    color: #cac0c0; /* เปลี่ยนสีเมื่อ hover */
    transform: scale(1.1); /* ขยายขนาดเมื่อ hover */
}
.ebook-head12 {
    font-size: 45px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #57442d; /* สีตัวหนังสือ */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    top: -190px; /* จัดให้อยู่ด้านบน */
    right: 150px; /* จัดให้อยู่ขวา */
    margin: 20px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ตัวหนังสือ */
}
.ebook-head13 {
    font-size: 14px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #57442d; /* สีตัวหนังสือ */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    top: -150px; /* จัดให้อยู่ด้านบน */
    right: 170px; /* จัดให้อยู่ขวา */
    margin: 30px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ตัวหนังสือ */
}
.ebook-head14 {
    font-size: 14px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #57442d; /* สีตัวหนังสือ */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    top: -150px; /* จัดให้อยู่ด้านบน */
    right: 50px; /* จัดให้อยู่ขวา */
    margin: 30px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ตัวหนังสือ */
}
.ebook-title .ebook-head1,
.ebook-title .ebook-head2,
.ebook-title .ebook-head3,
.ebook-title .ebook-head4 {
 
  white-space: nowrap; /* ไม่ให้ขึ้นบรรทัดใหม่ */
  overflow: hidden; /* ซ่อนส่วนที่เกิน */
  text-overflow: ellipsis; /* แสดง ... เมื่อข้อความเกิน */
  
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.a4-view {
    width: 60%;
    height: 80%;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.page {
    width: 48%;
    height: 90%;
    margin: 0 1%;
    background: #000000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}



.fade-in {
    animation: fadeIn 0.5s;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.ebook-link2 {
    margin-top: 240px;
    border: 1px solid white;

}
.cover-page1 {
   background-color: white;

}
.rectangleO1 {
    width: 160px; /* กำหนดความกว้าง */
    height: 25px; /* กำหนดความสูง */
    background: linear-gradient(45deg, #571313, #eb2828); /* ไล่เชดสีพื้นหลัง */
    border-radius: 0px; /* ทำให้ขอบมนเล็กน้อย */
    display: flex;
    color: white;
    align-items: center;
    justify-content: flex-start; /* จัดตัวหนังสือชิดซ้าย */
    padding-left: 10px; /* เพิ่มระยะห่างจากขอบซ้าย */
    font-size: 16px;
    font-family: Arial, sans-serif;
    font-style: italic; /* ทำให้ฟอนต์เอียง */
    font-weight: bold; /* ทำให้ฟอนต์ตัวหนา */
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    position: absolute; /* ใช้ position absolute */
    bottom: 585px; /* จัดให้อยู่ล่าง */
    right: 0; /* จัดให้อยู่ฝั่งซ้าย */
    transform: translateX(0); /* ปรับตำแหน่งให้กึ่งกลางจริง */
    background-color: lightblue;
    border-radius: 40px 0 0 0; /* โค้งเฉพาะมุมบนซ้าย */
}
.rectangleO2 {
    width: 280px; /* กำหนดความกว้าง */
    height: 25px; /* กำหนดความสูง */
    background: linear-gradient(45deg, #eb2828, #571313); /* ไล่เชดสีพื้นหลัง */
    background-color: #8944b1; /* สีพื้นหลัง */
    border-radius: 0px; /* ทำให้ขอบมนเล็กน้อย */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* จัดตัวหนังสือชิดซ้าย */
    padding-left: 10px; /* เพิ่มระยะห่างจากขอบซ้าย */
    color: white;
    font-size: 16px;
    font-family: Arial, sans-serif;
    font-style: italic; /* ทำให้ฟอนต์เอียง */
    font-weight: bold; /* ทำให้ฟอนต์ตัวหนา */
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    position: absolute; /* ใช้ position absolute */
    bottom: 560px; /* จัดให้อยู่ล่าง */
    left: 0; /* จัดให้อยู่ฝั่งซ้าย */
    transform: translateX(0); /* ปรับตำแหน่งให้กึ่งกลางจริง */
    border-radius: 0 0 40px 0; /* โค้งเฉพาะมุมบนขวา */
}
.rectangleO3 {
    width: 160px; /* กำหนดความกว้าง */
    height: 25px; /* กำหนดความสูง */
    background: linear-gradient(45deg, #571313, #eb2828); /* ไล่เชดสีพื้นหลัง */
    border-radius: 0px; /* ทำให้ขอบมนเล็กน้อย */
    display: flex;
    color: white;
    font-size: 20px;
    font-family: Arial, sans-serif;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    position: absolute; /* ใช้ position absolute */
    bottom: 40px; /* จัดให้อยู่ล่าง */
    right: 0; /* จัดให้อยู่ฝั่งซ้าย */
    transform: translateX(0); /* ปรับตำแหน่งให้กึ่งกลางจริง */
    background-color: lightblue;
    border-radius: 40px 0 0 0; /* โค้งเฉพาะมุมบนซ้าย */
}
.rectangleO4 {
    width: 280px; /* กำหนดความกว้าง */
    height: 25px; /* กำหนดความสูง */
    background: linear-gradient(45deg, #eb2828, #571313); /* ไล่เชดสีพื้นหลัง */
    background-color: #8944b1; /* สีพื้นหลัง */
    border-radius: 0px; /* ทำให้ขอบมนเล็กน้อย */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    font-family: Arial, sans-serif;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    position: absolute; /* ใช้ position absolute */
    bottom: 15px; /* จัดให้อยู่ล่าง */
    left: 0; /* จัดให้อยู่ฝั่งซ้าย */
    transform: translateX(0); /* ปรับตำแหน่งให้กึ่งกลางจริง */
    border-radius: 0 0 40px 0; /* โค้งเฉพาะมุมบนขวา */
}
.rectangle {
    width: 160px; /* กำหนดความกว้าง */
    height: 25px; /* กำหนดความสูง */
    background: linear-gradient(45deg, #5e0861, #e20dad); /* ไล่เชดสีพื้นหลัง */
    border-radius: 0px; /* ทำให้ขอบมนเล็กน้อย */
    display: flex;
    color: white;
    align-items: center;
    justify-content: flex-start; /* จัดตัวหนังสือชิดซ้าย */
    padding-left: 10px; /* เพิ่มระยะห่างจากขอบซ้าย */
    font-size: 16px;
    font-family: Arial, sans-serif;
    font-style: italic; /* ทำให้ฟอนต์เอียง */
    font-weight: bold; /* ทำให้ฟอนต์ตัวหนา */
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    position: absolute; /* ใช้ position absolute */
    bottom: 585px; /* จัดให้อยู่ล่าง */
    right: 0; /* จัดให้อยู่ฝั่งซ้าย */
    transform: translateX(0); /* ปรับตำแหน่งให้กึ่งกลางจริง */
    background-color: lightblue;
    border-radius: 20px 0 0 0; /* โค้งเฉพาะมุมบนซ้าย */
}
.rectangle1 {
    width: 280px; /* กำหนดความกว้าง */
    height: 25px; /* กำหนดความสูง */
    background: linear-gradient(45deg, #df0db1, #5a084f); /* ไล่เชดสีพื้นหลัง */
    background-color: #8944b1; /* สีพื้นหลัง */
    border-radius: 0px; /* ทำให้ขอบมนเล็กน้อย */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* จัดตัวหนังสือชิดซ้าย */
    padding-left: 10px; /* เพิ่มระยะห่างจากขอบซ้าย */
    color: white;
    font-size: 16px;
    font-family: Arial, sans-serif;
    font-style: italic; /* ทำให้ฟอนต์เอียง */
    font-weight: bold; /* ทำให้ฟอนต์ตัวหนา */
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    position: absolute; /* ใช้ position absolute */
    bottom: 560px; /* จัดให้อยู่ล่าง */
    left: 0; /* จัดให้อยู่ฝั่งซ้าย */
    transform: translateX(0); /* ปรับตำแหน่งให้กึ่งกลางจริง */
    border-radius: 0 0 20px 0; /* โค้งเฉพาะมุมบนขวา */
}
.rectangle2 {
    width: 160px; /* กำหนดความกว้าง */
    height: 25px; /* กำหนดความสูง */
    background: linear-gradient(45deg, #5e0861, #e20dad); /* ไล่เชดสีพื้นหลัง */
    border-radius: 0px; /* ทำให้ขอบมนเล็กน้อย */
    display: flex;
    color: white;
    font-size: 20px;
    font-family: Arial, sans-serif;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    position: absolute; /* ใช้ position absolute */
    bottom: 40px; /* จัดให้อยู่ล่าง */
    right: 0; /* จัดให้อยู่ฝั่งซ้าย */
    transform: translateX(0); /* ปรับตำแหน่งให้กึ่งกลางจริง */
    background-color: lightblue;
    border-radius: 20px 0 0 0; /* โค้งเฉพาะมุมบนซ้าย */
}
.rectangle3 {
    width: 280px; /* กำหนดความกว้าง */
    height: 25px; /* กำหนดความสูง */
    background: linear-gradient(45deg, #df0db1, #5a084f); /* ไล่เชดสีพื้นหลัง */
    background-color: #8944b1; /* สีพื้นหลัง */
    border-radius: 0px; /* ทำให้ขอบมนเล็กน้อย */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    font-family: Arial, sans-serif;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    position: absolute; /* ใช้ position absolute */
    bottom: 15px; /* จัดให้อยู่ล่าง */
    left: 0; /* จัดให้อยู่ฝั่งซ้าย */
    transform: translateX(0); /* ปรับตำแหน่งให้กึ่งกลางจริง */
    border-radius: 0 0 20px 0; /* โค้งเฉพาะมุมบนขวา */
}
.center-boxสินค้า1 {
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px;
    background-color: #fbfdfb;
    position: absolute;
    top: 49%;
    left: 66%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 10px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
    z-index: 999;
}
.center-boxสินค้า2 {
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px ;
    background-color: #fbfcfb;
    position: absolute;
    top: 49%;
    left: 35%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 10px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 999;
    color :#faf8f8;
}
.center-boxสินค้า3{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px ;
    background-color: #f7f7fa;
    position: absolute;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 10px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 999;
}
.center-box {
    width: 380px;
    height: 152px;
    border-radius: 20px ;
    background-color: #e2aacb;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.center-box1 {
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px;
    background-color: #5759eb;
    position: absolute;
    top: 40%;
    left: 66%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 14px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */

    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
.center-box2 {
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px ;
    background-color: #5759eb;
    position: absolute;
    top: 40%;
    left: 35%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    
}
.center-box33 {
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px ;
    background-color: #5759eb;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    
}
.page-password1
{
    top: 43%;
    text-align: left;
    position: absolute;
    bottom: 35px;
    left: 170px;
    font-size: 12px;
    color: #4e4648; /* เพิ่มสีแดง */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงา */
}  

.page-password2 {
    top: 43%;
    text-align: left;
    position: absolute;
    bottom: 35px;
    left: 240px;
    font-size: 12px;
    color: #4e4648; /* เพิ่มสีแดง */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงา */
}  
.page-password3 {
    top: 43%;
    text-align: left;
    position: absolute;
    bottom: 35px;
    left: 105px;
    font-size: 12px;
    color: #4e4648; /* เพิ่มสีแดง */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงา */
}
.page-footer-textP01 {
    text-align: left;
    position: absolute;
    bottom: 250px;
    left: 100px;
    color: #030303; /* เปลี่ยนสีอักษรเป็นสีแดง */
    font-style: italic; /* ทำให้ตัวอักษรเอียง */
    font-size: 30px; /* กำหนดขนาดตัวอักษร */
}
.page-footer-textP02 {
    text-align: left;
    position: absolute;
    bottom: 230px;
    left: 180px;
    font-size: 20px; /* กำหนดขนาดตัวอักษร */
    color: #030303; /* เปลี่ยนสีอักษรเป็นสีแดง */
    font-style: italic; /* ทำให้ตัวอักษรเอียง */
}
.page-footer-textP03 {
    text-align: left;
    position: absolute;
    bottom: 225px;
    left: 230px;
    font-style: italic; /* ทำให้ตัวอักษรเอียง */
    color: #030303; /* เปลี่ยนสีอักษรเป็นสีแดง */
    font-size: 30px; /* กำหนดขนาดตัวอักษร */
}




.page-footer-textP1 {
    text-align: left;
    position: absolute;
    bottom: 30px;
    left: 165px;
    color: #db2f2f; /* เปลี่ยนสีอักษรเป็นสีแดง */
    font-style: italic; /* ทำให้ตัวอักษรเอียง */
    font-size: 16px; /* กำหนดขนาดตัวอักษร */
}
.page-footer-textP2 {
    text-align: left;
    position: absolute;
    bottom: 10px;
    left: 290px;
    font-size: 18px; /* กำหนดขนาดตัวอักษร */
    color: #db2f2f; /* เปลี่ยนสีอักษรเป็นสีแดง */
    font-style: italic; /* ทำให้ตัวอักษรเอียง */
}
.page-footer-text2 {
    text-align: left;
    position: absolute;
    bottom: 580px;
    left: 290px;
    font-style: italic; /* ทำให้ตัวอักษรเอียง */
    color: #f8f7f8; /* เปลี่ยนสีอักษรเป็นสีแดง */
    font-size: 16px; /* กำหนดขนาดตัวอักษร */
}
.page-footer-text {
    text-align: left;
    position: absolute;
    bottom: 30px;
    left: 165px;
    color: #b32477; /* เปลี่ยนสีอักษรเป็นสีแดง */
    font-style: italic; /* ทำให้ตัวอักษรเอียง */
    font-size: 16px; /* กำหนดขนาดตัวอักษร */
}
.page-footer-text0 {
    text-align: right;
    position: absolute;
    bottom: 555px;
    right: 320px;
    font-size: 20px; /* กำหนดขนาดตัวอักษร */
    color: #f5ebf0; /* เปลี่ยนสีอักษรเป็นสีแดง */
    font-style: italic; /* ทำให้ตัวอักษรเอียง */
    
}
.page-footer-text1 {
    text-align: left;
    position: absolute;
    bottom: 10px;
    left: 290px;
    font-size: 18px; /* กำหนดขนาดตัวอักษร */
    color: #b32477; /* เปลี่ยนสีอักษรเป็นสีแดง */
    font-style: italic; /* ทำให้ตัวอักษรเอียง */
}
.page-footer-text2 {
    text-align: left;
    position: absolute;
    bottom: 580px;
    left: 290px;
    font-style: italic; /* ทำให้ตัวอักษรเอียง */
    color: #f8f7f8; /* เปลี่ยนสีอักษรเป็นสีแดง */
    font-size: 16px; /* กำหนดขนาดตัวอักษร */
}
.page-head-text11 {
    text-align: left;
    position: absolute;
    bottom: 575px;
    left: 165px;
    font-style: italic; /* ทำให้ตัวอักษรเอียง */
    color: #b32477; /* เปลี่ยนสีอักษรเป็นสีแดง */
    font-size: 16px; /* กำหนดขนาดตัวอักษร */
}
.cover-page-hard {
    background-image:('img/ebook/spkg/coverpok.png');
    background-size: cover;
    background-position: center;
}
.cover-page-hard {
    background-image:('img/ebook/spkg/ebookpok3.png');
    background-size: cover;
    background-position: center;
}
.cover-page-hard {
    background-image:('img/ebook/spkg/ebookpok2.png');
    background-size: cover;
    background-position: center;
}
.ebook-overlay-head1 {
    font-size: 35px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #FFFFFF; /* สีตัวหนังสือ */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    bottom: 100px; /* จัดให้อยู่ล่าง */
    right: 170px; /* จัดให้อยู่ขวา */
    margin: 50px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ตัวหนังสือ */
    transition: color 0.3s ease, transform 0.3s ease; /* เพิ่ม transition */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */
}
.ebook-overlay-head2 {
    font-size: 50px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #FFFFFF; /* สีตัวหนังสือ */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    bottom: 50px; /* จัดให้อยู่ล่าง */
    right: 70px; /* จัดให้อยู่ขวา */
    margin: 60px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    transition: color 0.3s ease, transform 0.3s ease; /* เพิ่ม transition */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */
}
.cover-page11  {
    background-image:('img/ebook/spkg/COVER11.png');
    background-size: cover;
    background-position: center;
}
.sarabun{
    font-size: 50px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #2e2626; /* สีตัวหนังสือ */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    bottom: 480px; /* จัดให้อยู่ล่าง */
    right: 140px; /* จัดให้อยู่ขวา */
    margin-top : 10px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    transition: color 0.3s ease, transform 0.3s ease; /* เพิ่ม transition */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */
}   
.page-footer-textcount{
    z-index: 999;   
}
.page-list {
    position: absolute;
    bottom: 120px;
    width: 100%;
    text-align: center;
    padding: 20px 0; /* Adjusted padding for more spacing */
    right: -20px;
    font-weight: 20;
    color: #030303;
}
.rectangle4 {
    width: 160px; /* กำหนดความกว้าง */
    height: 25px; /* กำหนดความสูง */
    background: linear-gradient(45deg, #e47d1c, #e2260d); /* ไล่เชดสีพื้นหลัง */
    border-radius: 0px; /* ทำให้ขอบมนเล็กน้อย */
    display: flex;
    color: white;
    align-items: center;
    justify-content: flex-start; /* จัดตัวหนังสือชิดซ้าย */
    padding-left: 10px; /* เพิ่มระยะห่างจากขอบซ้าย */
    font-size: 16px;
    font-family: Arial, sans-serif;
    font-style: italic; /* ทำให้ฟอนต์เอียง */
    font-weight: bold; /* ทำให้ฟอนต์ตัวหนา */
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    position: absolute; /* ใช้ position absolute */
    bottom: 585px; /* จัดให้อยู่ล่าง */
    right: 0; /* จัดให้อยู่ฝั่งซ้าย */
    transform: translateX(0); /* ปรับตำแหน่งให้กึ่งกลางจริง */
    background-color: lightblue;
    border-radius: 20px 0 0 0; /* โค้งเฉพาะมุมบนซ้าย */
}
.rectangle5 {
    width: 280px; /* กำหนดความกว้าง */
    height: 25px; /* กำหนดความสูง */
    background: linear-gradient(45deg, #e2260d, #e47d1c); /* ไล่เชดสีพื้นหลัง */
    background-color: #8944b1; /* สีพื้นหลัง */
    border-radius: 0px; /* ทำให้ขอบมนเล็กน้อย */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* จัดตัวหนังสือชิดซ้าย */
    padding-left: 10px; /* เพิ่มระยะห่างจากขอบซ้าย */
    color: white;
    font-size: 16px;
    font-family: Arial, sans-serif;
    font-style: italic; /* ทำให้ฟอนต์เอียง */
    font-weight: bold; /* ทำให้ฟอนต์ตัวหนา */
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    position: absolute; /* ใช้ position absolute */
    bottom: 560px; /* จัดให้อยู่ล่าง */
    left: 0; /* จัดให้อยู่ฝั่งซ้าย */
    transform: translateX(0); /* ปรับตำแหน่งให้กึ่งกลางจริง */
    border-radius: 0 0 20px 0; /* โค้งเฉพาะมุมบนขวา */
}
.rectangle6 {
    width: 160px; /* กำหนดความกว้าง */
    height: 25px; /* กำหนดความสูง */
    background: linear-gradient(45deg, #e2260d, #e47d1c); /* ไล่เชดสีพื้นหลัง */
    border-radius: 0px; /* ทำให้ขอบมนเล็กน้อย */
    display: flex;
    color: white;
    font-size: 20px;
    font-family: Arial, sans-serif;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    position: absolute; /* ใช้ position absolute */
    bottom: 40px; /* จัดให้อยู่ล่าง */
    right: 0; /* จัดให้อยู่ฝั่งซ้าย */
    transform: translateX(0); /* ปรับตำแหน่งให้กึ่งกลางจริง */
    background-color: lightblue;
    border-radius: 20px 0 0 0; /* โค้งเฉพาะมุมบนซ้าย */
}
.rectangle7 {
    width: 280px; /* กำหนดความกว้าง */
    height: 25px; /* กำหนดความสูง */
    background: linear-gradient(45deg,  #e47d1c, #e2260d); /* ไล่เชดสีพื้นหลัง */
    background-color: #8944b1; /* สีพื้นหลัง */
    border-radius: 0px; /* ทำให้ขอบมนเล็กน้อย */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    font-family: Arial, sans-serif;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    position: absolute; /* ใช้ position absolute */
    bottom: 15px; /* จัดให้อยู่ล่าง */
    left: 0; /* จัดให้อยู่ฝั่งซ้าย */
    transform: translateX(0); /* ปรับตำแหน่งให้กึ่งกลางจริง */
    border-radius: 0 0 20px 0; /* โค้งเฉพาะมุมบนขวา */
}
.rectangle8 {
    width: 160px; /* กำหนดความกว้าง */
    height: 25px; /* กำหนดความสูง */
    background: linear-gradient(45deg, #3d0463, #9e11d6); /* ไล่เชดสีพื้นหลัง */
    border-radius: 0px; /* ทำให้ขอบมนเล็กน้อย */
    display: flex;
    color: white;
    align-items: center;
    justify-content: flex-start; /* จัดตัวหนังสือชิดซ้าย */
    padding-left: 10px; /* เพิ่มระยะห่างจากขอบซ้าย */
    font-size: 16px;
    font-family: Arial, sans-serif;
    font-style: italic; /* ทำให้ฟอนต์เอียง */
    font-weight: bold; /* ทำให้ฟอนต์ตัวหนา */
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    position: absolute; /* ใช้ position absolute */
    bottom: 585px; /* จัดให้อยู่ล่าง */
    right: 0; /* จัดให้อยู่ฝั่งซ้าย */
    transform: translateX(0); /* ปรับตำแหน่งให้กึ่งกลางจริง */
    background-color: lightblue;
    border-radius: 20px 0 0 0; /* โค้งเฉพาะมุมบนซ้าย */
}
.rectangle9 {
    width: 280px; /* กำหนดความกว้าง */
    height: 25px; /* กำหนดความสูง */
    background: linear-gradient(45deg, #9e11d6, #3d0463); /* ไล่เชดสีพื้นหลัง */
    background-color: #8944b1; /* สีพื้นหลัง */
    border-radius: 0px; /* ทำให้ขอบมนเล็กน้อย */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* จัดตัวหนังสือชิดซ้าย */
    padding-left: 10px; /* เพิ่มระยะห่างจากขอบซ้าย */
    color: white;
    font-size: 16px;
    font-family: Arial, sans-serif;
    font-style: italic; /* ทำให้ฟอนต์เอียง */
    font-weight: bold; /* ทำให้ฟอนต์ตัวหนา */
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    position: absolute; /* ใช้ position absolute */
    bottom: 560px; /* จัดให้อยู่ล่าง */
    left: 0; /* จัดให้อยู่ฝั่งซ้าย */
    transform: translateX(0); /* ปรับตำแหน่งให้กึ่งกลางจริง */
    border-radius: 0 0 20px 0; /* โค้งเฉพาะมุมบนขวา */
}
.rectangle10 {
    width: 160px; /* กำหนดความกว้าง */
    height: 25px; /* กำหนดความสูง */
    background: linear-gradient(45deg, #9e11d6, #3d0463); /* ไล่เชดสีพื้นหลัง */
    border-radius: 0px; /* ทำให้ขอบมนเล็กน้อย */
    display: flex;
    color: white;
    font-size: 20px;
    font-family: Arial, sans-serif;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    position: absolute; /* ใช้ position absolute */
    bottom: 40px; /* จัดให้อยู่ล่าง */
    right: 0; /* จัดให้อยู่ฝั่งซ้าย */
    transform: translateX(0); /* ปรับตำแหน่งให้กึ่งกลางจริง */
    background-color: lightblue;
    border-radius: 20px 0 0 0; /* โค้งเฉพาะมุมบนซ้าย */
}
.rectangle11 {
    width: 280px; /* กำหนดความกว้าง */
    height: 25px; /* กำหนดความสูง */
    background: linear-gradient(45deg,  #3d0463, #9e11d6); /* ไล่เชดสีพื้นหลัง */
    background-color: #8944b1; /* สีพื้นหลัง */
    border-radius: 0px; /* ทำให้ขอบมนเล็กน้อย */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    font-family: Arial, sans-serif;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    position: absolute; /* ใช้ position absolute */
    bottom: 15px; /* จัดให้อยู่ล่าง */
    left: 0; /* จัดให้อยู่ฝั่งซ้าย */
    transform: translateX(0); /* ปรับตำแหน่งให้กึ่งกลางจริง */
    border-radius: 0 0 20px 0; /* โค้งเฉพาะมุมบนขวา */
}
.rectangle12 {
    width: 160px; /* กำหนดความกว้าง */
    height: 25px; /* กำหนดความสูง */
    background: linear-gradient(45deg, #929beb, #1156d6); /* ไล่เชดสีพื้นหลัง */
    border-radius: 0px; /* ทำให้ขอบมนเล็กน้อย */
    display: flex;
    color: white;
    align-items: center;
    justify-content: flex-start; /* จัดตัวหนังสือชิดซ้าย */
    padding-left: 10px; /* เพิ่มระยะห่างจากขอบซ้าย */
    font-size: 16px;
    font-family: Arial, sans-serif;
    font-style: italic; /* ทำให้ฟอนต์เอียง */
    font-weight: bold; /* ทำให้ฟอนต์ตัวหนา */
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    position: absolute; /* ใช้ position absolute */
    bottom: 585px; /* จัดให้อยู่ล่าง */
    right: 0; /* จัดให้อยู่ฝั่งซ้าย */
    transform: translateX(0); /* ปรับตำแหน่งให้กึ่งกลางจริง */
    background-color: lightblue;
    border-radius: 20px 0 0 0; /* โค้งเฉพาะมุมบนซ้าย */
}
.rectangle13{
    width: 280px; /* กำหนดความกว้าง */
    height: 25px; /* กำหนดความสูง */
    background: linear-gradient(45deg, #1156d6, #929beb); /* ไล่เชดสีพื้นหลัง */
    background-color: #8944b1; /* สีพื้นหลัง */
    border-radius: 0px; /* ทำให้ขอบมนเล็กน้อย */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* จัดตัวหนังสือชิดซ้าย */
    padding-left: 10px; /* เพิ่มระยะห่างจากขอบซ้าย */
    color: white;
    font-size: 14px;
    font-family: Arial, sans-serif;
    font-style: italic; /* ทำให้ฟอนต์เอียง */
    font-weight: bold; /* ทำให้ฟอนต์ตัวหนา */
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    position: absolute; /* ใช้ position absolute */
    bottom: 560px; /* จัดให้อยู่ล่าง */
    left: 0; /* จัดให้อยู่ฝั่งซ้าย */
    transform: translateX(0); /* ปรับตำแหน่งให้กึ่งกลางจริง */
    border-radius: 0 0 20px 0; /* โค้งเฉพาะมุมบนขวา */
}
.rectangle14 {
    width: 160px; /* กำหนดความกว้าง */
    height: 25px; /* กำหนดความสูง */
    background: linear-gradient(45deg, #1156d6, #929beb); /* ไล่เชดสีพื้นหลัง */
    border-radius: 0px; /* ทำให้ขอบมนเล็กน้อย */
    display: flex;
    color: white;
    font-size: 20px;
    font-family: Arial, sans-serif;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    position: absolute; /* ใช้ position absolute */
    bottom: 40px; /* จัดให้อยู่ล่าง */
    right: 0; /* จัดให้อยู่ฝั่งซ้าย */
    transform: translateX(0); /* ปรับตำแหน่งให้กึ่งกลางจริง */
    background-color: lightblue;
    border-radius: 20px 0 0 0; /* โค้งเฉพาะมุมบนซ้าย */
}
.rectangle15
{
    width: 280px; /* กำหนดความกว้าง */
    height: 25px; /* กำหนดความสูง */
    background: linear-gradient(45deg,  #929beb, #1156d6); /* ไล่เชดสีพื้นหลัง */
    background-color: #8944b1; /* สีพื้นหลัง */
    border-radius: 0px; /* ทำให้ขอบมนเล็กน้อย */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    font-family: Arial, sans-serif;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    position: absolute; /* ใช้ position absolute */
    bottom: 15px; /* จัดให้อยู่ล่าง */
    left: 0; /* จัดให้อยู่ฝั่งซ้าย */
    transform: translateX(0); /* ปรับตำแหน่งให้กึ่งกลางจริง */
    border-radius: 0 0 20px 0; /* โค้งเฉพาะมุมบนขวา */
}
.rectangle16 {
    width: 160px; /* กำหนดความกว้าง */
    height: 25px; /* กำหนดความสูง */
    background: linear-gradient(45deg, #206d40, #53ce90); /* ไล่เชดสีพื้นหลัง */
    border-radius: 0px; /* ทำให้ขอบมนเล็กน้อย */
    display: flex;
    color: white;
    align-items: center;
    justify-content: flex-start; /* จัดตัวหนังสือชิดซ้าย */
    padding-left: 10px; /* เพิ่มระยะห่างจากขอบซ้าย */
    font-size: 16px;
    font-family: Arial, sans-serif;
    font-style: italic; /* ทำให้ฟอนต์เอียง */
    font-weight: bold; /* ทำให้ฟอนต์ตัวหนา */
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    position: absolute; /* ใช้ position absolute */
    bottom: 585px; /* จัดให้อยู่ล่าง */
    right: 0; /* จัดให้อยู่ฝั่งซ้าย */
    transform: translateX(0); /* ปรับตำแหน่งให้กึ่งกลางจริง */
    background-color: lightblue;
    border-radius: 20px 0 0 0; /* โค้งเฉพาะมุมบนซ้าย */
}
.rectangle17{
    width: 280px; /* กำหนดความกว้าง */
    height: 25px; /* กำหนดความสูง */
    background: linear-gradient(45deg, #53ce90, #206d40); /* ไล่เชดสีพื้นหลัง */
    background-color: #8944b1; /* สีพื้นหลัง */
    border-radius: 0px; /* ทำให้ขอบมนเล็กน้อย */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* จัดตัวหนังสือชิดซ้าย */
    padding-left: 10px; /* เพิ่มระยะห่างจากขอบซ้าย */
    color: white;
    font-size: 14px;
    font-family: Arial, sans-serif;
    font-style: italic; /* ทำให้ฟอนต์เอียง */
    font-weight: bold; /* ทำให้ฟอนต์ตัวหนา */
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    position: absolute; /* ใช้ position absolute */
    bottom: 560px; /* จัดให้อยู่ล่าง */
    left: 0; /* จัดให้อยู่ฝั่งซ้าย */
    transform: translateX(0); /* ปรับตำแหน่งให้กึ่งกลางจริง */
    border-radius: 0 0 20px 0; /* โค้งเฉพาะมุมบนขวา */
}
.rectangle18 {
    width: 160px; /* กำหนดความกว้าง */
    height: 25px; /* กำหนดความสูง */
    background: linear-gradient(45deg, #206d40, #53ce90); /* ไล่เชดสีพื้นหลัง */
    border-radius: 0px; /* ทำให้ขอบมนเล็กน้อย */
    display: flex;
    color: white;
    font-size: 20px;
    font-family: Arial, sans-serif;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    position: absolute; /* ใช้ position absolute */
    bottom: 40px; /* จัดให้อยู่ล่าง */
    right: 0; /* จัดให้อยู่ฝั่งซ้าย */
    transform: translateX(0); /* ปรับตำแหน่งให้กึ่งกลางจริง */
    background-color: lightblue;
    border-radius: 20px 0 0 0; /* โค้งเฉพาะมุมบนซ้าย */
}
.rectangle19
{
    width: 280px; /* กำหนดความกว้าง */
    height: 25px; /* กำหนดความสูง */
    background: linear-gradient(45deg,  #53ce90, #206d40); /* ไล่เชดสีพื้นหลัง */
    background-color: #8944b1; /* สีพื้นหลัง */
    border-radius: 0px; /* ทำให้ขอบมนเล็กน้อย */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    font-family: Arial, sans-serif;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    position: absolute; /* ใช้ position absolute */
    bottom: 15px; /* จัดให้อยู่ล่าง */
    left: 0; /* จัดให้อยู่ฝั่งซ้าย */
    transform: translateX(0); /* ปรับตำแหน่งให้กึ่งกลางจริง */
    border-radius: 0 0 20px 0; /* โค้งเฉพาะมุมบนขวา */
}
.rectangle20 {
    width: 160px; /* กำหนดความกว้าง */
    height: 25px; /* กำหนดความสูง */
    background: linear-gradient(45deg, #15f3f3, #1a6379); /* ไล่เชดสีพื้นหลัง */
    border-radius: 0px; /* ทำให้ขอบมนเล็กน้อย */
    display: flex;
    color: white;
    align-items: center;
    justify-content: flex-start; /* จัดตัวหนังสือชิดซ้าย */
    padding-left: 10px; /* เพิ่มระยะห่างจากขอบซ้าย */
    font-size: 16px;
    font-family: Arial, sans-serif;
    font-style: italic; /* ทำให้ฟอนต์เอียง */
    font-weight: bold; /* ทำให้ฟอนต์ตัวหนา */
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    position: absolute; /* ใช้ position absolute */
    bottom: 585px; /* จัดให้อยู่ล่าง */
    right: 0; /* จัดให้อยู่ฝั่งซ้าย */
    transform: translateX(0); /* ปรับตำแหน่งให้กึ่งกลางจริง */
    background-color: lightblue;
    border-radius: 20px 0 0 0; /* โค้งเฉพาะมุมบนซ้าย */
}
.rectangle21{
    width: 280px; /* กำหนดความกว้าง */
    height: 25px; /* กำหนดความสูง */
    background: linear-gradient(45deg, #1a6379, #15f3f3); /* ไล่เชดสีพื้นหลัง */
    background-color: #8944b1; /* สีพื้นหลัง */
    border-radius: 0px; /* ทำให้ขอบมนเล็กน้อย */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* จัดตัวหนังสือชิดซ้าย */
    padding-left: 10px; /* เพิ่มระยะห่างจากขอบซ้าย */
    color: white;
    font-size: 14px;
    font-family: Arial, sans-serif;
    font-style: italic; /* ทำให้ฟอนต์เอียง */
    font-weight: bold; /* ทำให้ฟอนต์ตัวหนา */
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    position: absolute; /* ใช้ position absolute */
    bottom: 560px; /* จัดให้อยู่ล่าง */
    left: 0; /* จัดให้อยู่ฝั่งซ้าย */
    transform: translateX(0); /* ปรับตำแหน่งให้กึ่งกลางจริง */
    border-radius: 0 0 20px 0; /* โค้งเฉพาะมุมบนขวา */
}
.rectangle22 {
    width: 160px; /* กำหนดความกว้าง */
    height: 25px; /* กำหนดความสูง */
    background: linear-gradient(45deg,  #15f3f3, #1a6379); /* ไล่เชดสีพื้นหลัง */
    border-radius: 0px; /* ทำให้ขอบมนเล็กน้อย */
    display: flex;
    color: white;
    font-size: 20px;
    font-family: Arial, sans-serif;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    position: absolute; /* ใช้ position absolute */
    bottom: 40px; /* จัดให้อยู่ล่าง */
    right: 0; /* จัดให้อยู่ฝั่งซ้าย */
    transform: translateX(0); /* ปรับตำแหน่งให้กึ่งกลางจริง */
    background-color: lightblue;
    border-radius: 20px 0 0 0; /* โค้งเฉพาะมุมบนซ้าย */
}
.rectangle23
{
    width: 280px; /* กำหนดความกว้าง */
    height: 25px; /* กำหนดความสูง */
    background: linear-gradient(45deg,  #1a6379, #15f3f3); /* ไล่เชดสีพื้นหลัง */
    background-color: #8944b1; /* สีพื้นหลัง */
    border-radius: 0px; /* ทำให้ขอบมนเล็กน้อย */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    font-family: Arial, sans-serif;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    position: absolute; /* ใช้ position absolute */
    bottom: 15px; /* จัดให้อยู่ล่าง */
    left: 0; /* จัดให้อยู่ฝั่งซ้าย */
    transform: translateX(0); /* ปรับตำแหน่งให้กึ่งกลางจริง */
    border-radius: 0 0 20px 0; /* โค้งเฉพาะมุมบนขวา */
}
.center-box03{
    width: 380px;
    height: 150px;
    border-radius: 20px ;
    background-color: #e79e5a;
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.center-box3{
    width: 380px;
    height: 150px;
    border-radius: 20px ;
    background-color: #e79e5a;
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


.center-box4 {
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px;
    background-color: #f55134;
    position: absolute;
    top: 40%;
    left: 66%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 14px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
.center-box44{
    width: 380px;
    height: 150px;
    border-radius: 20px ;
    background-color: #aa9cdd;
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.center-box45{
    width: 385px;
    height: 150px;
    border-radius: 20px ;
    background-color: #8ebddd;
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.center-box455{
    width: 385px;
    height: 150px;
    border-radius: 20px ;
    background-color: #8ebddd;
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.center-box46{
    width: 385px;
    height: 150px;
    border-radius: 20px ;
    background-color: hsl(130, 44%, 67%);
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    
}
.center-box47{
    width: 385px;
    height: 150px;
    border-radius: 20px ;
    background-color: hsl(194, 51%, 65%);
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    
}
.center-box477{
    width: 385px;
    height: 150px;
    border-radius: 20px ;
    background-color: hsl(194, 51%, 65%);
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    
}

.center-box5 {
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px;
    background-color: #f55134;
    position: absolute;
    top: 40%;
    left: 35%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 14px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
.center-box55{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px ;
    background-color: #f55134;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.center-box6 {
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px;
    background-color: #a12cb1;
    position: absolute;
    top: 40%;
    left: 35%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 14px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
.center-box7{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px;
    background-color: #a72ea1;
    position: absolute;
    top: 40%;
    left: 66%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 14px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
.center-box8 {
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px;
    background-color: #a12cb1;
    position: absolute;
    top: 40%;
    left: 35%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 14px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
.center-box9{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px;
    background-color: #a72ea1;
    position: absolute;
    top: 40%;
    left: 66%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 14px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
.center-box111 {
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px;
    background-color: #a2b1e4;
    position: absolute;
    top: 40%;
    left: 35%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 14px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
.center-box222{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px;
    background-color: #a2b1e4;
    position: absolute;
    top: 40%;
    left: 66%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 14px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
.center-box66{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px ;
    background-color: #5f1a74;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.center-box77{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px ;
    background-color: #9e9ddd;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.center-box88{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px ;
    background-color: #3a8f4d;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.center-box89{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px ;
    background-color: #a2b1e4;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.page-footer-text4 {
    text-align: left;
    position: absolute;
    bottom: 30px;
    left: 165px;
    color: hsl(17, 97%, 50%); /* เปลี่ยนสีอักษรเป็นสีแดง */
    font-style: italic; /* ทำให้ตัวอักษรเอียง */
    font-size: 16px; /* กำหนดขนาดตัวอักษร */
}
.page-footer-text5{
    text-align: right;
    position: absolute;
    bottom: 555px;
    right: 320px;
    font-size: 20px; /* กำหนดขนาดตัวอักษร */
    color: #f5ebf0; /* เปลี่ยนสีอักษรเป็นสีแดง */
    font-style: italic; /* ทำให้ตัวอักษรเอียง */
}
.page-footer-text55{
    text-align: right;
    position: absolute;
    bottom: 555px;
    right: 320px;
    font-size: 20px; /* กำหนดขนาดตัวอักษร */
    color: #f5ebf0; /* เปลี่ยนสีอักษรเป็นสีแดง */
    font-style: italic; /* ทำให้ตัวอักษรเอียง */
}
.page-footer-text6 {
    text-align: left;
    position: absolute;
    bottom: 10px;
    left: 290px;
    font-size: 18px; /* กำหนดขนาดตัวอักษร */
    color: #ff3d02; /* เปลี่ยนสีอักษรเป็นสีแดง */
    font-style: italic; /* ทำให้ตัวอักษรเอียง */
}
.page-footer-text7 {
    text-align: left;
    position: absolute;
    bottom: 580px;
    left: 290px;
    font-style: italic; /* ทำให้ตัวอักษรเอียง */
    color: #f8f7f8; /* เปลี่ยนสีอักษรเป็นสีแดง */
    font-size: 16px; /* กำหนดขนาดตัวอักษร */
}
.page-footer-text8 {
    text-align: left;
    position: absolute;
    bottom: 30px;
    left: 165px;
    color: hsl(304, 23%, 47%); /* เปลี่ยนสีอักษรเป็นสีแดง */
    font-style: italic; /* ทำให้ตัวอักษรเอียง */
    font-size: 16px; /* กำหนดขนาดตัวอักษร */
}
.page-footer-text88{
    text-align: left;
    position: absolute;
    bottom: 10px;
    left: 290px;
    font-size: 18px; /* กำหนดขนาดตัวอักษร */
    color: #654a91; /* เปลี่ยนสีอักษรเป็นสีแดง */
    font-style: italic; /* ทำให้ตัวอักษรเอียง */
}
.page-footer-text9 {
    text-align: left;
    position: absolute;
    bottom: 30px;
    left: 165px;
    color: hsl(258, 83%, 48%); /* เปลี่ยนสีอักษรเป็นสีแดง */
    font-style: italic; /* ทำให้ตัวอักษรเอียง */
    font-size: 16px; /* กำหนดขนาดตัวอักษร */
}
.page-footer-text99{
    text-align: left;
    position: absolute;
    bottom: 10px;
    left: 290px;
    font-size: 18px; /* กำหนดขนาดตัวอักษร */
    color: #2510e0; /* เปลี่ยนสีอักษรเป็นสีแดง */
    font-style: italic; /* ทำให้ตัวอักษรเอียง */
}
.page-footer-text10 {
    text-align: left;
    position: absolute;
    bottom: 30px;
    left: 165px;
    color: hsl(135, 58%, 36%); /* เปลี่ยนสีอักษรเป็นสีแดง */
    font-style: italic; /* ทำให้ตัวอักษรเอียง */
    font-size: 16px; /* กำหนดขนาดตัวอักษร */
}
.page-footer-text00{
    text-align: left;
    position: absolute;
    bottom: 10px;
    left: 290px;
    font-size: 18px; /* กำหนดขนาดตัวอักษร */
    color: #2d8b41; /* เปลี่ยนสีอักษรเป็นสีแดง */
    font-style: italic; /* ทำให้ตัวอักษรเอียง */
}
.page-footer-text11 {
    text-align: left;
    position: absolute;
    bottom: 30px;
    left: 165px;
    color: hsl(210, 100%, 50%); /* เปลี่ยนสีอักษรเป็นสีฟ้า */
    font-style: italic; /* ทำให้ตัวอักษรเอียง */
    font-size: 16px; /* กำหนดขนาดตัวอักษร */
}
.page-footer-text01 {
    text-align: left;
    position: absolute;
    bottom: 10px;
    left: 290px;
    font-size: 18px; /* กำหนดขนาดตัวอักษร */
    color: #007bff; /* เปลี่ยนสีอักษรเป็นสีฟ้า */
    font-style: italic; /* ทำให้ตัวอักษรเอียง */
}
.page-head-text1 {
    text-align: left;
    position: absolute;
    bottom: 575px;
    left: 165px;
    font-style: italic; /* ทำให้ตัวอักษรเอียง */
    color: #ff2802; /* เปลี่ยนสีอักษรเป็นสีแดง */
    font-size: 16px; /* กำหนดขนาดตัวอักษร */
}
.page-head-text2{
    text-align: left;
    position: absolute;
    bottom: 575px;
    left: 115px;
    font-style: italic; /* ทำให้ตัวอักษรเอียง */
    color: #8a4a91; /* เปลี่ยนสีอักษรเป็นสีแดง */
    font-size: 16px; /* กำหนดขนาดตัวอักษร */
}
.page-head-text3{
    text-align: left;
    position: absolute;
    bottom: 575px;
    left: 90px;
    font-style: italic; /* ทำให้ตัวอักษรเอียง */
    color: #5c33ce; /* เปลี่ยนสีอักษรเป็นสีแดง */
    font-size: 16px; /* กำหนดขนาดตัวอักษร */

}
.page-head-text4{
    text-align: left;
    position: absolute;
    bottom: 575px;
    left: 220px;
    font-style: italic; /* ทำให้ตัวอักษรเอียง */
    color: #1f8535; /* เปลี่ยนสีอักษรเป็นสีแดง */
    font-size: 16px; /* กำหนดขนาดตัวอักษร */
}
.page-head-text5{
    text-align: left;
    position: absolute;
    bottom: 575px;
    left: 120px;
    font-style: italic; /* ทำให้ตัวอักษรเอียง */
    color: hsl(210, 100%, 50%); /* เปลี่ยนสีอักษรเป็นสีฟ้า */
    font-size: 16px; /* กำหนดขนาดตัวอักษร */
}
.book-item-detail1 {
    z-index: 99;
    text-align: center;
}
.book-item-detail2 {
    z-index: 99;
    text-align: center;
}
.book-item-detail4 {
    z-index: 99;
    text-align: center;
}
.cover-pok1 {
    background: linear-gradient(to right, #ffffff 50%, #d3d3d3 50%); /* แบ่งครึ่งหน้ากระดาษเป็นสีขาวและสีเทาอ่อน */
    border: 0px solid #000000; /* ขอบสีดำ */
    border-radius: 0px; /* ขอบมน */
    padding: 10px; /* ระยะห่างภายใน */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* เงา */
}

.boxhead {
    position: absolute;
    top: 4px;
    right: 20px;
    width: 90px;
    height: 20px;
    background-color: #FF6600;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
}
.boxhead2 {
    position: absolute;
    top: 338px;
    right: 20px;
    width: 90px;
    height: 20px;
    background-color: #FF6600;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
}
.ponramia {
    margin-top: 30px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 20px; /* เพิ่มระยะห่างจากขอบล่าง */
}
.ponramia1 {
    position: absolute;
    top: 10px; /* ระยะห่างจากขอบบน */
    right: 120px; /* ระยะห่างจากขอบขวา */
    margin-top: 30px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 20px; /* เพิ่มระยะห่างจากขอบล่าง */
}
.ponramia2 {
    position: absolute;
    top: 0px; /* ระยะห่างจากขอบบน */
    right: 310px; /* ระยะห่างจากขอบขวา */
    margin-top: 0px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 0px; /* เพิ่มระยะห่างจากขอบล่าง */
}

.double-line,.double-line1,.double-line2,.double-line22,.double-line3,.double-line33 ,.double-line4,.double-line44,.double-line5,.double-line55,.double-line6::before,.double-line66::before,.double-line01,.double-line011,.double-line02,.double-line022,.double-line03,.double-line033 ,.double-line04,.double-line044,.double-line05,.double-line055,.double-line06::before,.double-line066::before{
    position: relative;
    height: 0px; /* ความสูงของกล่อง */
    margin: 30px ; /* เว้นระยะด้านบนและล่าง */
}
/* เส้น */
.double-line::before, .double-line::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 65px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 20px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: 185px;
}
.double-line1::before, .double-line1::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 85px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 30px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: 185px;
}
.double-line2::before, .double-line2::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 155px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 80px; /* เพิ่มระยะห่างจากขอบล่าง */
    right:185px;
}
.double-line22::before, .double-line22::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 175px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 60px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: 185px;
}
.double-line3::before, .double-line3::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 245px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 80px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: 185px;
}
.double-line33::before, .double-line33::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 265px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 60px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: 185px;
}
.double-line4::before, .double-line4::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 340px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 80px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: 185px;
}
.double-line44::before, .double-line44::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 360px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 60px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: 185px;
}
.double-line5::before, .double-line5::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 435px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 80px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: 185px;
}
.double-line55::before, .double-line55::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 455px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 60px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: 185px;
}
.double-line6::before, .double-line6::after {
    content: '';
    position: absolute;
    width: 22%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 540px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 90px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: 225px;
}
.double-line66::before, .double-line66::after {
    content: '';
    position: absolute;
    width: 22%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 560px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 60px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: 225px;
}
.double-line01::before, .double-line01::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 85px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 20px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: -34px;
}
.double-line011::before, .double-line011::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 65px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 30px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: -34px;
}
.double-line02::before, .double-line02::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 155px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 80px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: -34px;
}
.double-line022::before, .double-line022::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 175px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 60px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: -34px;
}
.double-line03::before, .double-line03::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 245px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 80px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: -34px;
}
.double-line033::before, .double-line033::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 265px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 60px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: -34px;
}
.double-line04::before, .double-line04::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 340px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 80px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: -34px;
}
.double-line044::before, .double-line044::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 360px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 60px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: -34px;
}
.double-line05::before, .double-line05::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 435px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 80px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: -34px;
}
.double-line055::before, .double-line055::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 455px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 60px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: -34px;
}
.double-line06::before, .double-line06::after {
    content: '';
    position: absolute;
    width: 22%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 540px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 90px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: 5px;
}
.double-line066::before, .double-line066::after {

    content: '';
    position: absolute;
    width: 22%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 560px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 60px; /* เพิ่มระยะห่างจากขอบล่าง */
    right:5px;
}
/* ชื่อยา */
.cover-leaflet{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 10%;
    left: 35%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    
    color: black;
}
.cover-leaflet1{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 25%;
    left: 35%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    
    color: black;
}
.cover-leaflet2{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 40%;
    left: 35%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    
    color: black;
}
.cover-leaflet3{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 55%;
    left: 35%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    
    color: black;
}
.cover-leaflet4{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 71%;
    left: 35%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    
    color: black;
}
.cover-leaflet5{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 87%;
    left: 35%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    
    color: black;
}
.cover-leaflet6{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 10%;
    left: 83%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    
    color: black;
}
.cover-leaflet7{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 25%;
    left: 85%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    
    color: black;
}
.cover-leaflet8{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 40%;
    left: 85%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    
    color: black;
}
.cover-leaflet9{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 55%;
    left: 85%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    
    color: black;
}
.cover-leaflet10{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 71%;
    left: 85%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    
    color: black;
}
.cover-leaflet11{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 87%;
    left: 85%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    
    color: black;
}
/* อัตรา */
.box-อัตราการใช้1{
    position: absolute;
    top: 108px;
    right: 300px;
    width: 50px;
    height: 15px;
    background-color: #000000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 7px;
    text-align: center;

}
.box-อัตราการใช้2{
    position: absolute;
    top: 198px;
    right: 300px;
    width: 50px;
    height: 15px;
    background-color: #000000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 7px;
    text-align: center;
}
.box-อัตราการใช้3{
    position: absolute;
    top: 288px;
    right: 300px;
    width: 50px;
    height: 15px;
    background-color: #000000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 7px;
    text-align: center;

}
.box-อัตราการใช้4{
    position: absolute;
    top: 383px;
    right: 300px;
    width: 50px;
    height: 15px;
    background-color: #000000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 7px;
    text-align: center;

}
.box-อัตราการใช้5{
    position: absolute;
    top: 478px;
    right: 300px;
    width: 50px;
    height: 15px;
    background-color: #000000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 7px;
    text-align: center;

}
.box-อัตราการใช้6{
    position: absolute;
    top: 583px;
    right: 301px;
    width: 50px;
    height: 15px;
    background-color: #000000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 7px;
    text-align: center;

}
.box-อัตราการใช้7{
    position: absolute;
    top: 108px;
    right: 79px;
    width: 50px;
    height: 15px;
    background-color:  #f55134;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 7px;
    text-align: center;

}
.box-อัตราการใช้8{
    position: absolute;
    top: 198px;
    right: 79px;
    width: 50px;
    height: 15px;
    background-color:  #f55134;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 7px;
    text-align: center;
}
.box-อัตราการใช้9{
    position: absolute;
    top: 288px;
    right: 79px;
    width: 50px;
    height: 15px;
    background-color: #f55134;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 7px;
    text-align: center;

}
.box-อัตราการใช้10{
    position: absolute;
    top: 383px;
    right: 79px;
    width: 50px;
    height: 15px;
    background-color:  #f55134;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 7px;
    text-align: center;

}
.box-อัตราการใช้11{
    position: absolute;
    top: 478px;
    right: 79px;
    width: 50px;
    height: 15px;
    background-color:  #f55134;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 7px;
    text-align: center;

}
.box-อัตราการใช้12{
    position: absolute;
    top: 583px;
    right: 81px;
    width: 50px;
    height: 15px;
    background-color: #f55134;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 7px;
    text-align: center;

}
/* ซีซี */
.box-ซีซี1{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 115px;
    left: 40%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px;
    
    color: black;
}
.box-ซีซี2{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 205px;
    left: 40%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px;
    color: black;
}
.box-ซีซี3{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 295px;
    left: 40%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px;
    color: black;
}
.box-ซีซี4{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 390px;
    left: 40%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px;
    color: black;
}
.box-ซีซี5{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 485px;
    left: 40%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px;
    color: black;
}
.box-ซีซี5{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 590px;
    left: 40%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px;
    color: black;
}
.box-ซีซี6{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 115px;
    left: 90.5%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px;
    color: black;
    white-space: nowrap; /* ป้องกันการแบ่งบรรทัด */
}
.box-ซีซี7{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 205px;
    left: 90.5%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px;
    color: black;
    white-space: nowrap; /* ป้องกันการแบ่งบรรทัด */
}
.box-ซีซี8{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 295px;
    left: 90.5%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px;
    color: black;
    white-space: nowrap; /* ป้องกันการแบ่งบรรทัด */
}
.box-ซีซี9{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 390px;
    left: 90.5%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px;
    color: black;
    white-space: nowrap; /* ป้องกันการแบ่งบรรทัด */
}
.box-ซีซี10{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 485px;
    left: 40%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px;
    color: black;
    white-space: nowrap; /* ป้องกันการแบ่งบรรทัด */
}
.box-ซีซี11{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 485px;
    left: 90.5%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px;
    color: black;
    white-space: nowrap; /* ป้องกันการแบ่งบรรทัด */
}
.box-ซีซี12{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top:590px;
    left: 90.5%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px;
    color: black;
    white-space: nowrap; /* ป้องกันการแบ่งบรรทัด */
}

.empty-rectangle1,.empty-rectangle2,.empty-rectangle3,.empty-rectangle4,.empty-rectangle5,.empty-rectangle6
 {
    margin-top: 75px; /* ขยับลงจากขอบบน */
    width: 280px;
    margin-left: 140px; /* ขยับไปทางขวา */
    height: 85px;
    border: 2px solid black; /* เส้นขอบ */
    background-color: transparent; /* ว่างเปล่า */
    margin-bottom: -70px;
  }
  .talung1 {
      margin-left: 5px; /* ขยับไปทางขวา */
      width: 110px;
      height: 580px;
      border: 3px solid white;
      margin: 20px;
      position: absolute; /* ให้ตำแหน่งเป็น absolute */
      top: 0%; /* กำหนดตำแหน่งจากด้านบน */
      left: -3%; /* กำหนดตำแหน่งจากด้านซ้าย */
      z-index: 9999; /* ทำให้กล่องอยู่หน้าองค์ประกอบอื่น */
  }
  .boxhead01 {
    position: absolute;
    top: 0px;
    right: 20px;
    width: 260px;
    height: 60px;
    background-color: #FF6600;
    border-radius: 0px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: bold;
    font-size: 25px;
    text-align: center;
    font-style: italic;
    text-shadow: 1px 1px 2px #000000;
}
.talung-box1{ 
    width: 35px;
    height: 15px;
    border-radius: 20px ;
    background-color: #5759eb;
    position: absolute;
    top: 24%;
    left: 52%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    
}
.talung-box2{
    width: 54px;
    height: 15px;
    border-radius: 20px ;
    background-color: #5759eb;
    position: absolute;
    top: 24%;
    left: 65%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.talung-box3{
    width: 35px;
    height: 15px;
    border-radius: 20px ;
    background-color: #5759eb;
    position: absolute;
    top: 24%;
    left: 77%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.talung-box4{
    width: 35px;
    height: 15px;
    border-radius: 20px ;
    background-color: #5759eb;
    position: absolute;
    top: 24%;
    left: 89%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.talung-box5{ 
    width: 60px;
    height: 15px;
    border-radius: 20px ;
    background-color: #5759eb;
    position: absolute;
    top: 38.5%;
    left: 58%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    
}
.talung-box6{
    width: 35px;
    height: 15px;
    border-radius: 20px ;
    background-color: #5759eb;
    position: absolute;
    top: 38.5%;
    left: 76%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.talung-box7{
    width: 35px;
    height: 15px;
    border-radius: 20px ;
    background-color: #5759eb;
    position: absolute;
    top: 38.5%;
    left: 88%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.talung-box9{ 
    width: 35px;
    height: 15px;
    border-radius: 20px ;
    background-color: #5759eb;
    position: absolute;
    top: 53%;
    left: 52%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    
}
.talung-box10{
    width: 45px;
    height: 15px;
    border-radius: 20px ;
    background-color: #5759eb;
    position: absolute;
    top: 53%;
    left: 64%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.talung-box11{
    width: 45px;
    height: 15px;
    border-radius: 20px ;
    background-color: #5759eb;
    position: absolute;
    top: 53%;
    left: 77%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.talung-box12{
    width: 35px;
    height: 15px;
    border-radius: 20px ;
    background-color: #5759eb;
    position: absolute;
    top: 53%;
    left: 89%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.talung-box13{
    width: 35px;
    height: 15px;
    border-radius: 20px ;
    background-color: #5759eb;
    position: absolute;
    top: 67.5%;
    left: 52%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    
}
.talung-box14{
    width: 45px;
    height: 15px;
    border-radius: 20px ;
    background-color: #5759eb;
    position: absolute;
    top: 67.5%;
    left: 64%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.talung-box15{
    width: 45px;
    height: 15px;
    border-radius: 20px ;
    background-color: #5759eb;
    position: absolute;
    top: 67.5%;
    left: 77%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.talung-box16{
    width: 35px;
    height: 15px;
    border-radius: 20px ;
    background-color: #5759eb;
    position: absolute;
    top: 67.5%;
    left: 89%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.talung-box17{
    width: 45px;
    height: 15px;
    border-radius: 20px ;
    background-color: #5759eb;
    position: absolute;
    top: 82%;
    left: 58%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    
}
.talung-box18{
    width: 60px;
    height: 15px;
    border-radius: 20px ;
    background-color: #5759eb;
    position: absolute;
    top: 82%;
    left: 74%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.talung-box19{
    width: 45px;
    height: 15px;
    border-radius: 20px ;
    background-color: #5759eb;
    position: absolute;
    top: 82%;
    left: 87%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.talung-box23{
    width: 35px;
    height: 15px;
    border-radius: 20px ;
    background-color: #5759eb;
    position: absolute;
    top: 96.5%;
    left: 87%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.talung-box21{
    width: 90px;
    height: 15px;
    border-radius: 20px ;
    background-color: #5759eb;
    position: absolute;
    top: 96.5%;
    left: 58%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    
}
.talung-box22{
    width: 35px;
    height: 15px;
    border-radius: 20px ;
    background-color: #5759eb;
    position: absolute;
    top: 96.5%;
    left: 74%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.text-msg1{
    font-size: 10px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #000000; /* สีตัวหนังสือ */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    bottom: 100px; /* จัดให้อยู่ล่าง */
    right: 170px; /* จัดให้อยู่ขวา */
    margin: 0px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    top: 100px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ตัวหนังสือ */
    transition: color 0.3s ease, transform 0.3s ease; /* เพิ่ม transition */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */

}
.text-msg2{
    font-size: 10px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #000000; /* สีตัวหนังสือ */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    bottom: 100px; /* จัดให้อยู่ล่าง */
    right: 125px; /* จัดให้อยู่ขวา */
    margin: 0px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    top: 100px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ตัวหนังสือ */
    transition: color 0.3s ease, transform 0.3s ease; /* เพิ่ม transition */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */

}
.text-msg3{
    font-size: 10px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #000000; /* สีตัวหนังสือ */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    bottom: 100px; /* จัดให้อยู่ล่าง */
    right: 70px; /* จัดให้อยู่ขวา */
    margin: 0px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    top: 100px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ตัวหนังสือ */
    transition: color 0.3s ease, transform 0.3s ease; /* เพิ่ม transition */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */

}
.text-msg4{
    font-size: 10px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #000000; /* สีตัวหนังสือ */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    bottom: 100px; /* จัดให้อยู่ล่าง */
    right: 130px; /* จัดให้อยู่ขวา */
    margin: 0px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    top: 190px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ตัวหนังสือ */
    transition: color 0.3s ease, transform 0.3s ease; /* เพิ่ม transition */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */

}
.text-msg5{
    font-size: 10px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #000000; /* สีตัวหนังสือ */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    bottom: 100px; /* จัดให้อยู่ล่าง */
    right: 80px; /* จัดให้อยู่ขวา */
    margin: 0px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    top: 190px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ตัวหนังสือ */
    transition: color 0.3s ease, transform 0.3s ease; /* เพิ่ม transition */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */

}
.text-msg6{
    font-size: 10px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #000000; /* สีตัวหนังสือ */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    bottom: 100px; /* จัดให้อยู่ล่าง */
    right: 190px; /* จัดให้อยู่ขวา */
    margin: 0px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    top: 290px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ตัวหนังสือ */
    transition: color 0.3s ease, transform 0.3s ease; /* เพิ่ม transition */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */

}
.text-msg7{
    font-size: 10px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #000000; /* สีตัวหนังสือ */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    bottom: 100px; /* จัดให้อยู่ล่าง */
    right: 118px; /* จัดให้อยู่ขวา */
    margin: 0px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    top: 290px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ตัวหนังสือ */
    transition: color 0.3s ease, transform 0.3s ease; /* เพิ่ม transition */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */

}
.text-msg8{
    font-size: 10px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #000000; /* สีตัวหนังสือ */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    bottom: 100px; /* จัดให้อยู่ล่าง */
    right: 75px; /* จัดให้อยู่ขวา */
    margin: 0px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    top: 290px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ตัวหนังสือ */
    transition: color 0.3s ease, transform 0.3s ease; /* เพิ่ม transition */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */

}
.text-msg9{
    font-size: 10px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #000000; /* สีตัวหนังสือ */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    bottom: 100px; /* จัดให้อยู่ล่าง */
    right: 190px; /* จัดให้อยู่ขวา */
    margin: 0px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    top: 380px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ตัวหนังสือ */
    transition: color 0.3s ease, transform 0.3s ease; /* เพิ่ม transition */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */

}
.text-msg10{
    font-size: 10px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #000000; /* สีตัวหนังสือ */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    bottom: 100px; /* จัดให้อยู่ล่าง */
    right: 118px; /* จัดให้อยู่ขวา */
    margin: 0px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    top: 380px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ตัวหนังสือ */
    transition: color 0.3s ease, transform 0.3s ease; /* เพิ่ม transition */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */

}
.text-msg11{
    font-size: 10px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #000000; /* สีตัวหนังสือ */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    bottom: 100px; /* จัดให้อยู่ล่าง */
    right: 75px; /* จัดให้อยู่ขวา */
    margin: 0px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    top: 380px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ตัวหนังสือ */
    transition: color 0.3s ease, transform 0.3s ease; /* เพิ่ม transition */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */

}
.text-msg12{
    font-size: 10px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #000000; /* สีตัวหนังสือ */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    bottom: 100px; /* จัดให้อยู่ล่าง */
    right: 140px; /* จัดให้อยู่ขวา */
    margin: 0px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    top: 470px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ตัวหนังสือ */
    transition: color 0.3s ease, transform 0.3s ease; /* เพิ่ม transition */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */

}
.text-msg13{
    font-size: 10px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #000000; /* สีตัวหนังสือ */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    bottom: 100px; /* จัดให้อยู่ล่าง */
    right: 80px; /* จัดให้อยู่ขวา */
    margin: 0px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    top: 470px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ตัวหนังสือ */
    transition: color 0.3s ease, transform 0.3s ease; /* เพิ่ม transition */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */

}
.text-msg14{
    font-size: 10px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #000000; /* สีตัวหนังสือ */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    bottom: 100px; /* จัดให้อยู่ล่าง */
    right: 140px; /* จัดให้อยู่ขวา */
    margin: 0px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    top: 560px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ตัวหนังสือ */
    transition: color 0.3s ease, transform 0.3s ease; /* เพิ่ม transition */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */

}
.text-msg15{
    font-size: 10px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #000000; /* สีตัวหนังสือ */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    bottom: 100px; /* จัดให้อยู่ล่าง */
    right: 80px; /* จัดให้อยู่ขวา */
    margin: 0px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    top: 560px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ตัวหนังสือ */
    transition: color 0.3s ease, transform 0.3s ease; /* เพิ่ม transition */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */

}
.text-msg16{
    font-size: 6px; /* ขนาดตัวอักษรใหญ่กว่า */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    bottom: 100px; /* จัดให้อยู่ล่าง */
    right: 238px; /* จัดให้อยู่ขวา */
    margin: 0px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    top: 130px; 
    color: white; /* สีของตัวอักษร */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */
   z-index: 99999;

}
.text-msg17{
    font-size: 6px; /* ขนาดตัวอักษรใหญ่กว่า */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    bottom: 100px; /* จัดให้อยู่ล่าง */
    right: 238px; /* จัดให้อยู่ขวา */
    margin: 0px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    top: 220px; 
    color: white; /* สีของตัวอักษร */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */
   z-index: 99999;

}
.text-msg18{
    font-size: 6px; /* ขนาดตัวอักษรใหญ่กว่า */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    bottom: 100px; /* จัดให้อยู่ล่าง */
    right: 238px; /* จัดให้อยู่ขวา */
    margin: 0px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    top: 310px; 
    color: white; /* สีของตัวอักษร */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */
   z-index: 99999;

}
.text-msg19{
    font-size: 6px; /* ขนาดตัวอักษรใหญ่กว่า */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    bottom: 100px; /* จัดให้อยู่ล่าง */
    right: 238px; /* จัดให้อยู่ขวา */
    margin: 0px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    top: 400px; 
    color: white; /* สีของตัวอักษร */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */
   z-index: 99999;

}
.text-msg20{
    font-size: 6px; /* ขนาดตัวอักษรใหญ่กว่า */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    bottom: 100px; /* จัดให้อยู่ล่าง */
    right: 238px; /* จัดให้อยู่ขวา */
    margin: 0px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    top: 490px; 
    color: white; /* สีของตัวอักษร */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */
   z-index: 99999;

}
.text-msg21{
    font-size: 6px; /* ขนาดตัวอักษรใหญ่กว่า */
    text-align: right; /* จัดให้อยู่ชิดขวา */
    position: absolute; /* ใช้ position absolute */
    bottom: 100px; /* จัดให้อยู่ล่าง */
    right: 238px; /* จัดให้อยู่ขวา */
    margin: 0px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    top: 585px; 
    color: white; /* สีของตัวอักษร */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */
   z-index: 99999;

}
.box-เทคนิค{
      width: 350px;        /* ความกว้าง */
      height: 50px;       /* ความสูง */
      background-color:#FF6600; /* สีพื้นหลังของกล่อง */
      margin: 20px;        /* ระยะห่างรอบกล่อง */

      margin-left: 0px; /* ระยะห่างด้านซ้าย */
      display: flex;
      align-items: center;     /* จัดแนวตั้ง */
      justify-content: center; /* จัดแนวนอน */
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      color: #FFFFFF;
      font-style: italic; /* ทำให้ตัวหนังสือเอียง */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     text-shadow: #000000 1px 1px 2px; /* เพิ่มเงาให้ตัวหนังสือ */
}
.box-สารป้องกัน{
    width: 450px;        /* ความกว้าง */
    height: 50px;       /* ความสูง */
    background-color:#FF6600; /* สีพื้นหลังของกล่อง */
    margin: 2px;        /* ระยะห่างรอบกล่อง */
    margin-left:-0.5px; /* ระยะห่างด้านซ้าย */
    display: flex;
    align-items: center;     /* จัดแนวตั้ง */
    justify-content: center; /* จัดแนวนอน */
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #FFFFFF;
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   text-shadow: #000000 1px 1px 2px; /* เพิ่มเงาให้ตัวหนังสือ */
}
.empty-rectangle11,.empty-rectangle22,.empty-rectangle33,.empty-rectangle44,.empty-rectangle55,.empty-rectangle66,.empty-rectangle77
 {
    top: -70px; /* ขยับลงจากขอบบน */
    width: 400px;
    margin-left: 15px; /* ขยับไปทางขวา */
    height: 70px;
    border: 2px solid black; /* เส้นขอบ */
    background-color: transparent; /* ว่างเปล่า */
    margin-bottom: 5px;
    border-radius: 20px; /* ขอบมน */

  }
  .photo-view {
    position: absolute;
    top: 95px;
    right: 320px;

    display: flex;
    flex-direction: column;
    gap: 15px; /* ระยะห่างระหว่างรูป */
    border-radius: 10px; /* ทำขอบมน */
    margin-bottom: 5px;
}

.arrow-container {
    display: flex;
    align-items: center;
    margin-top: -496px; /* ขยับขึ้นด้านบน */
    margin-left: 130px; /* ขยับไปทางขวา */
}
.bar {
    width:10px;
    height: 18px;
    background-color: #0B3D0B;
    margin-right: 5px;
}
.arrowhead {
    width: 20px; /* เพิ่มความกว้าง */
    height: 10px; /* เพิ่มความสูง */
    border-top: 15px solid transparent; /* เพิ่มขนาดด้านบน */
    border-bottom: 15px solid transparent; /* เพิ่มขนาดด้านล่าง */
    border-left: 30px solid #2ECC71; /* เพิ่มขนาดด้านซ้าย */
    margin-left: 2px; /* เพิ่มระยะห่างด้านซ้าย */
    gap: 0px; /* เพิ่มระยะห่างระหว่างรูป */

}
.arrow-container1 {
    display: flex;
    align-items: center;
    margin-top: 50px; /* ขยับขึ้นด้านบน */
    margin-left: 130px; /* ขยับไปทางขวา */
}
.bar {
    width:10px;
    height: 18px;
    background-color: #0B3D0B;
    margin-right: 5px;
}
.arrowhead {
    width: 20px; /* เพิ่มความกว้าง */
    height: 10px; /* เพิ่มความสูง */
    border-top: 15px solid transparent; /* เพิ่มขนาดด้านบน */
    border-bottom: 15px solid transparent; /* เพิ่มขนาดด้านล่าง */
    border-left: 30px solid #2ECC71; /* เพิ่มขนาดด้านซ้าย */
    margin-left: 2px; /* เพิ่มระยะห่างด้านซ้าย */
    gap: 0px; /* เพิ่มระยะห่างระหว่างรูป */

}
.arrow-container2{
    display: flex;
    align-items: center;
    margin-top: 45px; /* ขยับขึ้นด้านบน */
    margin-left: 130px; /* ขยับไปทางขวา */
}
.bar {
    width:10px;
    height: 18px;
    background-color: #0B3D0B;
    margin-right: 5px;
}
.arrowhead {
    width: 20px; /* เพิ่มความกว้าง */
    height: 10px; /* เพิ่มความสูง */
    border-top: 15px solid transparent; /* เพิ่มขนาดด้านบน */
    border-bottom: 15px solid transparent; /* เพิ่มขนาดด้านล่าง */
    border-left: 30px solid #2ECC71; /* เพิ่มขนาดด้านซ้าย */
    margin-left: 2px; /* เพิ่มระยะห่างด้านซ้าย */
    gap: 0px; /* เพิ่มระยะห่างระหว่างรูป */

}
.arrow-container3{
    display: flex;
    align-items: center;
    margin-top: 42px; /* ขยับขึ้นด้านบน */
    margin-left: 130px; /* ขยับไปทางขวา */
}
.bar {
    width:10px;
    height: 18px;
    background-color: #0B3D0B;
    margin-right: 5px;
}
.arrowhead {
    width: 20px; /* เพิ่มความกว้าง */
    height: 10px; /* เพิ่มความสูง */
    border-top: 15px solid transparent; /* เพิ่มขนาดด้านบน */
    border-bottom: 15px solid transparent; /* เพิ่มขนาดด้านล่าง */
    border-left: 30px solid #2ECC71; /* เพิ่มขนาดด้านซ้าย */
    margin-left: 2px; /* เพิ่มระยะห่างด้านซ้าย */
    gap: 0px; /* เพิ่มระยะห่างระหว่างรูป */

}
.arrow-container4{
    display: flex;
    align-items: center;
    margin-top:48px; /* ขยับขึ้นด้านบน */
    margin-left: 130px; /* ขยับไปทางขวา */
}
.bar {
    width:10px;
    height: 18px;
    background-color: #0B3D0B;
    margin-right: 5px;
}
.arrowhead {
    width: 20px; /* เพิ่มความกว้าง */
    height: 10px; /* เพิ่มความสูง */
    border-top: 15px solid transparent; /* เพิ่มขนาดด้านบน */
    border-bottom: 15px solid transparent; /* เพิ่มขนาดด้านล่าง */
    border-left: 30px solid #2ECC71; /* เพิ่มขนาดด้านซ้าย */
    margin-left: 2px; /* เพิ่มระยะห่างด้านซ้าย */
    gap: 0px; /* เพิ่มระยะห่างระหว่างรูป */

    
}
.arrow-container5{
    display: flex;
    align-items: center;
    margin-top:48px; /* ขยับขึ้นด้านบน */
    margin-left: 130px; /* ขยับไปทางขวา */
}
.bar {
    width:10px;
    height: 18px;
    background-color: #0B3D0B;
    margin-right: 5px;
}
.arrowhead {
    width: 20px; /* เพิ่มความกว้าง */
    height: 10px; /* เพิ่มความสูง */
    border-top: 15px solid transparent; /* เพิ่มขนาดด้านบน */
    border-bottom: 15px solid transparent; /* เพิ่มขนาดด้านล่าง */
    border-left: 30px solid #2ECC71; /* เพิ่มขนาดด้านซ้าย */
    margin-left: 2px; /* เพิ่มระยะห่างด้านซ้าย */
    gap: 0px; /* เพิ่มระยะห่างระหว่างรูป */

}
.arrow-container6{
    display: flex;
    align-items: center;
    margin-top:48px; /* ขยับขึ้นด้านบน */
    margin-left: 130px; /* ขยับไปทางขวา */
}
.bar {
    width:10px;
    height: 18px;
    background-color: #0B3D0B;
    margin-right: 5px;
}
.arrowhead {
    width: 20px; /* เพิ่มความกว้าง */
    height: 10px; /* เพิ่มความสูง */
    border-top: 15px solid transparent; /* เพิ่มขนาดด้านบน */
    border-bottom: 15px solid transparent; /* เพิ่มขนาดด้านล่าง */
    border-left: 30px solid #2ECC71; /* เพิ่มขนาดด้านซ้าย */
    margin-left: 2px; /* เพิ่มระยะห่างด้านซ้าย */
    gap: 0px; /* เพิ่มระยะห่างระหว่างรูป */

}
.msg-center{
    font-size: 12px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #000000; /* สีตัวหนังสือ */
    text-align: center; /* จัดให้อยู่กลาง */
    position: absolute; /* ใช้ position absolute */
    bottom: 100px; /* จัดให้อยู่ล่าง */
    right: 205px; /* จัดให้อยู่ขวา */
    margin: 0px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    top: 100px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ตัวหนังสือ */
    transition: color 0.3s ease, transform 0.3s ease; /* เพิ่ม transition */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */
    font-weight: bold;
}
.msg-center1{
    font-size: 12px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #000000; /* สีตัวหนังสือ */
    text-align: center; /* จัดให้อยู่กลาง */
    position: absolute; /* ใช้ position absolute */
    bottom: 100px; /* จัดให้อยู่ล่าง */
    right: 190px; /* จัดให้อยู่ขวา */
    margin: 0px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    top: 175px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ตัวหนังสือ */
    transition: color 0.3s ease, transform 0.3s ease; /* เพิ่ม transition */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */
    font-weight: bold;
}
.msg-center2{
    font-size: 12px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #000000; /* สีตัวหนังสือ */
    text-align: center; /* จัดให้อยู่กลาง */
    position: absolute; /* ใช้ position absolute */
    bottom: 100px; /* จัดให้อยู่ล่าง */
    right: 230px; /* จัดให้อยู่ขวา */
    margin: 0px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    top: 250px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ตัวหนังสือ */
    transition: color 0.3s ease, transform 0.3s ease; /* เพิ่ม transition */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */
    font-weight: bold;
}
.msg-center3{
    font-size: 12px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #000000; /* สีตัวหนังสือ */
    text-align: center; /* จัดให้อยู่กลาง */
    position: absolute; /* ใช้ position absolute */
    bottom: 100px; /* จัดให้อยู่ล่าง */
    right: 235px; /* จัดให้อยู่ขวา */
    margin: 0px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    top: 325px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ตัวหนังสือ */
    transition: color 0.3s ease, transform 0.3s ease; /* เพิ่ม transition */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */
    font-weight: bold;
}
.msg-center4{
    font-size: 12px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #000000; /* สีตัวหนังสือ */
    text-align: center; /* จัดให้อยู่กลาง */
    position: absolute; /* ใช้ position absolute */
    bottom: 100px; /* จัดให้อยู่ล่าง */
    right: 225px; /* จัดให้อยู่ขวา */
    margin: 0px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    top: 400px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ตัวหนังสือ */
    transition: color 0.3s ease, transform 0.3s ease; /* เพิ่ม transition */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */
    font-weight: bold;
}
.msg-center5{
    font-size: 12px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #000000; /* สีตัวหนังสือ */
    text-align: center; /* จัดให้อยู่กลาง */
    position: absolute; /* ใช้ position absolute */
    bottom: 100px; /* จัดให้อยู่ล่าง */
    right: 230px; /* จัดให้อยู่ขวา */
    margin: 0px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    top:475px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ตัวหนังสือ */
    transition: color 0.3s ease, transform 0.3s ease; /* เพิ่ม transition */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */
    font-weight: bold;
}
.msg-center6{
    font-size: 12px; /* ขนาดตัวอักษรใหญ่กว่า */
    font-weight: bold; /* ตัวหนา */
    color: #000000; /* สีตัวหนังสือ */
    text-align: center; /* จัดให้อยู่กลาง */
    position: absolute; /* ใช้ position absolute */
    bottom: 100px; /* จัดให้อยู่ล่าง */
    right: 205px; /* จัดให้อยู่ขวา */
    margin: 0px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    top: 550px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงาให้ตัวหนังสือ */
    transition: color 0.3s ease, transform 0.3s ease; /* เพิ่ม transition */
    font-style: italic; /* ทำให้ตัวหนังสือเอียง */
    font-weight: bold;
}
.box-Ya{

    text-align: right;
    position: fixed;
  top: 80px; /* จัดให้อยู่ล่าง */
  left: 220px;
    margin: 10px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
}
.box-Ya1{
   
    text-align: right;
    position: fixed;
  top: 83px; /* จัดให้อยู่ล่าง */
  left: 250px;
    margin: 10px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
}
.box-Ya2{
   
    text-align: right;
    position: fixed;
  top: 80px; /* จัดให้อยู่ล่าง */
  left: 260px;
    margin: 10px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
}

.box-Ya3{
   
    text-align: right;
    position: fixed;
  top: 80px; /* จัดให้อยู่ล่าง */
  left: 310px;
    margin: 10px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
}
.box-Ya4{
   
    text-align: right;
    position: fixed;
  top: 155px; /* จัดให้อยู่ล่าง */
  left: 240px;
    margin: 10px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
}
.box-Ya5{
   
    text-align: right;
    position: fixed;
  top: 225px; /* จัดให้อยู่ล่าง */
  left: 245px;
    margin: 5px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
}
.box-Ya6{
   
    text-align: right;
    position: fixed;
  top: 305px; /* จัดให้อยู่ล่าง */
  left: 248px;
    margin: 5px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
}
.box-Ya7{
   
    text-align: right;
    position: fixed;
  top: 380px; /* จัดให้อยู่ล่าง */
  left: 245px;
    margin: 5px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
}
.box-Ya8{
   
    text-align: right;
    position: fixed;
  top: 455px; /* จัดให้อยู่ล่าง */
  left: 248px;
    margin: 5px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
}
.box-Ya9{
   
    text-align: right;
    position: fixed;
  top: 525px; /* จัดให้อยู่ล่าง */
  left: 242px;
    margin: 5px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
    
}


















.box-สูตร1{
    padding: 3px 5px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px;
    background-color: #f55134;
    position: absolute;
    top:24%;
    left: 61%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
.box-สูตร11{
    padding: 3px 5px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px;
    background-color: #f55134;
    position: absolute;
    top:24%;
    left: 82%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
.box-สูตร2{
    padding: 3px 5px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px;
    background-color: #f55134;
    position: absolute;
    top:36%;
    left: 61%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
.box-สูตร22{
    padding: 3px 5px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px;
    background-color: #f55134;
    position: absolute;
    top:36%;
    left: 73.5%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
.box-สูตร222{
    padding: 3px 5px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px;
    background-color: #f55134;
    position: absolute;
    top:36%;
    left: 85%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
.box-สูตร3{
    padding: 3px 5px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px;
    background-color: #f55134;
    position: absolute;
    top:48.5%;
    left: 61%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
.box-สูตร33{
    padding: 3px 5px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px;
    background-color: #f55134;
    position: absolute;
    top:48.5%;
    left: 73.5%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
.box-สูตร333{
    padding: 3px 5px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px;
    background-color: #f55134;
    position: absolute;
    top:48.5%;
    left: 85%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
.box-สูตร4{
    padding: 3px 5px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px;
    background-color: #f55134;
    position: absolute;
    top:60.5%;
    left: 61%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
}
.box-สูตร44{
    padding: 3px 5px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px;
    background-color: #f55134;
    position: absolute;
    top:60.5%;
    left: 73.5%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
.box-สูตร444{
    padding: 3px 5px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px;
    background-color: #f55134;
    position: absolute;
    top:60.5%;
    left: 85%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
.box-สูตร5{
    padding: 3px 5px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px;
    background-color: #f55134;
    position: absolute;
    top:72.5%;
    left: 61%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
}
.box-สูตร55{
    padding: 3px 5px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px;
    background-color: #f55134;
    position: absolute;
    top:72.5%;
    left: 73.5%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
.box-สูตร555{
    padding: 3px 5px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px;
    background-color: #f55134;
    position: absolute;
    top:72.5%;
    left: 85%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
.box-สูตร6{
    padding: 3px 5px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px;
    background-color: #f55134;
    position: absolute;
    top:84.5%;
    left: 61%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
}
.box-สูตร66{
    padding: 3px 5px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px;
    background-color: #f55134;
    position: absolute;
    top:84.5%;
    left: 73.5%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
.box-สูตร666{
    padding: 3px 5px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px;
    background-color: #f55134;
    position: absolute;
    top:84.5%;
    left: 85%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
.box-สูตร7{
    padding: 3px 5px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px;
    background-color: #f55134;
    position: absolute;
    top:96.5%;
    left: 61%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
}
.box-สูตร77{
    padding: 3px 5px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px;
    background-color: #f55134;
    position: absolute;
    top:96.5%;
    left: 73.5%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
.box-สูตร777{
    padding: 3px 5px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px;
    background-color: #f55134;
    position: absolute;
    top:96.5%;
    left: 85%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
}
.box-สูตร{
    z-index: 99999; /* ทำให้กล่องอยู่ด้านบนสุด */
}
.ponramia {
    margin-top: 30px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 20px; /* เพิ่มระยะห่างจากขอบล่าง */
}
.ponramia1 {
    position: absolute;
    top: 10px; /* ระยะห่างจากขอบบน */
    right: 120px; /* ระยะห่างจากขอบขวา */
    margin-top: 30px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 20px; /* เพิ่มระยะห่างจากขอบล่าง */
}
.ponramia2 {
    position: absolute;
    top: 0px; /* ระยะห่างจากขอบบน */
    right: 310px; /* ระยะห่างจากขอบขวา */
    margin-top: 0px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 0px; /* เพิ่มระยะห่างจากขอบล่าง */
}

.double-linee,.double-linee1,.double-linee2,.double-linee22,.double-linee3,.double-linee33 ,.double-linee4,.double-linee44,.double-linee5,.double-linee55,.double-linee6::before,.double-linee66::before,.double-linee01,.double-linee011,.double-linee02,.double-linee022,.double-linee03,.double-linee033 ,.double-linee04,.double-linee044,.double-linee05,.double-linee055,.double-linee06::before,.double-linee066::before{
    position: relative;
    height: 0px; /* ความสูงของกล่อง */
    margin: 30px ; /* เว้นระยะด้านบนและล่าง */
}
/* เส้น */
.double-linee::before, .double-linee::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 65px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 20px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: 185px;
}
.double-linee1::before, .double-linee1::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 85px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 30px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: 185px;
}
.double-linee2::before, .double-linee2::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 155px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 80px; /* เพิ่มระยะห่างจากขอบล่าง */
    right:185px;
}
.double-linee22::before, .double-linee22::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 175px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 60px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: 185px;
}
.double-linee3::before, .double-linee3::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 245px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 80px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: 185px;
}
.double-linee33::before, .double-linee33::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 265px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 60px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: 185px;
}
.double-linee4::before, .double-linee4::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 340px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 80px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: 185px;
}
.double-linee44::before, .double-linee44::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 360px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 60px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: 185px;
}
.double-linee5::before, .double-linee5::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 435px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 80px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: 185px;
}
.double-linee55::before, .double-linee55::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 455px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 60px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: 185px;
}
.double-linee6::before, .double-linee6::after {
    content: '';
    position: absolute;
    width: 22%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 540px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 90px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: 225px;
}
.double-linee66::before, .double-linee66::after {
    content: '';
    position: absolute;
    width: 22%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 560px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 60px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: 225px;
}
.double-linee01::before, .double-linee01::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 85px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 20px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: -34px;
}
.double-linee011::before, .double-linee011::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 65px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 30px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: -34px;
}
.double-linee02::before, .double-linee02::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 155px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 80px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: -34px;
}
.double-linee022::before, .double-linee022::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 175px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 60px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: -34px;
}
.double-linee03::before, .double-linee03::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 245px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 80px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: -34px;
}
.double-linee033::before, .double-linee033::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 265px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 60px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: -34px;
}
.double-linee04::before, .double-linee04::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 340px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 80px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: -34px;
}
.double-linee044::before, .double-linee044::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 360px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 60px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: -34px;
}
.double-linee05::before, .double-linee05::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 435px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 80px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: -34px;
}
.double-linee055::before, .double-linee055::after {
    content: '';
    position: absolute;
    width: 35%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 455px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 60px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: -34px;
}
.double-linee06::before, .double-linee06::after {
    content: '';
    position: absolute;
    width: 22%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 540px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 90px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: 5px;
}
.double-linee066::before, .double-linee066::after {

    content: '';
    position: absolute;
    width: 22%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 560px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 60px; /* เพิ่มระยะห่างจากขอบล่าง */
    right:5px;
}
/* ชื่อยา */
.cover-leaflett,.cover-leaflett2,.cover-leaflett3,.cover-leaflett4,.cover-leaflett5,.cover-leaflett6,.cover-leaflett7,.cover-leaflett8,.cover-leaflett9,.cover-leaflett10,.cover-leaflett11{
    white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
.cover-leaflett{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 10%;
    left: 33%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    
    color: black;
}
.cover-leaflett1{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 25%;
    left: 32%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    
    color: black;
}
.cover-leaflett2{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 40%;
    left: 33%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    
    color: black;
}
.cover-leaflett3{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 55%;
    left: 30%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    
    color: black;
}
.cover-leaflett4{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 71%;
    left: 33%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    
    color: black;
}
.cover-leaflett5{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 87%;
    left: 31%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    
    color: black;
}
.cover-leaflett6{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 10%;
    left: 83%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    
    color: black;
}
.cover-leaflett7{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 25%;
    left: 83%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    
    color: black;
}
.cover-leaflett8{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 40%;
    left: 83%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    
    color: black;
}
.cover-leaflett9{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 55%;
    left: 83%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    
    color: black;
}
.cover-leaflett10{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 71%;
    left: 83%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    
    color: black;
}
.cover-leaflett11{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 87%;
    left: 82%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px;
    
    color: black;
}
/* อัตรา */
.box-อัตราการใช้011{
    position: absolute;
    top: 108px;
    right: 300px;
    width: 50px;
    height: 15px;
    background-color: #000000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 7px;
    text-align: center;

}
.box-อัตราการใช้22{
    position: absolute;
    top: 198px;
    right: 300px;
    width: 50px;
    height: 15px;
    background-color: #000000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 7px;
    text-align: center;
}
.box-อัตราการใช้33{
    position: absolute;
    top: 288px;
    right: 300px;
    width: 50px;
    height: 15px;
    background-color: #000000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 7px;
    text-align: center;

}
.box-อัตราการใช้44{
    position: absolute;
    top: 383px;
    right: 300px;
    width: 50px;
    height: 15px;
    background-color: #000000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 7px;
    text-align: center;

}
.box-อัตราการใช้55{
    position: absolute;
    top: 478px;
    right: 300px;
    width: 50px;
    height: 15px;
    background-color: #000000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 7px;
    text-align: center;

}
.box-อัตราการใช้66{
    position: absolute;
    top: 583px;
    right: 301px;
    width: 50px;
    height: 15px;
    background-color: #000000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 7px;
    text-align: center;

}
.box-อัตราการใช้77{
    position: absolute;
    top: 108px;
    right: 79px;
    width: 50px;
    height: 15px;
    background-color:  #f55134
    ;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 7px;
    text-align: center;

}
.box-อัตราการใช้88{
    position: absolute;
    top: 198px;
    right: 79px;
    width: 50px;
    height: 15px;
    background-color:  #f55134;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 7px;
    text-align: center;
}
.box-อัตราการใช้99{
    position: absolute;
    top: 288px;
    right: 79px;
    width: 50px;
    height: 15px;
    background-color: #f55134;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 7px;
    text-align: center;

}
.box-อัตราการใช้110{
    position: absolute;
    top: 383px;
    right: 79px;
    width: 50px;
    height: 15px;
    background-color:  #f55134;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 7px;
    text-align: center;

}
.box-อัตราการใช้111{
    position: absolute;
    top: 478px;
    right: 79px;
    width: 50px;
    height: 15px;
    background-color:  #f55134;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 7px;
    text-align: center;

}
.box-อัตราการใช้112{
    position: absolute;
    top: 583px;
    right: 81px;
    width: 50px;
    height: 15px;
    background-color: #f55134;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 7px;
    text-align: center;

}
/* ซีซี */
.box-ซีซีc1{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 115px;
    left: 40%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px;
    
    color: black;
}
.box-ซีซีc2{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 205px;
    left: 40%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px;
    color: black;
}
.box-ซีซีc3{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 295px;
    left: 40%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px;
    color: black;
}
.box-ซีซีc4{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 390px;
    left: 40%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px;
    color: black;
}
.box-ซีซีc5{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 485px;
    left: 40%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px;
    color: black;
}
.box-ซีซีc5{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 590px;
    left: 40%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px;
    color: black;
}
.box-ซีซีc6{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 115px;
    left: 90.5%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px;
    color: black;
    white-space: nowrap; /* ป้องกันการแบ่งบรรทัด */
}
.box-ซีซีc7{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 205px;
    left: 90.5%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px;
    color: black;
    white-space: nowrap; /* ป้องกันการแบ่งบรรทัด */
}
.box-ซีซีc8{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 295px;
    left: 90.5%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px;
    color: black;
    white-space: nowrap; /* ป้องกันการแบ่งบรรทัด */
}
.box-ซีซีc9{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 390px;
    left: 90.5%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px;
    color: black;
    white-space: nowrap; /* ป้องกันการแบ่งบรรทัด */
}
.box-ซีซีc10{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 485px;
    left: 40%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px;
    color: black;
    white-space: nowrap; /* ป้องกันการแบ่งบรรทัด */
}
.box-ซีซีc11{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 485px;
    left: 90.5%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px;
    color: black;
    white-space: nowrap; /* ป้องกันการแบ่งบรรทัด */
}
.box-ซีซีc12{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top:590px;
    left: 90.5%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px;
    color: black;
    white-space: nowrap; /* ป้องกันการแบ่งบรรทัด */
}
.line-horizontal {
    width: 350px;     /* ความยาวเส้น */
    height: 1px;      /* ความหนาเส้น */
    background-color: black; /* สีเส้น */
    margin: 90px 0 0 40px; /* ด้านบน 5px, ซ้ายขยับเข้า 50px */
  
   
  }
  .สารป้องกัน{
    text-align: right;
    position: fixed;
  top: 58px; /* จัดให้อยู่ล่าง */
  left: 43px;
    margin: 5px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
  }
  .สารป้องกัน2{
    text-align: right;
    position: fixed;
  top: 149px; /* จัดให้อยู่ล่าง */
  left: 43px;
    margin: 5px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
  }
  .สารป้องกัน3{
    text-align: right;
    position: fixed;
  top: 240px; /* จัดให้อยู่ล่าง */
  left: 43px;
    margin: 5px; /* เพิ่ม margin เพื่อเว้นระยะห่าง */
  }
  .gray-box {
    width: 200px;
    height: 265px;
    position: absolute;
    background-color: #ccc; /* สีเทา */
    border: 0px solid #999;
    margin-top:-235px; /* ขยับลงจากขอบบน */
    padding: 20px;
    margin-left: 300px; /* ขยับมาทางซ้าย */
    font-family: sans-serif;
    left: 10%;
    transform: translateX(-50%); /* จัดให้อยู่กลาง */
   
}
  .name-box1{
    width: 50px;
    height: 17px;
    border-radius: 20px;
    background: linear-gradient( #53ce90, #8ebddd); /* ไล่สีจากบนลงล่าง */
    position: absolute;
    top: 23%;
    left: 43%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
  .name-box2{
        width: 50px;
        height: 17px;
        border-radius: 20px;
        background: linear-gradient( #53ce90, #8ebddd); /* ไล่สีจากบนลงล่าง */
        position: absolute;
        top: 23%;
        left: 62%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: black;
        font-family: "Kanit", sans-serif;
        font-weight: 500;
        font-size: 8px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
        text-align: center;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
  .name-box3{
        width: 50px;
        height: 17px;
        border-radius: 20px;
        background: linear-gradient( #53ce90, #8ebddd); /* ไล่สีจากบนลงล่าง */
        position: absolute;
        top: 23%;
        left: 80%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: black;
        font-family: "Kanit", sans-serif;
        font-weight: 500;
        font-size: 8px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
        text-align: center;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
  .name-box4{
        width: 50px;
        height: 17px;
        border-radius: 20px;
        background: linear-gradient( #53ce90, #8ebddd); /* ไล่สีจากบนลงล่าง */
        position: absolute;
        top: 37.5%;
        left: 43%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: black;
        font-family: "Kanit", sans-serif;
        font-weight: 500;
        font-size: 8px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
        text-align: center;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
  .name-box5{
            width: 50px;
            height: 17px;
            border-radius: 20px;
            background: linear-gradient( #53ce90, #8ebddd); /* ไล่สีจากบนลงล่าง */
            position: absolute;
            top: 37.5%;
            left: 62%;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: black;
            font-family: "Kanit", sans-serif;
            font-weight: 500;
            font-size: 8px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
            text-align: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
  .name-box6{
            width: 50px;
            height: 17px;
            border-radius: 20px;
            background: linear-gradient( #53ce90, #8ebddd); /* ไล่สีจากบนลงล่าง */
            position: absolute;
            top: 37.5%;
            left: 80%;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: black;
            font-family: "Kanit", sans-serif;
            font-weight: 500;
            font-size: 8px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
            text-align: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
.name-box7{
    width: 50px;
    height: 17px;
    border-radius: 20px;
    background: linear-gradient( #53ce90, #8ebddd); /* ไล่สีจากบนลงล่าง */
    position: absolute;
    top: 52%;
    left: 43%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 8px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
.name-box8{
        width: 50px;
        height: 17px;
        border-radius: 20px;
        background: linear-gradient( #53ce90, #8ebddd); /* ไล่สีจากบนลงล่าง */
        position: absolute;
        top: 52%;
        left: 62%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: black;
        font-family: "Kanit", sans-serif;
        font-weight: 500;
        font-size: 8px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
        text-align: center;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
.name-box9{
        width: 50px;
        height: 17px;
        border-radius: 20px;
        background: linear-gradient( #53ce90, #8ebddd); /* ไล่สีจากบนลงล่าง */
        position: absolute;
        top: 52%;
        left: 80%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: black;
        font-family: "Kanit", sans-serif;
        font-weight: 500;
        font-size: 8px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
        text-align: center;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}


.name-xxx1{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top:18%;
    left: 52%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 10px;
    color: black;
    white-space: nowrap; /* ป้องกันการแบ่งบรรทัด */

}
.name-xxx2{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top:18%;
    left: 70%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 10px;
    color: black;
    white-space: nowrap; /* ป้องกันการแบ่งบรรทัด */

}
.name-xxx3{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top:32%;
    left: 52%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 10px;
    color: black;
    white-space: nowrap; /* ป้องกันการแบ่งบรรทัด */

}
.name-xxx4{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top:32%;
    left: 70%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 10px;
    color: black;
    white-space: nowrap; /* ป้องกันการแบ่งบรรทัด */

}
.name-xxx5{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top:46%;
    left: 52%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 10px;
    color: black;
    white-space: nowrap; /* ป้องกันการแบ่งบรรทัด */
}
.name-xxx6{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top:46%;
    left: 70%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 10px;
    color: black;
    white-space: nowrap; /* ป้องกันการแบ่งบรรทัด */
}

/* เส้น */
.double-lineea::before,.double-lineeaa::before,.double-lineeb::before,.double-lineebb::before,.double-lineec::before,.double-lineecc::before, .double-lineed::before,.double-lineedd::before, .double-lineef::before, .double-lineeff::before,.double-lineeg ::before,.double-lineegg::before, .double-lineeh::before,  .double-lineehh::before,.double-lineei::before, .double-lineeii::before{
    position: relative; /* ใช้ relative เพื่อให้เส้นอยู่ในตำแหน่งที่ถูกต้อง */
    
    height: 0px; /* ความสูงของกล่อง */
    margin: 30px ; /* เว้นระยะด้านบนและล่าง */


}

.double-lineea::before, .double-lineea::after {
    content: '';
    position: absolute;
    width: 25%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 92px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 80px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: 210px;
    
}
.double-lineeaa::before, .double-lineeaa::after {
    content: '';
    position: absolute;
    width: 25%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 110px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 60px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: 210px;
}
.double-lineeb::before, .double-lineeb::after {
    content: '';
    position: absolute;
    width: 25%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 172px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 80px; /* เพิ่มระยะห่างจากขอบล่าง */
    right:  210px;
}
.double-lineebb::before, .double-lineebb::after {
    content: '';
    position: absolute;
    width: 25%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 190px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 60px; /* เพิ่มระยะห่างจากขอบล่าง */
    right:  210px;
}
.double-lineec::before, .double-lineec::after {
    content: '';
    position: absolute;
    width: 25%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 262px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 80px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: 210px;
}
.double-lineecc::before, .double-lineecc::after {
    content: '';
    position: absolute;
    width: 25%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 280px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 60px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: 210px;
}
.double-lineef::before, .double-lineef::after {
    content: '';
    position: absolute;
    width: 25%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 92px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 80px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: -10px;
    z-index: 999;
}
.double-lineeff::before, .double-lineeff::after {
    content: '';
    position: absolute;
    width: 25%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 110px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 60px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: -10px;
    z-index: 999;
}
.double-lineeg::before, .double-lineeg::after {
    content: '';
    position: absolute;
    width: 31%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 172px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 80px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: -10px;
    z-index: 999;
}
.double-lineegg::before, .double-lineegg::after {
    content: '';
    position: absolute;
    width: 25%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 190px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 60px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: -10px;
    z-index: 999;
}
.double-lineeh::before, .double-lineeh::after {
    content: '';
    position: absolute;
    width: 25%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 262px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 80px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: -10px;
    z-index: 999;
}
.double-lineehh::before, .double-lineehh::after {
    content: '';
    position: absolute;
    width: 25%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 280px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 60px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: -10px;
    z-index: 999;
}
.double-lineei::before, .double-lineei::after {
    content: '';
    position: absolute;
    width: 25%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 540px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 90px; /* เพิ่มระยะห่างจากขอบล่าง */
    right: -10px;
    z-index: 999;
}
.double-lineeii::before, .double-lineeii::after {

    content: '';
    position: absolute;
    width: 25%; /* ขยายเส้นให้ยาวเต็มขนาดของกล่อง */
    height: 1px; /* ความหนาของเส้น */
    background-color: black; /* สีของเส้น */
    margin-top: 560px; /* เพิ่มระยะห่างจากขอบบน */
    margin-bottom: 60px; /* เพิ่มระยะห่างจากขอบล่าง */
    right:-10px;
    z-index: 999;
}
.box-อัตราการใช้aa{
    position: absolute;
    top: 430px;
    right: 300px;
    width: 50px;
    height: 15px;
    background-color: #000000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 7px;
    text-align: center;

}
.box-อัตราการใช้bb{
    position: absolute;
    top: 510px;
    right: 300px;
    width: 50px;
    height: 15px;
    background-color: #000000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 7px;
    text-align: center;

}
.box-อัตราการใช้cc{
    position: absolute;
    top: 600px;
    right: 301px;
    width: 50px;
    height: 15px;
    background-color: #000000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 7px;
    text-align: center;

}
.box-อัตราการใช้dd{
    position: absolute;
    top: 430px;
    right: 79px;
    width: 50px;
    height: 15px;
    background-color:  #f55134;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 7px;
    text-align: center;

}
.box-อัตราการใช้ee{
    position: absolute;
    top: 510px;
    right: 79px;
    width: 50px;
    height: 15px;
    background-color:  #f55134;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 7px;
    text-align: center;

}
.box-อัตราการใช้ff{
    position: absolute;
    top: 600px;
    right: 81px;
    width: 50px;
    height: 15px;
    background-color: #f55134;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 7px;
    text-align: center;

}
.box-ซีซีcc1{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 437px;
    left: 41%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px;
    color: black;
}
.box-ซีซีcc2{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 518px;
    left: 41%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px;
    color: black;
}
.box-ซีซีcc3{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 435px;
    left: 90.5%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px;
    color: black;
    white-space: nowrap; /* ป้องกันการแบ่งบรรทัด */
}
.box-ซีซีcc4{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 605px;
    left: 40%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px;
    color: black;
    white-space: nowrap; /* ป้องกันการแบ่งบรรทัด */
}
.box-ซีซีcc5{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 515px;
    left: 90.5%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px;
    color: black;
    white-space: nowrap; /* ป้องกันการแบ่งบรรทัด */
}
.box-ซีซีcc6{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top:605px;
    left: 90.5%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 6px;
    color: black;
    white-space: nowrap; /* ป้องกันการแบ่งบรรทัด */
}
.cover-leaflett-1, .cover-leaflett-2, .cover-leaflett-3, .cover-leaflett-4, .cover-leaflett-5, .cover-leaflett-6{
    position: relative; /* ใช้ relative เพื่อให้เส้นอยู่ในตำแหน่งที่ถูกต้อง */
    
    white-space: nowrap;

}

.cover-leaflett-1{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 62%;
    left: 35%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 7px;
    color: black;
}
.cover-leaflett-2{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 76%;
    left: 35%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 7px;
    
    color: black;
}
.cover-leaflett-3{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 90%;
    left: 33%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 7px;
    
    color: black;
}.cover-leaflett-4{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 62%;
    left: 82.5%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 7px;
    
    color: black;
}
.cover-leaflett-5{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 76%;
    left: 81.5%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 7px;
    
    color: black;
}
.cover-leaflett-6{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    position: absolute;
    top: 90%;
    left: 82.5%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 7px;
    
    color: black;
}
.yaya01{
    z-index: 9999; /* เพิ่ม z-index เพื่อให้กล่องอยู่ด้านบนสุด */
    position: absolute;
    margin: 20px;
    top:55%;
    left: 47%;
}
.yaya02{
    z-index: 9999; /* เพิ่ม z-index เพื่อให้กล่องอยู่ด้านบนสุด */
    position: absolute;
    margin: 20px;
    top:70%;
    left: 47%;
}
.yaya03{
    z-index: 9999; /* เพิ่ม z-index เพื่อให้กล่องอยู่ด้านบนสุด */
    position: absolute;
    margin: 20px;
    top:83%;
    left: 23%;
}
.box-sum1{
    font-size: 10px;
    font-family: "Kanit", sans-serif;
    color: black;
    position: absolute;
    top: 33%;
    left: 67%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
   
}
.box-sum2{
    font-size: 10px;
    font-family: "Kanit", sans-serif;
    color: black;
    position: absolute;
    top: 33%;
    left: 78%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
}
.box-sum3{
    font-size: 10px;
    font-family: "Kanit", sans-serif;
    color: black;
    position: absolute;
    top: 45%;
    left: 67%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
}
.box-sum4{
    font-size: 10px;
    font-family: "Kanit", sans-serif;
    color: black;
    position: absolute;
    top: 45%;
    left: 78%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
}
.box-sum5{
    font-size: 10px;
    font-family: "Kanit", sans-serif;
    color: black;
    position: absolute;
    top: 57%;
    left: 67%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
}
.box-sum6{
    font-size: 10px;
    font-family: "Kanit", sans-serif;
    color: black;
    position: absolute;
    top: 57%;
    left: 78%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
}
.box-sum7{
    font-size: 10px;
    font-family: "Kanit", sans-serif;
    color: black;
    position: absolute;
    top: 69%;
    left: 67%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
}
.box-sum8{
    font-size: 10px;
    font-family: "Kanit", sans-serif;
    color: black;
    position: absolute;
    top: 69%;
    left: 78%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
}
.box-sum9{
    font-size: 10px;
    font-family: "Kanit", sans-serif;
    color: black;
    position: absolute;
    top: 81%;
    left: 67%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
}
.box-sum10{
    font-size: 10px;
    font-family: "Kanit", sans-serif;
    color: black;
    position: absolute;
    top: 81%;
    left: 78%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
}
.box-sum11{
    font-size: 10px;
    font-family: "Kanit", sans-serif;
    color: black;
    position: absolute;
    top: 93%;
    left: 67%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
}
.box-sum12{
    font-size: 10px;
    font-family: "Kanit", sans-serif;
    color: black;
    position: absolute;
    top: 93%;
    left: 78%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
}
.boxLIB1 {
    width: 438px; /* กำหนดความกว้าง */
    height: 23px; /* กำหนดความสูง */
    background: linear-gradient(20deg,#996633, #FFCC99); /* ไล่เชดสีพื้นหลัง */
    background-color: #8944b1; /* สีพื้นหลัง */
    border-radius: 0px; /* ทำให้ขอบมนเล็กน้อย */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* จัดตัวหนังสือชิดซ้าย */
    padding-left: 10px; /* เพิ่มระยะห่างจากขอบซ้าย */
    color: white;
    font-size: 16px;
    font-family: "Kanit", sans-serif;
    font-style: italic; /* ทำให้ฟอนต์เอียง */
    font-weight: bold; /* ทำให้ฟอนต์ตัวหนา */
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.3);
    position: absolute; /* ใช้ position absolute */
    bottom: 580px; /* จัดให้อยู่ล่าง */
    left: 0; /* จัดให้อยู่ฝั่งซ้าย */
    transform: translateX(0); /* ปรับตำแหน่งให้กึ่งกลางจริง */
    border-radius: 0 0 0px 0; /* โค้งเฉพาะมุมบนขวา */
}
.boxLIB2 {
    width: 268px; /* กำหนดความกว้าง */
    height: 20px; /* กำหนดความสูง */
    background: linear-gradient(20deg,#996633, #FFCC99); /* ไล่เชดสีพื้นหลัง */
    background-color: #8944b1; /* สีพื้นหลัง */
    border-radius: 0px; /* ทำให้ขอบมนเล็กน้อย */
    display: flex;
    align-items: center;
    justify-content: center; /* จัดแนวนอน */
    padding-left: 10px; /* เพิ่มระยะห่างจากขอบซ้าย */
    color: white;
    font-size: 14px;
    font-family: "Kanit", sans-serif;
    font-style: italic; /* ทำให้ฟอนต์เอียง */
    font-weight: bold; /* ทำให้ฟอนต์ตัวหนา */
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.3);
    position: absolute; /* ใช้ position absolute */
    bottom: 592px; /* จัดให้อยู่ล่าง */
    margin-left: 170px; /* จัดให้อยู่ฝั่งซ้าย */
    transform: translateX(0); /* ปรับตำแหน่งให้กึ่งกลางจริง */
    clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%, 0 20px);
    
    
    
}
.boxLIB3 {
    width: 440px; /* กำหนดความกว้าง */
    height: 12px; /* กำหนดความสูง */
    background: linear-gradient(20deg,#996633, #FFCC99); /* ไล่เชดสีพื้นหลัง */
    background-color: #8944b1; /* สีพื้นหลัง */
    border-radius: 0px; /* ทำให้ขอบมนเล็กน้อย */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* จัดตัวหนังสือชิดซ้าย */
    padding-left: 10px; /* เพิ่มระยะห่างจากขอบซ้าย */
    color: white;
    font-size: 16px;
    font-family: "Kanit", sans-serif;
    font-style: italic; /* ทำให้ฟอนต์เอียง */
    font-weight: bold; /* ทำให้ฟอนต์ตัวหนา */
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    position: absolute; /* ใช้ position absolute */
    bottom: 15px; /* จัดให้อยู่ล่าง */
    left: 0; /* จัดให้อยู่ฝั่งซ้าย */
    transform: translateX(0); /* ปรับตำแหน่งให้กึ่งกลางจริง */
    border-radius: 0 0 0px 0; /* โค้งเฉพาะมุมบนขวา */
}
.boxLIB4 {
    width: 280px; /* กำหนดความกว้าง */
    height: 20px; /* กำหนดความสูง */
    background: linear-gradient(20deg,#996633, #FFCC99); /* ไล่เชดสีพื้นหลัง */
    background-color: #8944b1; /* สีพื้นหลัง */
    border-radius: 0px; /* ทำให้ขอบมนเล็กน้อย */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* จัดตัวหนังสือชิดซ้าย */
    padding-left: 10px; /* เพิ่มระยะห่างจากขอบซ้าย */
    color: #694b13;
    font-size: 20px;
    font-family: "Kanit", sans-serif;
    font-weight: bold; /* ทำให้ฟอนต์ตัวหนา */
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    position: absolute; /* ใช้ position absolute */
    bottom: 18px; /* จัดให้อยู่ล่าง */
    margin-left: 0px; /* จัดให้อยู่ฝั่งซ้าย */
    transform: translateX(0); /* ปรับตำแหน่งให้กึ่งกลางจริง */
    clip-path: polygon(0 0, 180px 0, 200px 20px, 200px 100%, 0 100%);
    
    
}

.long-boxlib {
    width: 440px;
    height: 2.5px;
    background-color: #d60087; /* สีชมพูเข้ม */
    border-radius: 0px; /* มุมโค้งเล็กน้อย */
    margin-top : -595px; /* ระยะห่างจากด้านบน */
    margin-left:220px;
    z-index: 9999; /* ให้กล่องอยู่หน้าสุดสุด */
    transform: translate(-50%, -50%);
   
    
}

.libcom01{
    font-size: 16px;
    font-family: "Kanit", sans-serif;
    color:#694b13;
    position: absolute;
    top: 96.2%;
    left: 65%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    font-weight: bold; /* ทำให้ฟอนต์ตัวหนา */
}
.libcom02{
    font-size: 23px;
    font-family:"Kanit", sans-serif;
    font-weight: bold; /* ทำให้ฟอนต์ตัวหนา */
    color: #694b13;
    transform: translate(-50%, -50%);
    margin-top : 595px; /* ระยะห่างจากด้านบน */
    margin-left:350px;
    z-index: 9999; /* ให้กล่องอยู่หน้าสุดสุด */
    white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
.box-4box{
    width: 370px;
    height: 150px;
    border-radius: 10px ;
    background-color: #FFF0F5;
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    
}
.box-4boxradius{
padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
border-radius: 20px ;
background-color: #5759eb;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
color: rgb(253, 253, 253);
font-family: "Kanit", sans-serif;
font-weight: 500;
font-size: 14px;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
z-index: 9999; /* ให้กล่องอยู่หน้าสุดสุด */
}
.photolib{
    align-items: center;
    position: absolute;
    top: 10%;
    left: 20%;
    white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
.photolib1{
    align-items: center;
    position: absolute;
    top: 10%;
    left: 30.5%;
    white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
.boxLIB5{
    font-size: 50px;
    font-family: "Kanit", sans-serif;
    color:#694b13;
    position: absolute;
    top: 50.2%;
    left: 45%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    font-weight: bold; /* ทำให้ฟอนต์ตัวหนา */
    text-shadow: 2px 2px 4px rgba(55, 0, 0, 0.6); /* เงาสีแดง */
      
}
.page-footer-textcount0 {
    position: absolute;
    bottom: 585px;
    right:-40px;
    z-index: 1000; /* อยู่บนสุด */
    transform: translate(-50%, -50%);

  }
  .page-footer-textcountGPA {
    position: absolute;
    bottom: 585px;
    right:-40px;
    z-index: 1000; /* อยู่บนสุด */
    transform: translate(-50%, -50%);

  }
  .page-lib {
    top: 43%;
    text-align: left;
    position: absolute;
    bottom: 35px;
    left: 165px;
    font-size: 12px;
    color: #4e4648; /* เพิ่มสีแดง */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* เพิ่มเงา */
}  

.detail001 {
    margin-top: -30px; /* ขยับขึ้นด้านบน */
}
.detail002 {
    margin-top: 30px; /* ขยับขึ้นด้านบน */
}
.detail003 {
    margin-top: -25px; /* ขยับขึ้นด้านบน */
}
.detail004 {
    margin-top: -50px; /* ขยับขึ้นด้านบน */
}
.detail005 {
    margin-top: -30px; /* ขยับขึ้นด้านบน */
}
.detail005 {
    margin-top: 50px; /* ขยับขึ้นด้านบน */
}

@media (min-width: 901px) {
  .product-thumb-filter-group {
    position: absolute;
    transform: translateX(-100px);


  }
}

.full-details-inner p {
    font-size: 18px;
    line-height: 1.7;
    color: #333;
    white-space: pre-line; /* ให้ขึ้นบรรทัดใหม่ตาม \n ได้ */
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

@media (max-width: 767px) {
  .footer-dev {
    text-align: center !important;
    margin-top: 10px;
  }
}

.text-center{
    color: #FFFFFF;
}

.ebook-title,.container-ebook,.ebook-head2,.ebook-head3,.ebook-head4,.ebook-hea5,.ebook-head6,.ebook-head7,.ebook-head8,.ebook-head9,.ebook-head10,.ebook-head11,.ebook-head12{
    position: fixed;
  
    
}

/* e-bookGPA */
.lineGPA1 {
    width: 270px;
    height: 50px;
    background: linear-gradient(90deg, #1E54B6 0%, #5C7FBF 100%);
    border-radius: 0px 0px 40px 0px; /* มุมขวาล่างมน */
    box-shadow: 0 4px 12px rgba(207, 10, 44, 0.15);
    display: flex;
    align-items: center;
    justify-content: flex-start; /* ชิดซ้ายแนวนอน */
    padding-left: 25px; /* เพิ่มระยะห่างจากขอบซ้าย */
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    font-style: italic; /* เพิ่มตัวเอียง */
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 135px;
    transform: translateX(-50%);
}

.lineGPA12 {
    width: 270px;
    height: 50px;
    background: linear-gradient(90deg, #1E54B6 0%, #5C7FBF 100%);
    border-radius: 0px 0px 40px 0px; /* มุมขวาล่างมน */
    box-shadow: 0 4px 12px rgba(207, 10, 44, 0.15);
    display: flex;
    align-items: center;
    justify-content: flex-start; /* ชิดซ้ายแนวนอน */
    padding-left: 25px; /* เพิ่มระยะห่างจากขอบซ้าย */
    color: #fff;
    font-size: 1.0rem;
    font-weight: 600;
    font-style: italic; /* เพิ่มตัวเอียง */
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 135px;
    transform: translateX(-50%);
}


.lineGPA2 {
   width: 280px;
    height: 50px;
    background: linear-gradient(90deg, #1E54B6 0%, #5C7FBF 100%);
    border-radius: 0px 40px 0px 0px; /* มุมขวาบนมน */
    box-shadow: 0 4px 12px rgba(207, 10, 44, 0.15);
    display: flex;
    align-items: flex-start; /* ขยับข้อความขึ้นด้านบน */
    justify-content: flex-start; /* ชิดซ้ายแนวนอน */
    padding-left: 20px;        /* เว้นระยะจากขอบซ้าย */
    padding-top: 5px;          /* เพิ่มระยะห่างจากด้านบน */
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    font-style: italic;        /* ฟอนต์เอียง */
    margin: 0 auto;
    position: absolute;
    bottom: 0; /* ชิดขอบล่าง */
    left: 140px;
    transform: translateX(-50%);
    }

.lineGPA21 {
    width: 280px;
    height: 50px;
    background: linear-gradient(90deg, #1E54B6 0%, #5C7FBF 100%);
    border-radius: 0px 40px 0px 0px; /* มุมขวาบนมน */
    box-shadow: 0 4px 12px rgba(207, 10, 44, 0.15);
    display: flex;
    align-items: flex-start; /* ขยับข้อความขึ้นด้านบน */
    justify-content: flex-start; /* ชิดซ้ายแนวนอน */
    padding-left: 20px;        /* เว้นระยะจากขอบซ้าย */
    padding-top: 5px;          /* เพิ่มระยะห่างจากด้านบน */
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    font-style: italic;        /* ฟอนต์เอียง */
    margin: 0 auto;
    position: absolute;
    bottom: 0; /* ชิดขอบล่าง */
    left: 140px;
    transform: translateX(-50%);
}

.lineGPA4 {
    width: 260px;
    height: 20px;
    background: linear-gradient(90deg, #2E7D32 0%, #66BB6A 100%);
    border-radius: 30px 0px 0px 0px; /* มุมขวาล่างมน */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    margin: 0 auto;
    position: absolute;
    bottom: 0; /* ชิดขอบล่าง */
    right: 135px; /* ชิดขอบขวา */
    transform: translateX(50%);
}
.lineGPA3 {
    width: 250px;
    height: 10px;
    background: #B71C1C; /* สีแดงเข้ม */
    border-radius: 0px; /* ไม่มีมุมมน */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 auto;
    position: absolute;
    bottom: 5px; /* ชิดขอบบน */
    left: 0; /* ชิดขอบซ้าย */
    transform: translateX(0);
}
.lineGPA5 {
    width: 120px;
    height: 5px;
    background: #B71C1C; /* สีแดงเข้ม */
    border-radius: 0px; /* ไม่มีมุมมน */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: "Kanit", sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 auto;
    position: absolute;
    top: 40px; /* ชิดขอบบน */
    right: 0; /* ชิดขอบขวา */
    transform: translateX(0);
}
.photoGPA1 {
    position: absolute;
    top: -135px; /* ปรับตำแหน่งให้ชิดขอบบน */
    right: 110px; /* ปรับตำแหน่งให้ชิดขวา */
    transform: translate(0, 0);
    z-index: 9999; /* ให้ภาพอยู่ด้านบนสุด */
}
.GPAe {
    position: absolute;
    top: 15px; /* ปรับตำแหน่งให้ชิดขอบบน */
    right: 10px; /* ปรับตำแหน่งให้ชิดขวา */
    color: black;
    font-size: 20px;
    font-weight: bold;
    text-align: right;
}



.vision-section {
  
  color: white;
  padding: 60px 20px;
  text-align: center;
}

.vision-section h2 {
  font-size: 42px;
  margin-bottom: 10px;
  font-weight: 700;
}

.vision-section .subtitle {
  font-size: 20px;
  margin-bottom: 40px;
  font-weight: 300;
}

.vision-card {
  max-width: 800px;
  margin: 0 auto;
  background-color: white;
  color: #333;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  padding: 40px 30px;
  text-align: left;
}

.vision-card h3 {
  font-size: 28px;
  margin-bottom: 15px;
  color: #2d6cdf;
}

.vision-card p {
  font-size: 18px;
  line-height: 1.7;
}

.vision-card .executive {
  margin-top: 30px;
  font-weight: bold;
  font-size: 18px;
  color: #4db6ac;
}
.product-image {
    display: block;
    width: 100%; /* หรือกำหนดขนาดเช่น 200px */
    height: 300px; /* ความสูงเท่ากัน */
    overflow: hidden;
    text-align: center;
    position: relative;
}

.product-image img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain; /* หรือ cover ถ้าต้องการให้เต็มพื้นที่ */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.center-boxGPA1{
    width: 385px;
    height: 150px;
    border-radius: 20px ;
    background-color: hsl(51, 21%, 80%);
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    
}
.center-boxGPA2{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px;
    background-color: #3a8f4d;
    position: absolute;
    top: 40%;
    left: 35%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 14px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
.center-boxGPA3{
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px;
    background-color: #3a8f4d;
    position: absolute;
    top: 40%;
    left: 66%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 14px; /* ใช้ rem เพื่อปรับขนาดตัวอักษร */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap; /* ป้องกันการขึ้นบรรทัดใหม่ */
}
.center-boxGPA4 {
    padding: 5px 10px; /* เพิ่ม padding เพื่อขยายตามตัวหนังสือ */
    border-radius: 20px ;
    background-color: #5759eb;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(253, 253, 253);
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    
}