body {
     font-family: 'Kanit', sans-serif;
     color: #333;
     padding-top: 70px;
     font-size: 16px;
 }
.textlinkview{
	color: #FFFFFF;text-decoration: none;
}
 .chakra-petch-light {
     font-family: "Chakra Petch", sans-serif;
     font-weight: 300;
     font-style: normal;
 }
 .chakra-petch-regular {
     font-family: "Chakra Petch", sans-serif;
     font-weight: 400;
     font-style: normal;
 }
 .chakra-petch-medium {
     font-family: "Chakra Petch", sans-serif;
     font-weight: 500;
     font-style: normal;
 }
 .chakra-petch-semibold {
     font-family: "Chakra Petch", sans-serif;
     font-weight: 600;
     font-style: normal;
 }
 .chakra-petch-bold {
     font-family: "Chakra Petch", sans-serif;
     font-weight: 700;
     font-style: normal;
 }
 .chakra-petch-light-italic {
     font-family: "Chakra Petch", sans-serif;
     font-weight: 300;
     font-style: italic;
 }
 .chakra-petch-regular-italic {
     font-family: "Chakra Petch", sans-serif;
     font-weight: 400;
     font-style: italic;
 }
 .chakra-petch-medium-italic {
     font-family: "Chakra Petch", sans-serif;
     font-weight: 500;
     font-style: italic;
 }
 .chakra-petch-semibold-italic {
     font-family: "Chakra Petch", sans-serif;
     font-weight: 600;
     font-style: italic;
 }
 .chakra-petch-bold-italic {
     font-family: "Chakra Petch", sans-serif;
     font-weight: 700;
     font-style: italic;
 }
 .navbar {
     background-color: #ffffff;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     padding: 10px 0;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 1030;
     transition: top 0.4s ease-in-out;
 }
 .navbar.show-on-scroll {
     top: 0;
 }
 .navbar-nav .nav-link {
     color: #fff;
     text-transform: uppercase;
     font-weight: 500;
 }
 .navbar-nav .nav-link:hover {
     color: #ffdd57;
     text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 }
 .navbar-nav .dropdown-menu {
     background-color: #000000;
     border-radius: 8px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }
 .navbar-nav .dropdown-item {
     color: #fff;
 }
 .navbar-nav .dropdown-item:hover {
     background-color: #ffdd57;
     color: #333;
 }
 .btn-outline-light {
     border-color: #ffffff;
     color: #ffffff;
     transition: all 0.3s ease;
 }
 .btn-outline-light:hover {
     background-color: #000000;
     color: #fff;
 }
 .btn-success {
     background-color: #28a745;
     border-color: #28a745;
 }
 .btn-success:hover {
     background-color: #218838;
 }
 .btn, .navbar-toggler {
     font-size: 1.1rem;
 }
 .navbar-nav .nav-item:active .nav-link {
     color: #ffdd57;
 }
 /* แก้ไขตำแหน่งของ dropdown ให้แสดงขวา */
 .dropdown-menu-end {
     position: absolute !important;
     right: 0 !important;
     left: auto !important;
 }
 .d-nonemobile {
     display: block;
 }
 @media (max-width: 767px) {
     .d-nonemobile {
         display: none;
     }
     .offcanvas-start {
         width: 90% !important;
     }
     .navbar-toggler {
         font-size: 1.4rem;
     }
     /* แก้ไขตำแหน่งของ dropdown ให้แสดงขวา */
     .dropdown-menu-end {
         position: static !important;
         right: auto !important;
         left: 0 !important;
     }
     .btn-outline-light {
         color: white;
         border-color: white;
     }
     .btn-outline-light:hover {
         background-color: #000000;
         color: #fff;
     }
     .btn-outline-primary, .btn-outline-danger {
         color: white;
         border-color: white;
     }
     .btn-outline-primary:hover, .btn-outline-danger:hover {
         background-color: #000000;
         color: #fff;
     }
 }
 .offcanvas-header {
     background-color: #000000;
     color: #fff;
     text-transform: uppercase;
 }
 .offcanvas-body {
     background-color: #000000;
 }
 .footer-section {
     background: #151414;
     position: relative;
 }
 .footer-cta {
     border-bottom: 1px solid #373636;
 }
 .single-cta i {
     color: #ff5e14;
     font-size: 30px;
     float: left;
     margin-top: 8px;
 }
 .cta-text {
     padding-left: 15px;
     display: inline-block;
 }
 .cta-text h4 {
     color: #fff;
     font-size: 20px;
     font-weight: 600;
     margin-bottom: 2px;
 }
 .cta-text span {
     color: #757575;
     font-size: 15px;
 }
 .footer-content {
     position: relative;
     z-index: 2;
 }
 .footer-pattern img {
     position: absolute;
     top: 0;
     left: 0;
     height: 330px;
     background-size: cover;
     background-position: 100% 100%;
 }
 .footer-logo {
     margin-bottom: 30px;
 }
 .footer-logo img {
     max-width: 200px;
 }
 .footer-text p {
     margin-bottom: 14px;
     font-size: 14px;
     color: #7e7e7e;
     line-height: 28px;
 }
 .footer-social-icon span {
     color: #fff;
     display: block;
     font-size: 20px;
     font-weight: 700;
     font-family: 'Poppins', sans-serif;
     margin-bottom: 20px;
 }
 .footer-social-icon a {
     color: #fff;
     font-size: 16px;
     margin-right: 15px;
 }
 .footer-social-icon i {
     height: 40px;
     width: 40px;
     text-align: center;
     line-height: 38px;
     border-radius: 50%;
 }
 .facebook-bg {
     background: #3B5998;
 }
 .twitter-bg {
     background: #55ACEE;
 }
 .google-bg {
     background: #DD4B39;
 }
 .footer-widget-heading h3 {
     color: #fff;
     font-size: 20px;
     font-weight: 600;
     margin-bottom: 40px;
     position: relative;
 }
 .footer-widget-heading h3::before {
     content: "";
     position: absolute;
     left: 0;
     bottom: -15px;
     height: 2px;
     width: 50px;
     background: #ff5e14;
 }
 .footer-widget ul li {
     display: inline-block;
     float: left;
     width: 50%;
     margin-bottom: 12px;
 }
 .footer-widget ul li a:hover {
     color: #ff5e14;
 }
 .footer-widget ul li a {
     color: #878787;
     text-transform: capitalize;
 }
 .subscribe-form {
     position: relative;
     overflow: hidden;
 }
 .subscribe-form input {
     width: 100%;
     padding: 14px 28px;
     background: #2E2E2E;
     border: 1px solid #2E2E2E;
     color: #fff;
 }
 .subscribe-form button {
     position: absolute;
     right: 0;
     background: #ff5e14;
     padding: 13px 20px;
     border: 1px solid #ff5e14;
     top: 0;
 }
 .subscribe-form button i {
     color: #fff;
     font-size: 22px;
     transform: rotate(-6deg);
 }
 .copyright-area {
     background: #202020;
     padding: 25px 0;
 }
 .copyright-text p {
     margin: 0;
     font-size: 14px;
     color: #878787;
 }
 .copyright-text p a {
     color: #ff5e14;
 }
 .footer-menu li {
     display: inline-block;
     margin-left: 20px;
 }
 .footer-menu li:hover a {
     color: #ff5e14;
 }
 .footer-menu li a {
     font-size: 14px;
     color: #878787;
 }
 .containerview {
     width: 1200px;
     max-width: 100%;
     margin: 20px auto;
     background: #ffffff;
     border: 1px solid #D7D7D7;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
     padding: 20px;
     display: flex;
     padding-top: 50px;
     padding-bottom: 50px;
     gap: 20px;
     border-radius: 8px;
 }
 .cover img {
     width: 220px;
     border-radius: 5px;
 }
 .content {
     flex: 1;
 }
 .tag-header {
     color: #f69900;
     font-weight: bold;
     font-size: 20px;
     margin-bottom: 10px;
 }
 .title {
     font-size: 24px;
     font-weight: bold;
 }
 .author {
     font-size: 14px;
     margin: 10px 0;
     display: flex;
     align-items: center;
     gap: 10px;
 }
 .author .follow {
     background-color: #ff8a00;
     color: white;
     padding: 5px 10px;
     border-radius: 5px;
     font-size: 13px;
     cursor: pointer;
 }
 .desc {
     font-size: 14px;
     color: #444;
     margin-bottom: 15px;
 }
 .tags {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
 }
 .tags div {
     background: #f0f0f0;
     border-radius: 15px;
     padding: 5px 10px;
     font-size: 13px;
     color: #444;
 }
 .buttons {
     margin-top: 15px;
     display: flex;
     gap: 10px;
 }
 .buttons button {
     border: none;
     padding: 10px 15px;
     font-size: 14px;
     border-radius: 5px;
     cursor: pointer;
 }
 .read-btn {
     background-color: #ff8a00;
     color: white;
 }
 .follow-btn {
     background-color: #ff5555;
     color: white;
 }
 .sidebar {
     margin-top: 15px;
     border-left: 1px solid #eee;
     padding-left: 20px;
 }
 .sidebar div {
     margin-bottom: 15px;
     font-size: 14px;
 }
 .sidebar .number {
     font-size: 18px;
     font-weight: bold;
     color: #555;
 }
 .info-wrap {
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
 }
 /* กล่องทั่วไป */
 .info-box {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 15px;
 }
 /* ไอคอน */
 .icon {
     font-size: 40px;
     width: 40px;
     height: 40px;
     color: #f69900;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-bottom: 16px;
 }
 /* ===== Mobile Responsive ===== */
 @media (max-width: 768px) {
     .containerview {
         width: 100%;
         margin: 10px auto;
         background: #ffffff;
         border: 0px solid #D7D7D7;
         box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
         padding: 10px;
         display: flex;
         padding-top: 30px;
         padding-bottom: 30px;
         gap: 20px;
         border-radius: 0px;
     }
     .sidebar {
         margin-top: 15px;
         border-left: 0px solid #eee;
         padding-left: 20px;
         width: 100%;
     }
     .info-box {
         width: 30%;
         display: flex;
         align-items: center;
         gap: 10px;
         margin-bottom: 15px;
     }
     .responsive-info {
         display: flex;
         flex-direction: column;
     }
     .responsive-info .info-box {
         flex-direction: column;
         align-items: center;
         text-align: center;
         margin-bottom: 10px;
     }
     .responsive-info .info-text {
         margin-top: 5px;
     }
     /* กล่อง 3 ชิ้นแสดงแนวนอน */
     .responsive-info .info-box:nth-child(-n+3) {
         width: 33.33%;
     }
     .responsive-info {
         flex-direction: row;
         flex-wrap: wrap;
         justify-content: space-between;
     }
 }
 .main-box {
     background-color: #ffffff;
     border: 1px solid #ddd;
     border-radius: 10px;
     padding: 25px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
 }
 .section-title {
     background-color: #ffb74d;
     color: #fff;
     padding: 10px 16px;
     font-weight: bold;
     cursor: pointer;
     display: flex;
     justify-content: space-between;
     align-items: center;
     transition: background-color 0.3s;
     border-radius: 6px;
     margin-top: 20px;
 }
 .section-title:hover {
     background-color: #ffa726;
 }
 .arrow {
     font-size: 1.1rem;
     transition: transform 0.2s;
 }
 .episode-card {
     background-color: #fafafa;
     border-bottom: 1px solid #e0e0e0;
     padding: 12px 16px;
     box-shadow: none;
 }
 .episode-card:hover {
     background-color: #f5f5f5;
 }
 .episode-number {
     color: #ff9800;
     font-weight: bold;
 }
 .episode-title {
     font-weight: bold;
     color: #333;
 }
 .episode-meta {
     font-size: 0.9rem;
     color: #777;
 }
 .meta-item {
     margin-left: 10px;
 }
 @media (max-width: 576px) {
     .episode-meta {
         text-align: start !important;
         margin-top: 10px;
     }
 }
 .cardwww {
     max-width: 300px;
     margin: 0 auto;
 }
 .menu-item {
    display: flex;
    align-items: center;
    padding: 8px 12px; /* ลดระยะห่าง */
    background-color: #f8f9fa;
    transition: background-color 0.3s;
}
.menu-item:hover {
    background-color: #e9ecef;
    cursor: pointer;
}
.menu-item i {
    font-size: 18px; /* ขนาดไอคอนเล็กลง */
    color: #f5a623; /* สีส้ม */
    margin-right: 8px; /* ระยะห่างระหว่างไอคอนกับข้อความ */
}
.menu-item span {
    font-size: 14px;
}
.widget {
    background-color: #ffffff;
    padding: 12px; /* ลดระยะห่าง */
    margin: 8px 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    margin-bottom: 2px;
	border: 1px solid #E1E1E1;
}
.widget i {
    font-size: 30px;
    color: #f5a623; /* สีส้ม */
    margin-right: 10px; /* ระยะห่างระหว่างไอคอนกับข้อความ */
}
.widget .content {
    flex-grow: 1;
    text-align: right;
}
.widget h6 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
}
.widget p {
    font-size: 14px;
    color: #555;
}
 .card-header {
     text-align: center;
     font-weight: bold;
     font-size: 18px;
     margin-bottom: 20px;
 }