@charset "utf-8";
.box-ebook-list-in {
	float: left;
	height: auto;
	width: 100%;
	background-color: #FFF;
	border: 1px solid #CCC;
	padding-bottom: 3%;
	margin-top: 2%;
	margin-bottom: 2%;
}
.box-ebook-list-in::after {
	content: "";
	display: table;
	clear: both;
}
.box-ebook-list-in-02 {
	float: left;
	height: auto;
	width: 30%;
	background-color: #FFF;
	padding-bottom: 3%;
	margin-top: 3%;
	margin-bottom: 2%;
}
.picture-ebook {
	float: left;
	height: auto;
	width: 15%;
	margin-left: 3%;
	margin-top: 3%;
}
.picture-ebook img {
	height: auto;
	width: 100%;
}
.code-ebook {
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	float: left;
	height: auto;
	width: 100%;
	margin-top: 1%;
	margin-bottom: 1%;
	text-align: center;
}

.name-ebook {
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	text-align: center;
	float: left;
	height: 2.5em;
	width: 80%;
	margin-top: 3%;
	margin-bottom: 3%;
	line-height: 120%;
	margin-left: 10%;
}

.price-ebook {
	font-family: serithairegular;
	font-size: 1rem;
	color: #F00;
	text-align: center;
	float: left;
	height: auto;
	width: 80%;
	margin-top: 1%;
	margin-bottom: 3%;
	margin-left: 10%;
	padding-top: 3%;
	border-top-width: 1px;
	border-top-style: dashed;
	border-top-color: #F00;
}
.month-ebook {
	font-family: serithairegular;
	font-size: 1rem;
	color: #F90;
	text-align: center;
	float: left;
	height: auto;
	width: 80%;
	margin-top: 1%;
	margin-bottom: 3%;
	margin-left: 10%;
	padding-top: 3%;
}
.ebook-detail {
	font-family: serithairegular;
	line-height: 140%;
	color: #666;
	float: left;
	height: auto;
	width: 30%;
	margin-top: 3%;
	margin-left: 1.5%;
		overflow: hidden;
	word-break: break-word;
	word-wrap: break-word;
	
}

.add-cart-ebook {
	text-align: center;
	float: right;
	height: auto;
	width: 15%;
	margin-top: 3%;
	margin-bottom: 1%;
	margin-right: 3%;
}
.expire-ebook {
	text-align: center;
	float: right;
	clear: right;
	height: auto;
	width: 15%;
	margin-top: 1%;
	margin-bottom: 1%;
	margin-right: 3%;
	font-family: "Noto Sans Thai";
	font-size: 1rem;
	color: #F00;
}
.btn-add-cart-ebook {
	font-family: serithairegular;
	font-size: 1rem;
	color: #FFF;
	background-color: #00693F;
	height: auto;
	width: 100%;
	padding-top: 4%;
	padding-bottom: 3%;
	border-radius: 10px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
}
.btn-add-cart-ebook:hover {
	background-color: #008d36;
}

.btn-add-cart-ebook a {
	display: inline-block; /* เพิ่มบรรทัดนี้เพื่อให้คลิกได้เต็มปุ่ม */
	font-family: serithairegular;
	font-size: 1rem;
	color: #FFF;
	background-color: #00693F;
	height: auto;
	width: 100%;
	padding-top: 4%;
	padding-bottom: 3%;
	text-align: center; /* แนะนำให้เพิ่มเพื่อให้ตัวหนังสืออยู่ตรงกลางปุ่มพอดี */
	border-radius: 10px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
	text-decoration: none;
}
.btn-add-cart-ebook a:hover {
	background-color: #008d36;
}

