.jobbkk-pluse{ transition: all 0.3s ease-in; -webkit-transition:all 0.3s ease-in;
	-moz-transition:all 0.3s ease-in; -ms-transition:all 0.3s ease-in;}
.jobbkk-pluse:hover{ -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05);}

/*ถูกใจ เข้าชม แสดงความเห็น*/
.social-so{ position: relative; width: 100%; margin-bottom: 10px;}
.social-so ul{ margin: 0; padding: 0; list-style: none;}
.social-so ul li{ white-space: initial; color: #555;}
.social-so ul li a{ display: block; color: #555; text-decoration: none;}
.social-so ul li a:hover{ color: #d40101;}
.social-so ul li a.active{ color: #d40101;}
.social-so ul li button.active{ color: #d40101;}
.social-so ul li button{ background: transparent; border: 0; color: #555; transition: all 0.3s ease-in; 
	-webkit-transition:all 0.3s ease-in; -moz-transition:all 0.3s ease-in; -ms-transition:all 0.3s ease-in;}
.social-so ul li button:hover{ color: #d40101;}

.social-so ul.ex{ margin: 0 -10px; padding: 0; list-style: none; margin-bottom: 10px; overflow: hidden;}
.social-so ul li.ex{ white-space: initial; color: #555; padding: 0 10px; float: left;}
.social-so ul li.ex a{ display: block; color: #555; text-decoration: none;}
.social-so ul li.ex a:hover{ color: #d40101;}
.social-so ul li.ex a.active{ color: #d40101;}
.social-so ul li.ex button{ display: block; color: #555; background: transparent; border: 0; color: #555; 
	transition: all 0.3s ease-in; -webkit-transition:all 0.3s ease-in; -moz-transition:all 0.3s ease-in; 
	-ms-transition:all 0.3s ease-in;}
.social-so ul li.ex button:hover{ color: #d40101;}

@media (max-width:576px){
	.social-so ul li, .social-so ul li a, .social-so ul li.ex, .social-so ul li.ex a, .social-so ul li.ex button
	{ font-size: 12px; font-size: 1.2rem;}
}

/*6 button*/
ul.push-6{ margin: 0; padding: 0; list-style: none;}
ul.push-6 li{ padding: 10px; float: left; width: 14.2%; text-align: center;}
/* ul.push-6 li a{ padding: 15px; text-decoration: none; display: block; color: #555;} */
ul.push-6 li a{ text-decoration: none; display: block; color: #555; border: 1px solid #ddd; border-radius: 7px;}
ul.push-6 li a .icon-knowledgebase{ background: url(../../images/6push-learn-1.webp) center no-repeat; width: auto; height: 70px; margin-bottom: 20px;}
ul.push-6 li a .icon-inspirational-person{ background: url(../../images/6push-learn-2.webp) center no-repeat; width: auto; height: 70px; margin-bottom: 20px;}
ul.push-6 li a .icon-hr-buddy{ background: url(../../images/6push-learn-3.webp) center no-repeat; width: auto; height: 70px; margin-bottom: 20px;}
ul.push-6 li a .icon-hi-light{ background: url(../../images/6push-learn-4.webp) center no-repeat; width: auto; height: 70px; margin-bottom: 20px;}
ul.push-6 li a .icon-video{ background: url(../../images/6push-learn-5.webp) center no-repeat; width: auto; height: 70px; margin-bottom: 20px;}
ul.push-6 li a .icon-lifestyle{ background: url(../../images/6push-learn-6.webp) center no-repeat; width: auto; height: 70px; margin-bottom: 20px;}
ul.push-6 li a .icon-upskill{ background: url(../../images/6push-learn-7.webp) center no-repeat; width: auto; height: 70px; margin-bottom: 20px;}
ul.push-6 li a span{ position: 	absolute; bottom: 5%; left: 0; right: 0; font-size: var(--font14);}

ul.push-6 li a:hover{ color: #D40101; border-color: #D40101;}
ul.push-6 li a:hover .icon-knowledgebase{ background: url(../../images/6push-learn-1-1.png) center no-repeat;}
ul.push-6 li a:hover .icon-inspirational-person{ background: url(../../images/6push-learn-2-2.png) center no-repeat;}
ul.push-6 li a:hover .icon-hr-buddy{ background: url(../../images/6push-learn-3-3.png) center no-repeat;}
ul.push-6 li a:hover .icon-hi-light{ background: url(../../images/6push-learn-4-4.png) center no-repeat;}
ul.push-6 li a:hover .icon-video{ background: url(../../images/6push-learn-5-5.png) center no-repeat;}
ul.push-6 li a:hover .icon-lifestyle{ background: url(../../images/6push-learn-6-6.png) center no-repeat;}
ul.push-6 li a:hover .icon-upskill{ background: url(../../images/6push-learn-7-7.png) center no-repeat;}

.company-select-bg{ border: 1px solid #D40101 !important;}
ul.push-6 li a.company-red{ color: #D40101;}
ul.push-6 li a .knowledgebase-select{ background: url(../../images/6push-learn-1-1.png) center no-repeat;}
ul.push-6 li a .inspirational-person-select{ background: url(../../images/6push-learn-2-2.png) center no-repeat;}
ul.push-6 li a .company-career-select{ background: url(../../images/6push-learn-3-3.png) center no-repeat;}
ul.push-6 li a .type-business-select{ background: url(../../images/6push-learn-4-4.png) center no-repeat;}
ul.push-6 li a .industry-select{ background: url(../../images/6push-learn-5-5.png) center no-repeat;}
ul.push-6 li a .mrt-bts-select{ background: url(../../images/6push-learn-6-6.png) center no-repeat;}
ul.push-6 li a .upskill-select{ background: url(../../images/6push-learn-7-7.png) center no-repeat;}

@media (max-width:1199px){
	.row-jobbkk-1{ margin-right: 0; margin-left: 0;}
	ul.push-6{ display: flex; white-space: nowrap; overflow-x: scroll;}
	ul.push-6 li{ min-width: 22%; padding-bottom: 15px; padding-left: 0;}
	ul.push-6 li a{ border-radius: 7px; border: 1px solid #ddd;}

	.slideScroll{ display: flex !important; }
}

@media (max-width:991px){
	ul.push-6 li{ min-width: 30%;}
}

/* @media (max-width:768px){
	ul.push-6 li a span{ font-size: 1.2rem; font-size: 12px;}
} */

@media (max-width:576px){
	ul.push-6 li{ min-width: 40%;}
}

@media (max-width:480px){
	ul.push-6 li{ min-width: 45%;}
}

/* @media (max-width:380px){
	ul.push-6 li a span{ font-size: 1rem; font-size: 10px;}
} */

@media (max-width:350px){
	ul.push-6 li{ min-width: 65%;}
	/* ul.push-6 li a span{ font-size: 1.2rem; font-size: 12px;} */
}

/* Sweep To Right */
.hvr-sweep-to-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s;
  	transition-duration: 0.3s;}
.hvr-sweep-to-right:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; border-radius: 7px;
	-webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform;
	transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out;
  	transition-timing-function: ease-out;}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active { color: #333;}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before { -webkit-transform: scaleX(1); transform: scaleX(1);}

.display-region-pc{ display: block;}
.display-region-mobile{ display: none;}

.block-jobbkk-content-big{ width: 100%;}
.pic-content.pic-content-1 img{ height: 100px;}
.pic-content img{ height: inherit;}
.pic-content-1 img{ max-width: 100%; object-fit: scale-down; height: 150px; margin-bottom: 10px;}

@media (max-width:1199px){
	.pic-content.pic-content-big img{ height: 202px;}
	.pic-content-1 img{ height: 100px;}
}

@media (max-width:1170px){
	.display-region-pc{ display: none;}
	.display-region-mobile{ display: block;}
	.block-jobbkk-content-big{ display: flex; white-space: nowrap; overflow-x: scroll;}
	.block-jobbkk-content-big .jobbkk-content{ min-width: 40%;}
	.pic-content img{ height: 150px;}
}

@media (max-width:991px){
	.pic-content-1 img{ height: 120px;}
}

.justify-text{ padding: 20.5% 15px; text-align: center;}

@media (max-width:1199px){
	.justify-text{ padding: 20% 15px; font-size: 2.5rem; font-size: 25px;}
}

@media (max-width:991px){
	.justify-text{ font-size: 1.8rem; font-size: 18px;}
}

@media (max-width:767px){
	.justify-text{ padding:0 15px; font-size: 2.5rem; font-size: 25px;}
}

@media (max-width:576px){
	.justify-text{ padding:0 15px; font-size: 2.2rem; font-size: 22px;}
}

.pic-learn img{ max-width: 100%;}
.content-learn a{ display: block; text-decoration: none; color: var(--clBlackGray);}
.content-learn a.jobbkk-pluse-banner-learn:hover, .jobbkk-pluse-banner-learn:hover{ -webkit-transform: scale(1.1); -ms-transform: scale(1.05); transform: scale(1.05);}
.jobbkk-pluse-banner-learn{ transition: all 0.3s ease-in; -webkit-transition:all 0.3s ease-in; -moz-transition:all 0.3s ease-in; -ms-transition:all 0.3s ease-in;}

.tag-learn ul{ margin: 0 -5px; padding: 0; list-style: none;}
.tag-learn ul li{ padding: 0 5px; float: left; margin-bottom: 5px;}
.tag-learn ul li a.learn-learn{ display: block; background: #D40101; padding: 4px 16px; font-size:16px; color: #ffffff; border-radius: 40px;}
.tag-learn ul li a.learn-learn:hover{ background: #8A0000;}
a.learn-1-1, a.learn-learn, a.learn-learn2{ text-decoration: none; color: var(--clBlackGray);}
.tag-learn ul li a.learn-learn2{ display: block; background: #EAEDF0; padding: 4px 16px; font-size:16px; color: #555555; border-radius: 40px;}
.tag-learn ul li a.learn-learn2:hover{ background: #555555; color:#ffffff;}
/* a.learn-1-1, a.learn-learn2{ text-decoration: none;} */

/*อ่านต่อ*/
a.read-content{ display: inline-block; border: 1px solid #d40101; color: #d40101; background: #fff; border-radius: 10px; padding: 0 10px; text-decoration: none; cursor: pointer;}
a.read-content:hover{ background: #d40101; color: #fff;}

/*อ่านทั้งหมด*/
.read-content-learn{ text-align: right;}
.read-content-learn a.read-content{ padding: 5px; background: #fff; border-radius: 4px; border: 1px solid #d40101; color: #d40101; display: inline-block; cursor: pointer; 
	text-decoration: none; text-align: center;}
.read-content-learn a.read-content:hover{ background: #d40101; color: #fff;}
.top-read{ margin-top: 20px;}
.read-right{ text-align: right;}

.content-red-hov{ transition: all 0.3s ease-in; -webkit-transition:all 0.3s ease-in; -moz-transition:all 0.3s ease-in; -ms-transition:all 0.3s ease-in;}
.content-red-hov:hover{ color: #d40101; text-decoration: underline;}

@media (max-width:1199px){
	.read-content-learn{ font-size: 12px; font-size: 1.2rem;}
}

@media (max-width:576px){
	.top-read{ margin-top: 0;}
	a.read-content{ font-size: 12px; font-size: 1.2rem;}
}

.block-content-learn{ padding: 10px 0;}
div.box-head{ height: 50px; overflow: hidden;}
div.box-detail{ height: 45px; overflow: hidden;}
div.box-1{ height: 45px; overflow: hidden;}

@media (max-width:576px){
	div.box-1{ height: 55px;}
	.read-content-learn a.read-content{ font-size: 12px; font-size: 1.2rem; padding: 5px;}
}

@media (max-width:576px){
	.pic-a-learn-learn, .text-a-learn{ width: 100%;}
	.pic-a-learn-learn{ margin-bottom: 20px;}
}

.jobbkk-link-text ul{ margin: 0 -5px; padding: 0; list-style: none; overflow: hidden;}
.jobbkk-link-text ul li{ float: left; padding: 5px; }
.jobbkk-link-text ul li a{ color: #555; text-decoration: none;}
.jobbkk-link-text ul li a.text-red{ color: #D40101;}
.jobbkk-link-text ul li a:hover{ color: #D40101;}


@media (max-width:576px){
	.ad-learn{ width: 100%;}
}

ul.name-date{ margin: 0 -15px; padding: 0; list-style: none; }
ul.name-date li{ float: left; padding: 0 15px; border-right: 1px solid #bfbfbf; color: #555;}
ul.name-date li a{ display: inline-block; color: #555; text-decoration: none;}
ul.name-date li a.active{ color: #d40101;}
ul.name-date li a:hover{ color: #d40101;}
ul.name-date li:last-child{ border-right: 0;}

ul.name-date li button.active{ color: #d40101;}
ul.name-date li button{ background: transparent; border: 0; color: #555; transition: all 0.3s ease-in; 
	-webkit-transition:all 0.3s ease-in; -moz-transition:all 0.3s ease-in; -ms-transition:all 0.3s ease-in;}
ul.name-date li button:hover{ color: #d40101;}


@media (max-width:480px){
	ul.name-date li{ border-right: 0;}
}

.pic-learn-content{ text-align: center;}
.pic-learn-content img{ max-width: 100%;  width: auto;}

.social-content{ text-align: right;}
.social-content button{ background: transparent; border: 0; transition: all 0.3s ease-in; -webkit-transition:all 0.3s ease-in; -moz-transition:all 0.3s ease-in; 
	-ms-transition:all 0.3s ease-in; }
.social-content button:hover{ color: #D40101;}


.jobbkk-register-social{ text-align: right; margin-top: 5px;}
.jobbkk-register-social p { font-size: var(--font16) !important; }
.jobbkk-share-social ul{ list-style: none; padding: 0;}
.jobbkk-share-social ul li{ display: inline-block; padding: 0 10px 5px;}
.jobbkk-share-social ul li a{ display: block; width: 33px; height: 33px;}
.jobbkk-share-social ul li a.icon-fb{ background: url(../../images/social-1-1.png) no-repeat; background-size: 100%;}
.jobbkk-share-social ul li a.icon-youtube{ background: url(../../images/social-3-3.png) no-repeat; background-size: 100%;}
.jobbkk-share-social ul li a.icon-line{ background: url(../../images/social-6-6.png) no-repeat; background-size: 100%;}
.jobbkk-share-social ul li a.icon-twis{ background: url(../../images/social-2-2.png) no-repeat; background-size: 100%;}
.jobbkk-share-social ul li a.icon-skype{ background: url(../../images/social-7-7.png) no-repeat; background-size: 100%;}
.jobbkk-share-social ul li a.icon-intragram{ background: url(../../images/social-4-4.png) no-repeat; background-size: 100%;}
.jobbkk-share-social ul li a.icon-google{ background: url(../../images/google-1-1.png) no-repeat; background-size: 100%;}
.jobbkk-share-social ul li a.icon-copylink{ background: url(../../images/social-8-8.png) no-repeat; background-size: 100%;}

@media (max-width:768px){
	.jobbkk-register-social{ text-align: center; margin-bottom: 0;}
	.jobbkk-register{ text-align: center;}
	.jobbkk-share-social ul{ text-align: center;}
}

.text-variety .detail-content{ line-height: 1.6;}

@media (max-width:576px){
	.text-variety .detail-content{ font-size: var(--font12); }
}

.tag-learn-full{ width: 100%;}

span.detail-content img{ height: auto !important;}

p {
    word-break: break-word;
    font-size: var(--font14);
}

.jobbkk-head h1 {
    margin-top: 64px;
}

.content-link p{
	color: #333333;
}
.content-link:hover .text-title{
    color:red;
}
.content-link:hover .text-title2{
    color: red;
}
.slideScroll {
	display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}
.slideScroll li{ list-style: none; }
.slideScroll button {
    background: var(--clRed);
    color: var(--clWhite);
    border: 1px solid var(--clRed);
    border-radius: 50px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
	transition: 0.5s ease-in-out;
}
.slideScroll button:hover { background: var(--clRedHover); }

.variety_pic_nav {
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}

.box-section {
	border: 1px solid #DBDFEC;
	border-radius: 8px;
	overflow: hidden;
}
.image-size {
	width: 100%;
	height: 201.23px;
	border-radius: 8px;
	object-fit: cover;

}

@media (max-width:1025px) {
	.image-size {
		width: 100%;
		height: 163.86px;

	}
}

@media (max-width:769px) {
	.image-size {
		width: 100%;
		height: 262.34px;

	}
}

@media (max-width:426px) {
	.image-size {
		width: 100%;
		height: 220.3px;

	}
}

@media (max-width:376px) {
	.image-size {
		width: 100%;
		height: 192.27px;

	}
}

@media (max-width:321px) {
	.image-size {
		width: 100%;
		height: 161.44px;

	}
}

.padding-right {
	padding-right: 10px;
}

.padding-left {
	padding-left: 10px;
}

.size-icon {
	width: 16px;
	height: 16px;
}

.margin-left {
	margin-left: 4px;
}

.margin-bottom {
	margin-bottom: 4px;
}

.red-line {
	width: 100%;
	/* ความกว้างเต็ม */
	height: 3px;
	/* ความหนา */
	background-color: #FF1111;
	/* สีแดง */
	margin-top: 10px;
	/* ระยะห่างด้านบน */
}

.text-color-gray1 {
	color: #333;
	font-size: 36px;
}
.text-color-gray2 {
	color: #333;
	font-size: 32px;
}
 
/*  */
.content-box {
    width: 250px;
    max-width: 100%;
}

.content-link {
    text-decoration: none !important;
}
.box-item {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
	margin-bottom: 8px;
}

.box-image-container {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.box-image-item {
    width: 100%;
    height: 100%;
    background-color: #000000;
}

.box-image-item .image-fill {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.box-content-container {
    padding: 12px;
}

.box-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.content-title {
    line-height: 1.5; /* ความสูงของบรรทัด */
    max-height: calc(1.5em * 2); /* จำกัดความสูงสูงสุดไว้ที่ 2 บรรทัด */
    overflow: hidden; /* ซ่อนข้อความที่เกิน */
    display: -webkit-box; /* ใช้ box model */
    -webkit-box-orient: vertical; /* กำหนดทิศทางกล่อง */
    -webkit-line-clamp: 2; /* จำกัดจำนวนบรรทัด */
    text-overflow: ellipsis; /* เพิ่ม ... เมื่อข้อความยาวเกิน */
    white-space: normal; /* อนุญาตให้ตัดคำ */
	font-size: 22px;
	font-weight: bold;
	color: #333;
}


.content-description {
    margin: 0;
    font-size: 14px;
    color: #666;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.content-meta {
    display: flex;
    font-size: 12px;
    color: #999;
}

.content-date,
.content-category {
    opacity: 0.8;
}
.layout-flex{
	margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: end;
}

/* คลัง */
.content-link-2 {
    text-decoration: none;
    color: inherit;
    display: block;
	text-decoration: none;
}

.box-item-horizontal {
    display: flex;
    align-items: stretch;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.box-image-container-horizontal {
    width: 376.95px;
	border-radius: 8px;
	flex-shrink: 0;
}

.box-image-item-horizontal {
    width: 100%;
    height: 100%;
}

.image-fill-horizontal {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.box-content-container-horizontal {
    flex-grow: 1;
    padding: 15px;
    display: flex;
}

.box-content-wrapper-horizontal {
	width: 100%;
	
}

.content-title-horizontal {
    margin: 0 0 10px 0;
    font-size: 26px;
    color: #333;
	font-weight: bold;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.content-description-horizontal {
    margin: 0 0 15px 0;
    font-size: 22px;
    color: #777;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.content-meta-horizontal {
	display: flex;
    align-items: center;
    margin-top: 15px;
}
.meta-item {
    height: 22px;
    display: grid;;
    align-items: center;
    gap: 4px;
    grid-template-columns: 16px 1fr;
}
.meta-icon {
    width: 18px;
    height: 18px;
    opacity: 0.7;
}
@media (max-width: 768px) {
    .box-item-horizontal {
        flex-direction: column;
    }

    .box-image-container-horizontal {
        width: 100%;
        height: 250px;
    }
}

.tag-container {
    margin-bottom: 15px;
}
/* new */

.container-new{
    display: grid;
    gap: 30px;
    max-width: 1170px;
    margin: 0 auto;
    grid-template-columns: 890px 1fr;
}
.grid-box1{
    border-radius: 8px;
}
@media (max-width: 1199px) {
    .container-new {
        grid-template-columns: 646.66px 1fr;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: 114.5px;
        margin-left: 114.5px;
    }
}
@media (max-width: 1170px) {
    .container-new {
        grid-template-columns: 646.66px 1fr;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: 100px;
        margin-left: 100px;
    }
}
@media (max-width: 1128px) {
    .container-new {
        grid-template-columns: 616.56px 1fr;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: 79px;
        margin-left: 79px;
    }
}
@media (max-width: 1080) {
    .container-new {
        grid-template-columns: 616.56px 1fr;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: 55px;
        margin-left: 55px;
    }
}
@media (max-width: 1024px) {
    .container-new {
        grid-template-columns: 616.56px 1fr;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: 27px;
        margin-left: 27px;
    }
}
@media (max-width: 991px) {
    .container-new {
        grid-template-columns: 500px 1fr;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: 120.5px;
        margin-left: 120.5px;
    }
}
@media (max-width: 880px) {
    .container-new {
        grid-template-columns: 500px 1fr;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: 65px;
        margin-left: 65px;
    }
}
@media (max-width: 840px) {
    .container-new {
        grid-template-columns: 500px 1fr;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: 45px;
        margin-left: 45px;
    }
}
@media (max-width: 812px) {
    .container-new {
        grid-template-columns: 500px 1fr;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: 31px;
        margin-left: 31px;
    }
}
@media (max-width: 767.96px) {
    .container-new {
        grid-template-columns: 1fr;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
        gap: 16px;
    }
}
.sub-graid-box1{
    width: 100%;
    height: auto;
    margin-bottom: 24px;
    border-radius: 8px;
}
.typ-name{
    width: 100%;
    height: 55px;
    margin-bottom: 40px;
    display: flex;
    justify-content:start;
    border-bottom: 4px solid #FF1111;
    color: #333333;
    font-weight: medium;

}
.typ-name p{
    font-size: 36px;
}
.container-sub{
    display: grid;
    grid-template-columns: 396px 1fr;
    border: 1px solid #DBDFEC;
    border-radius: 8px;
    margin-bottom: 24px;
}
@media (max-width: 991px) {
    .container-sub{
        display: grid;
        grid-template-columns: 1fr;
        border: 1px solid #DBDFEC;
        border-radius: 8px;
        margin-bottom: 24px;
    }
}
.item-1{
    width: 100%;
    height: 100%;
    border-radius: 8px;
}
.item-2{
    width: 100%;
    height: auto;
    border-radius: 8px;
}
.item-1 img{
    border-radius: 8px;
    height: 100%;
}
.item-1 > img{
    object-fit: cover;
}
.size-iframe{
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .container-sub{
        display: grid;
        grid-template-columns:1fr;
    }
}
@media (max-width: 425px) {
    .container-sub {
        grid-template-columns: 1fr;
    }
}
.padding-16{
    padding: 16px;
}
@media (min-width: 1440px) {
    img{
        height: 100%;
    }
    .item-1{
        height: 224px;
    }
}
.grid-item{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
}
.grid-item-in{
    display: grid;
    gap: 4px;
}
.text-title{
    color: #333333;
    font-size: 24px;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* จำกัด 2 บรรทัด */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.text-title2{
    color: #333333;
    font-size: 22px;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* จำกัด 2 บรรทัด */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.text-intro{
    color: #777777;
    font-size: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* จำกัด 2 บรรทัด */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.layout-icon{
    display: grid;
    gap: 20px;
    height: 22px;
    max-width: 163px;
    grid-template-columns: 95px 1fr;
    margin-top: 7px;
}
.icon-font-size{
    font-size: 18px;
    color: #777777;
}
/* เเนะนำ */
.sub-graid-box2{
    width: 100%;
    height: auto;
    margin-bottom: 12px;
    border-radius: 8px;
}
@media (min-width:1440px){
    .sub-graid-box2{
        /* height: 244px; */
    }
    .container-sub2 .fix-size1{
        height: 140px;
    }
    .container-sub2 .fix-size2{
        height: 104px;
    }
}
.container-sub2{
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid #DBDFEC;
    border-radius: 8px;
    margin-bottom: 12px;
}
.grid-item2{
    display: grid;
    padding: 10px;
    grid-template-columns: 1fr;
}
.item-2 img{
    border-radius: 8px;
}
@media (min-width: 1440px) {
    .con-nev{
        padding: 0 0;
    }
}
.type-name2{
    width: 100%;
    height: 38px;
    margin-bottom: 12px;
}
.text-recommend{
    font-size: 32px;
    color: #333333;
}
.ad{
    width: 250px;
    height: auto;
    margin-bottom: 20px;
}
.tag-learn{
    height: 27px; 
    margin-top: 12px;
    margin-bottom: 5px;
}
.tag-learn.expanded {
    height: auto;
    margin-bottom: 0;
}
@media(max-width: 1199px){
    .tag-learn{
        height: auto;
        margin-bottom: 0
    }
    .container-sub {
        grid-template-columns: 1fr;
    }
}
.margin-grid-box1{
    margin-top: 55px;
}
@media (max-width:767.96px){
    .margin-grid-box1{
        margin-top:0;
    }
}
.push-6 {
    display: flex; 
    flex-wrap: nowrap; 
    overflow-x: auto;
    white-space: nowrap;
    list-style: none;
    scroll-behavior: flat;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.push-6::-webkit-scrollbar {
    display: none;
}
.push-6 li {
    flex: 0 0 auto;
    box-sizing: border-box;
}