﻿/*
 * Extracted from css/widget.css, lines 45844-46443
 * Region label: OT-009
 */
    /* #region OT-009 */
    .ot-009 {
        /* .container-editor #sec-recommend-editor-picks */
        /* #sec-recommend-yt */
        /*.container-plearn #sec-recommend-plearn */
        /*yt*/
        /*.youtube-container.youtube-gallery {
		 overflow: scroll;
	}
	*/
    }

        .ot-009 .bg-menu-tab {
            box-shadow: none;
        }

        .ot-009 .search-area {
            max-width: 570px;
            padding-bottom: 24px;
            padding-top: 24px;
        }

        .ot-009 .ml-2per {
            margin-left: -2%;
        }

        .ot-009 .container--content.container-editor {
            margin-bottom: 50px !important;
        }

        .ot-009 #sec-recommend-editor-picks .title h2 {
            margin-bottom: 24px;
        }

        .ot-009 #sec-recommend-editor-picks .box-podcast .card-content {
            filter: drop-shadow(1px 2px 10px rgba(35, 19, 18, 0.1));
        }

        .ot-009 #sec-recommend-editor-picks .main-item .box-podcast {
            margin-bottom: 30px !important;
        }

            .ot-009 #sec-recommend-editor-picks .main-item .box-podcast .card-content {
                border-top: none;
                min-height: unset;
                height: auto;
                display: flex;
                border-radius: 3px;
                background-color: #fff;
            }

        .ot-009 #sec-recommend-editor-picks .main-item .card-content-img {
            width: 100%;
            height: auto;
            object-fit: cover;
            min-height: unset;
            border-radius: 3px 0px 0px 3px;
        }

        .ot-009 #sec-recommend-editor-picks .main-item .box-podcast .box-text {
            border-top: 5px solid #fdd200;
            max-width: 34.3%;
            position: relative;
            padding: 24px 24px 16px;
        }

        .ot-009 #sec-recommend-editor-picks .main-item .card-content-type {
            margin-bottom: 10px;
        }

        .ot-009 #sec-recommend-editor-picks .main-item .card-content-title {
            margin-bottom: 10px;
        }

        .ot-009 #sec-recommend-editor-picks .main-item .card-readmore {
            position: absolute;
            bottom: 10px;
            width: 100%;
        }

        .ot-009 #sec-recommend-editor-picks .main-item a#btnShare {
            position: absolute;
            right: 50px;
            bottom: 5px;
        }

        .ot-009 #sec-recommend-editor-picks .main-item .card-content-type {
            font-size: 12px;
            line-height: 30px;
        }

        .ot-009 #sec-recommend-editor-picks .card-content-readmore {
            font-size: 14px;
            line-height: 30px;
        }

        .ot-009 #sec-recommend-editor-picks .item {
            margin-bottom: 30px;
        }

            .ot-009 #sec-recommend-editor-picks .item:nth-last-child(-n+4) {
                margin-bottom: 0px;
            }

        .ot-009 .icon-editor {
            margin-right: 8px;
        }

        .ot-009 .container--content.container-yt {
            margin-bottom: 40px;
        }

        .ot-009 #sec-recommend-yt .title {
            margin-bottom: 16px !important;
        }

            .ot-009 #sec-recommend-yt .title.youtube-tab-playlist {
                margin-bottom: 0px !important;
            }

        .ot-009 #sec-recommend-editor-picks .main-item .card-content-title h4 {
            color: #222;
            font-family: "Krungsri-Condensed-Bold";
            font-size: 24px;
            letter-spacing: 0;
            line-height: 36px;
            margin-bottom: 0;
            height: unset;
        }

        .ot-009 #sec-recommend-editor-picks .item:not(.main-item) .card-content-detail {
            display: none;
        }

        .ot-009 #sec-recommend-editor-picks .main-item .box-text img.icon-clock {
            bottom: 4px;
        }

        .ot-009 #sec-recommend-editor-picks .item:not(.main-item) .box-text img#shareImageIcon {
            margin-bottom: 8px;
        }

        .ot-009 .container--content.container-plearn {
            margin-bottom: 40px;
        }

        .ot-009 #sec-recommend-plearn .title h2 {
            margin-bottom: 24px;
        }

        .ot-009 #sec-recommend-plearn .title-txt h3 {
            font-family: 'Krungsri-Condensed-bold';
            font-style: normal;
            font-weight: 700;
            font-size: 20px;
            line-height: 30px;
            color: #ffd400;
        }

        .ot-009 #sec-recommend-plearn .title-more {
            font-family: 'Thongterm';
            font-style: normal;
            font-weight: 400;
            font-size: 16px;
            line-height: 30px;
            color: #fff;
        }

            .ot-009 #sec-recommend-plearn .title-more:hover {
                color: #f76f00;
            }

        .ot-009 .box-podcast:last-child {
            margin-bottom: 0px !important;
        }

        .ot-009 #sec-recommend-plearn .title-type {
            margin-bottom: 24px;
        }

        .ot-009 #sec-recommend-plearn .box-text img#shareImageIcon {
            margin-bottom: 8px;
        }

        .ot-009 .box-podcast .card-content {
            border-top: none;
            min-height: unset;
            height: 130px;
            display: flex;
            border-radius: 3px;
            background-color: #fff;
        }

        .ot-009 .card-content-img {
            width: 130px;
            height: 130px;
            object-fit: cover;
            min-height: unset;
            border-radius: 3px 0px 0px 3px;
        }

        .ot-009 .card-content-type {
            font-family: 'Thongterm';
            font-style: normal;
            font-weight: 700;
            font-size: 14px;
            line-height: 30px;
            color: #5a5a5a;
            padding:0;
        }

        .ot-009 .card-content-title { 
            padding: 0;
        }

        .ot-009 .box-podcast .box-text {
            padding: 10px;
            /*padding: 8px 10px 8px 8px;*/
            padding: 8px 10px 8px 10px;
            min-width: 240px;
            width:100%;
        }

        .ot-009 .card-content-name {
            display: none;
        }

        .ot-009 .card-content-title h4 {
            white-space: break-spaces;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .ot-009 .card-content-title h4 {
            font-family: 'Krungsri-Condensed-bold';
            font-size: 16px;
            line-height: 24px;
            height: 46px;
        }

        .ot-009 .card-content-readmore {
            font-family: 'Thongterm';
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            line-height: 30px;
            width: 100%;
            position: relative;
        }

        .ot-009 .box-text img.icon-clock {
            width: 12px;
            height: 12px;
            bottom: 4px;
            margin-right: 0px;
            position: relative;
        }

        .ot-009 .box-text img#shareImageIcon {
            width: 11px;
            height: 12px;
        }

        .ot-009 .default.text.item-select .item {
            font-family: 'Krungsri-Condensed-bold';
            font-weight: 700;
            font-size: 16px;
            line-height: 27px;
            color: #222;
        }

        .ot-009 .ui.dropdown.the-coach-dropdown-mobile > .text {
            font-family: 'Krungsri-Condensed-bold';
            font-weight: 700;
            font-size: 16px;
            line-height: 27px;
            color: #222 !important;
        }

        .ot-009 .ui.selection.dropdown.the-coach-dropdown-mobile .menu > .item {
            font-family: 'Thongterm';
            font-style: normal;
            font-weight: 400;
            font-size: 16px;
            line-height: 34px;
            color: #5a5a5a;
            height: 44px;
            padding: 8px 20px 8px 16px !important;
        }

        .ot-009 .ui.dropdown.the-coach-dropdown-mobile .menu .active.item {
            font-family: 'Krungsri-Condensed-bold';
            font-weight: 700;
            font-size: 16px;
            line-height: 27px;
            color: #222;
            background-color: #fdd200;
            height: 44px;
            padding: 8px 20px 8px 16px !important;
        }

        .ot-009 .ui.fluid.dropdown.the-coach-dropdown-mobile {
            display: block;
            width: 100%;
            min-width: 0em;
            height: 44px;
            padding: 8px 20px 8px 16px;
        }

        .ot-009 .youtube-container.youtube-gallery {
            position: relative;
        }

        .ot-009 .youtube-gradient:after {
            content: ' ';
            position: absolute;
            left: 0;
            right: 0;
            height: 83px;
            bottom: 0;
            width: 100%;
            background: linear-gradient(180deg, rgba(249, 249, 249, 0) 0%, #f9f9f9 100%);
            z-index: 1;
        }

        .ot-009 .youtube-container.youtube-gallery .card-content:last-child {
            position: relative;
            z-index: 5;
        }

        .ot-009 .container--content .card-info .content.ytContent {
            padding-left: 16px;
        }

        .ot-009 button.close {
            color: #000;
            text-decoration: none;
        }

        .ot-009 i.far.fa-play-circle {
            left: 15% !important;
        }

    @media (max-width: 1199px) {
        .ot-009 .nav-menu-mobile {
            padding-top: 0;
            padding-bottom: 0;
            top: 0px;
            margin-top: 0;
            margin-bottom: 0;
            position: relative;
        }

        .ot-009 .list-group .list-group-item {
            border-bottom: 1px solid #f3f3f3;
        }

        .ot-009 .nav-secondary-menu .sub {
            border-bottom: 1px solid #f3f3f3;
        }

        .ot-009 .box-podcast .box-text {
            min-width: unset;
        }
    }

    @media screen and (max-width: 768px) {
        .ot-009 {
            /*sec-1*/
            /*sec3*/
            /*#sec-recommend-editor-picks .item .box-podcast:last-child{
			 margin-bottom: 24px !important;
		}
		*/
            /*yt*/
            /*btnShare*/ 
        }

        .background-other .ot-009 {
            padding-left: 15px;
            padding-right: 15px;
        }

            .ot-009 body {
                padding-top: 56px;
            }

            .ot-009 .search-area {
                padding-bottom: 16px;
                padding-top: 16px;
            }

            .ot-009 #sec-recommend-editor-picks .main-item .card-content-title h4 {
                font-size: 18px;
            }

            .ot-009 .container--content.container-editor {
                margin-bottom: 8px !important;
            }

            .ot-009 #sec-recommend-editor-picks .title h2 {
                margin-bottom: 16px;
            }

            .ot-009 #sec-recommend-editor-picks .main-item .box-podcast {
                margin-bottom: 16px !important;
            }

            .ot-009 #sec-recommend-editor-picks .item .box-podcast {
                margin-bottom: 16px !important;
            }

            .ot-009 #sec-recommend-editor-picks .main-item .box-podcast .card-content {
                border-top: none;
                min-height: unset;
                height: auto;
                display: block;
            }

            .ot-009 #sec-recommend-editor-picks .main-item .box-podcast .box-text {
                border-top: unset;
                max-width: unset;
                position: relative;
                padding: 8px 10px 10px;
            }

            .ot-009 #sec-recommend-editor-picks .main-item .card-content-type {
                margin-bottom: 1px;
            }

            .ot-009 #sec-recommend-editor-picks .main-item .card-content-title {
                margin-bottom: 0;
            }

            .ot-009 .card-content-detail {
                display: none;
            }

            .ot-009 #sec-recommend-editor-picks .main-item .card-readmore {
                position: relative;
                bottom: 0;
                width: 100%;
            }

            .ot-009 #sec-recommend-editor-picks .main-item a#btnShare {
                position: relative;
                right: unset;
                bottom: 6px;
            }

            .ot-009 #sec-recommend-editor-picks .main-item .card-content-title h2 {
                font-size: 18px;
                letter-spacing: 0;
                line-height: 30px;
            }

            .ot-009 #sec-recommend-editor-picks .main-item .card-content-type {
                font-size: 14px;
                line-height: 30px;
            }

            .ot-009 #sec-recommend-editor-picks .card-content-readmore {
                font-size: 12px;
                line-height: 26px;
            }

            .ot-009 #sec-recommend-editor-picks .main-item .card-content-readmore {
                font-size: 14px;
                line-height: 30px;
            }

            .ot-009 #sec-recommend-editor-picks .item {
                margin-bottom: 0px;
            }

            .ot-009 .icon-editor {
                margin-right: 10px;
                height: 29.54px;
                width: 31px;
            }

            .ot-009 #sec-recommend-plearn .title h2 {
                margin-bottom: 24px;
            }

            .ot-009 #sec-recommend-plearn .title-type {
                margin-bottom: 16px;
            }

            .ot-009 .container--content.container-plearn {
                margin-top: 24px;
                margin-bottom: 24px;
            }

            .ot-009 #sec-recommend-plearn .title .title-txt h3 {
                font-size: 18px;
            }

            .ot-009 #sec-recommend-plearn .title-more {
                font-size: 14px;
            }

            .ot-009 #sec-recommend-plearn .title .title-more {
                font-size: 14px;
            }

            .ot-009 .box-podcast .card-content {
                height: 110px;
            }

            .ot-009 .card-content-img {
                width: 110px;
                height: 110px;
                object-fit: cover;
                min-height: unset;
                border-radius: 3px 0px 0px 3px;
            }

            .ot-009 .card-content-type {
                font-size: 12px;
                line-height: 26px;
            }

        .ot-009 .card-content-title h4 {
            color: #222;
            font-family: 'Krungsri-Condensed-bold';
            font-size: 16px;
            line-height: 24px;
            margin-bottom: 0;
            padding: 0;
        }

            .ot-009 .box-podcast .box-text {
                padding: 3px 10px 4px 10px;
                min-width: 220px;
            }

            .ot-009 .box-text img.icon-clock {
                width: 14px;
                height: 14px;
                bottom: 3px;
            }

            .ot-009 .card-content-readmore {
                font-size: 12px;
                line-height: 26px;
            }

            .ot-009 .box-podcast:last-child {
                margin-bottom: 16px !important;
            }

            .ot-009 #sec-recommend-plearn .title-txt h3 {
                font-size: 18px;
            }

            .ot-009 .container--content.container-yt {
                margin-top: 16px;
                margin-bottom: 8px;
            }

            .ot-009 #sec-recommend-yt .title.youtube-tab-playlist {
                margin-bottom: 16px !important;
            }

            .ot-009 .youtube-gradient:after {
                content: none;
            }

            .ot-009 .container--content .card-info .image.ytImage {
                margin-left: 16px;
            }

            .ot-009 .container--content .card-info .content.ytContent {
                padding-left: 16px;
                padding-right: 16px;
            }

            .ot-009 a#btnShare {
                position: relative;
                bottom: 5px;
            }

            .ot-009 #sec-recommend-plearn .box-text img#shareImageIcon,
            .ot-009 #sec-recommend-editor-picks .item:not(.main-item) .box-text img#shareImageIcon {
                margin-bottom: 4px;
            }
    }

    @media screen and (max-width: 576px) {
        .ot-009 .box-podcast .box-text {
            padding: 3px 10px 4px 10px;
            width: 100%;
        }
    }

    /* #endregion */