.buy-now-ebook {
	font-family: serithairegular;
	font-size: 1rem;
	text-align: center;
	float: right;
	clear: right;
	height: auto;
	width: 15%;
	margin-top: 1%;
	margin-bottom: 3%;
	margin-right: 3%;
}
.btn-buy-now-ebook {
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	background-color: #f1f84a;
	height: auto;
	width: 100%;
	padding-top: 4%;
	padding-bottom: 3%;
	border-radius: 10px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
}
.btn-buy-now-ebook:hover {
	background-color: #BDC527;	  
}/* CSS Document */
.menu-ebook {
	float: left;
	height: auto;
	width: 100%;
}
/* --- ปุ่มเมนูแฮมเบอร์เกอร์ (Toggle Button) --- */
        .kbd-menu-trigger {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	background: #fff;
	padding: 10px 16px;
	border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	user-select: none;
	width: fit-content;
	transition: background 0.2s;
	font-family: "Noto Sans Thai";
        }

        .kbd-menu-trigger:hover {
            background: #f0f0f0;
        }

        /* เส้นแฮมเบอร์เกอร์ */
        .kbd-hamburger-icon {
            display: flex;
            flex-direction: column;
            gap: 5px;
            width: 24px;
        }

        .kbd-hamburger-icon span {
            display: block;
            width: 100%;
            height: 3px;
            background-color: #333;
            border-radius: 2px;
        }

        .kbd-menu-text {
	font-size: 16px;
	font-weight: bold;
	color: #333;
	font-family: "Noto Sans Thai";
        }

        /* --- ส่วนของ Popup สารบัญ (Sidebar / Drawer) --- */
        /* เช็กบ็อกซ์สำหรับควบคุมการเปิด-ปิด */
        #kbd-menu-toggle {
            display: none;
        }

        /* พื้นหลังดำโปร่งแสงเมื่อเปิดเมนู */
        .kbd-menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 998;
        }

        /* ตัวกล่อง Popup สารบัญ */
        .kbd-toc-popup {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: "Noto Sans Thai";
	position: fixed;
	top: 0;
	left: -100%;
	width: 100%;
	max-width: 450px;
	height: 100%;
	background-color: #0b4626;
	color: #ffffff;
	box-shadow: 5px 0 15px rgba(0,0,0,0.3);
	transition: all 0.3s ease;
	z-index: 999;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
        }

        /* บังคับให้อิลิเมนต์ย่อยภายในกล่องสารบัญใช้ box-sizing เดียวกัน */
        .kbd-toc-popup * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /* เมื่อติ๊กเช็กบ็อกซ์ (เปิดเมนู) */
        #kbd-menu-toggle:checked ~ .kbd-toc-popup {
            left: 0; 
        }

        #kbd-menu-toggle:checked ~ .kbd-menu-overlay {
            opacity: 1;
            visibility: visible;
        }

        /* --- โครงสร้างภายใน Popup --- */
        .kbd-toc-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 25px 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .kbd-toc-title {
	font-size: 24px;
	font-weight: bold;
	font-family: "Noto Sans Thai";
        }

        /* ปุ่มปิดขนาดใหญ่ */
        .kbd-close-btn {
            font-size: 36px;
            line-height: 1;
            cursor: pointer;
            color: rgba(255, 255, 255, 0.7);
            transition: color 0.2s;
            user-select: none;
            padding: 5px 10px;
        }

        .kbd-close-btn:hover {
            color: #ffffff;
        }

        /* ส่วนเนื้อหาของสารบัญ */
        .kbd-toc-content {
            padding: 25px 20px;
        }

        /* ตารางแบ่งคอลัมน์ รายการ และ หน้า */
        .kbd-toc-table-header {
            display: flex;
            justify-content: space-between;
            font-size: 18px;
            font-weight: bold;
            border-bottom: 2px solid rgba(255, 255, 255, 0.3);
            padding-bottom: 10px;
            margin-bottom: 15px;
        }

        /* รายการสารบัญแต่ละแถว */
        .kbd-toc-list {
            list-style: none;
        }

        .kbd-toc-item {
            display: flex;
            justify-content: space-between;
            align-items: flex-end; 
            margin-bottom: 15px;
            font-size: 16px;
            text-decoration: none;
            color: rgba(255, 255, 255, 0.9);
            transition: color 0.2s;
        }

        .kbd-toc-item:hover {
            color: #9cdba6; 
        }

        /* ชื่อหัวข้อของบท */
        .kbd-item-name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-right: 5px;
	line-height: 120%;
        }

        /* เส้นไข่ปลาเชื่อมตรงกลาง */
        .kbd-item-dots {
            flex-grow: 1;
            border-bottom: 2px dotted rgba(255, 255, 255, 0.3);
            margin-bottom: 4px; 
            min-width: 20px;
        }

        /* เลขหน้า */
        .kbd-item-page {
            padding-left: 5px;
            font-weight: bold;
            text-align: right;
            min-width: 30px;
        }

        /* --- Responsive สำหรับหน้าจอมือถือ --- */
        @media (max-width: 480px) {
            .kbd-toc-popup {
                max-width: 100%; 
            }
            .kbd-toc-title {
                font-size: 22px;
            }
            .kbd-toc-item {
                font-size: 15px; 
            }
        }.show-ebook {
	float: left;
	height: auto;
	width: 100%;
	margin-top: 2%;
	margin-bottom: 2%;
}

.book-num{
	margin-top: 5%;
	float: left;
	height: auto;
	width: 100%;
}
.box-ebook-right{

}
.111111111111111111111111111111111111111111111111111111{}
@media screen and (max-width: 670px){
	.box-ebook-list-in {
	float: left;
	height: auto;
	width: 100%;
	background-color: #FFF;
	border: 1px solid #CCC;
	padding-bottom: 5%;
	margin-top: 2%;
	margin-bottom: 5%;
	padding-top: 5%;
}
.box-ebook-list-in::after {
	content: "";
	display: table;
	clear: both;
}
.box-ebook-list-in-02 {
	float: left;
	height: auto;
	width: 100%;
	background-color: #FFF;
	padding-bottom: 1%;
	margin-top: 3%;
	margin-bottom: 1%;
}
.picture-ebook {
	float: left;
	height: auto;
	width: 50%;
	margin-top: 3%;
	margin-bottom: 3%;
	margin-left: 25%;
}
.picture-ebook img {
	height: auto;
	width: 100%;
}

.code-ebook {
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	float: left;
	height: auto;
	width: 100%;
	margin-top: 1%;
	margin-bottom: 1%;
	text-align: center;
}

.name-ebook {
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	text-align: center;
	float: left;
	height: auto;
	width: 80%;
	margin-top: 3%;
	margin-bottom: 3%;
	line-height: 120%;
	margin-left: 10%;
}

.price-ebook {
	font-family: serithairegular;
	font-size: 1rem;
	color: #F00;
	text-align: center;
	float: left;
	height: auto;
	width: 80%;
	margin-top: 1%;
	margin-bottom: 3%;
	margin-left: 10%;
	padding-top: 3%;
	border-top-width: 1px;
	border-top-style: dashed;
	border-top-color: #F00;
}
.month-ebook {
	font-family: serithairegular;
	font-size: 1rem;
	color: #F90;
	text-align: center;
	float: left;
	height: auto;
	width: 80%;
	margin-top: 1%;
	margin-bottom: 3%;
	margin-left: 10%;
	padding-top: 3%;
}
.ebook-detail {
	font-family: serithairegular;
	line-height: 140%;
	color: #666;
	float: left;
	height: auto;
	width: 90%;
	margin-top: 3%;
	overflow: hidden;
	word-break: break-word;
	word-wrap: break-word;
	margin-left: 5%;
	margin-bottom: 3%;	
}

.add-cart-ebook {
	text-align: center;
	float: left;
	height: auto;
	width: 50%;
	margin-top: 3%;
	margin-bottom: 3%;
	margin-left: 25%;
}
.expire-ebook {
	text-align: center;
	float: right;
	height: auto;
	width: 95%;
	margin-top: 1%;
	margin-bottom: 1%;
	font-family: "Noto Sans Thai";
	font-size: 1rem;
	color: #F00;
}
.btn-add-cart-ebook {
	font-family: serithairegular;
	font-size: 1rem;
	color: #FFF;
	background-color: #00693F;
	height: auto;
	width: 100%;
	padding-top: 4%;
	padding-bottom: 3%;
	border-radius: 10px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
}
.btn-add-cart-ebook:hover {
	background-color: #008d36;
}

.btn-add-cart-ebook a {
	display: inline-block; /* เพิ่มบรรทัดนี้เพื่อให้คลิกได้เต็มปุ่ม */
	font-family: serithairegular;
	font-size: 1rem;
	color: #FFF;
	background-color: #00693F;
	height: auto;
	width: 100%;
	padding-top: 4%;
	padding-bottom: 3%;
	text-align: center; /* แนะนำให้เพิ่มเพื่อให้ตัวหนังสืออยู่ตรงกลางปุ่มพอดี */
	border-radius: 10px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
	text-decoration: none;
}
.btn-add-cart-ebook a:hover {
	background-color: #008d36;
}

.buy-now-ebook {
	font-family: serithairegular;
	font-size: 1rem;
	text-align: center;
	float: left;
	height: auto;
	width: 50%;
	margin-top: 3%;
	margin-bottom: 3%;
	margin-left: 25%;
}
.btn-buy-now-ebook {
	font-family: serithairegular;
	font-size: 1rem;
	color: #333;
	background-color: #f1f84a;
	height: auto;
	width: 100%;
	padding-top: 4%;
	padding-bottom: 3%;
	border-radius: 10px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
}
.btn-buy-now-ebook:hover {
	background-color: #BDC527;	  
}/* CSS Document */
.menu-ebook {
	float: left;
	height: auto;
	width: 100%;
}
/* --- ปุ่มเมนูแฮมเบอร์เกอร์ (Toggle Button) --- */
        .kbd-menu-trigger {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	background: #fff;
	padding: 10px 16px;
	border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	user-select: none;
	width: fit-content;
	transition: background 0.2s;
	font-family: "Noto Sans Thai";
        }

        .kbd-menu-trigger:hover {
            background: #f0f0f0;
        }

        /* เส้นแฮมเบอร์เกอร์ */
        .kbd-hamburger-icon {
            display: flex;
            flex-direction: column;
            gap: 5px;
            width: 24px;
        }

        .kbd-hamburger-icon span {
            display: block;
            width: 100%;
            height: 3px;
            background-color: #333;
            border-radius: 2px;
        }

        .kbd-menu-text {
	font-size: 16px;
	font-weight: bold;
	color: #333;
	font-family: "Noto Sans Thai";
        }

        /* --- ส่วนของ Popup สารบัญ (Sidebar / Drawer) --- */
        /* เช็กบ็อกซ์สำหรับควบคุมการเปิด-ปิด */
        #kbd-menu-toggle {
            display: none;
        }

        /* พื้นหลังดำโปร่งแสงเมื่อเปิดเมนู */
        .kbd-menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 998;
        }

        /* ตัวกล่อง Popup สารบัญ */
        .kbd-toc-popup {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: "Noto Sans Thai";
	position: fixed;
	top: 0;
	left: -100%;
	width: 100%;
	max-width: 450px;
	height: 100%;
	background-color: #0b4626;
	color: #ffffff;
	box-shadow: 5px 0 15px rgba(0,0,0,0.3);
	transition: all 0.3s ease;
	z-index: 999;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
        }

        /* บังคับให้อิลิเมนต์ย่อยภายในกล่องสารบัญใช้ box-sizing เดียวกัน */
        .kbd-toc-popup * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /* เมื่อติ๊กเช็กบ็อกซ์ (เปิดเมนู) */
        #kbd-menu-toggle:checked ~ .kbd-toc-popup {
            left: 0; 
        }

        #kbd-menu-toggle:checked ~ .kbd-menu-overlay {
            opacity: 1;
            visibility: visible;
        }

        /* --- โครงสร้างภายใน Popup --- */
        .kbd-toc-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 25px 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .kbd-toc-title {
	font-size: 24px;
	font-weight: bold;
	font-family: "Noto Sans Thai";
        }

        /* ปุ่มปิดขนาดใหญ่ */
        .kbd-close-btn {
            font-size: 36px;
            line-height: 1;
            cursor: pointer;
            color: rgba(255, 255, 255, 0.7);
            transition: color 0.2s;
            user-select: none;
            padding: 5px 10px;
        }

        .kbd-close-btn:hover {
            color: #ffffff;
        }

        /* ส่วนเนื้อหาของสารบัญ */
        .kbd-toc-content {
            padding: 25px 20px;
        }

        /* ตารางแบ่งคอลัมน์ รายการ และ หน้า */
        .kbd-toc-table-header {
            display: flex;
            justify-content: space-between;
            font-size: 18px;
            font-weight: bold;
            border-bottom: 2px solid rgba(255, 255, 255, 0.3);
            padding-bottom: 10px;
            margin-bottom: 15px;
        }

        /* รายการสารบัญแต่ละแถว */
        .kbd-toc-list {
            list-style: none;
        }

        .kbd-toc-item {
            display: flex;
            justify-content: space-between;
            align-items: flex-end; 
            margin-bottom: 15px;
            font-size: 16px;
            text-decoration: none;
            color: rgba(255, 255, 255, 0.9);
            transition: color 0.2s;
        }

        .kbd-toc-item:hover {
            color: #9cdba6; 
        }

        /* ชื่อหัวข้อของบท */
        .kbd-item-name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-right: 5px;
	line-height: 120%;
        }

        /* เส้นไข่ปลาเชื่อมตรงกลาง */
        .kbd-item-dots {
            flex-grow: 1;
            border-bottom: 2px dotted rgba(255, 255, 255, 0.3);
            margin-bottom: 4px; 
            min-width: 20px;
        }

        /* เลขหน้า */
        .kbd-item-page {
            padding-left: 5px;
            font-weight: bold;
            text-align: right;
            min-width: 30px;
        }

        /* --- Responsive สำหรับหน้าจอมือถือ --- */
        @media (max-width: 480px) {
            .kbd-toc-popup {
                max-width: 100%; 
            }
            .kbd-toc-title {
                font-size: 22px;
            }
            .kbd-toc-item {
                font-size: 15px; 
            }
        }.show-ebook {
	float: left;
	height: auto;
	width: 100%;
	margin-top: 2%;
	margin-bottom: 2%;
}

.book-num{
	margin-top: 5%;
	float: left;
	height: auto;
	width: 100%;
}
.box-ebook-right{

}
}