@import url('https://fonts.googleapis.com/css2?family=K2D:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

:root {
    --nPrimary: #903237;
    --nDarkRed: #7b1f24;
    --nSecondary: #a18c65;
    --mainFont: "K2D", sans-serif;
    /*font family*/
    --nRadius: 8px;
    --nIvory: rgb(255 253 224);
    /*Thai Tone งาช้าง*/
    --nGreen: rgb(125 181 102);
    /*เขียว*/
    --nPink: rgb(237 187 198);
    /*กลีบบัว*/
    --nRed: rgb(201 36 43);
    /*แดงชาด*/
    --nStraw: rgb(218 186 138);
    /*ฟาง*/
    --nYellow: rgb(234 212 21);
    /*เหลืองไพล*/
    --nLightBrown: rgb(210 188 164);
    /*น้ำตาลอ่อน*/
	--nLightBrown2: rgb(247 232 215);
	/*น้ำตาลอ่อน2*/
	--nBrown: rgb(100 60 1);
	/*น้ำตาล*/
    --nDarkYellow: #d1cd98;
    --nDarkPink: #d7a0ad;
    --nLightPink: #f8e3e7;
  	/*step*/
	--qPrimary:#1C3571;
	--qWhite:#ffffff;
	--qBlack:#000;
	--qGray:#ddd;
	--qGreen:#12753A;
	--qOrange:#ffcc00;
	--qLightBlue:#cadcf9;
}

html,
body,
.Head,
p,
ul,
ol,
h1,
h2,
h3,
h4,
h5,
h6,
div,
th,
td,
div,
lagel,
input,
a,
td {
    font-family: var(--mainFont) !important;
}

html,
body,
.Head,
p,
ul,
ol,
div,
th,
td,
div,
lagel,
input,
a {
    /*font-size: 16px;*/
}

#login .userDisplayName a,
#login .userDisplayName a:link,
#login userDisplayName a:visited,
#login .userDisplayName a:hover,
#login .loginGroup a,
#login .loginGroup a:link,
#login .loginGroup a:visited,
#login .loginGroup a:hover {
    font-size: 14px !important;
    text-transform: none !important
}

.nav-main ul li a,
.nav-main ul li a:link {
    font-family: var(--mainFont) !important;
    font-size: 16px !important;
    font-weight: 500;
    text-transform: unset;
}

@media (min-width: 992px) {
    header.newHeader .header-body {
        background: rgba(0, 0, 0, 0.8) !important;
    }
}

header.full-header .header-body {
    background: rgba(0, 0, 0, 0.5) !important;
}

body.sticky-menu-active header.full-header .header-body {
    background: rgba(0, 0, 0, 0.8) !important;
}

.owl-carousel .owl-item div {
    padding: 10px
}

.church {
    margin-bottom: 20px;
}

.thumb-info-wrapper a img {
    padding-top: 4px;
}

.thumb-info-caption {
    padding: 6px 6px !important;
}

.custom-event-infos {
    float: unset !important;
}

header nav.mega-menu ul.nav-main li.mega-menu-item ul.sub-menu {
    margin: 4px 0px 4px 20px !important;
}

html header nav.mega-menu ul.nav-main li.mega-menu-item ul.sub-menu ul {
    list-style: square !important;
}

html header nav.mega-menu ul.nav-main li.mega-menu-item ul.sub-menu ul.sub-menu a {
    font-size: 14px !important;
}

#share-buttons img {
    width: 32px;
}

.lead {
    line-height: 34px;
}



/* PAGE BACKGROUND */
/* background color for the header at the top of the page  */
.HeadBg {}

/* background color for the content part of the pages */
Body {}

.ControlPanel {}

/* background/border colors for the selected tab */
.TabBg {}

.LeftPane {}

.ContentPane {}

.RightPane {}

/* text style for the selected tab */
.SelectedTab {}

/* hyperlink style for the selected tab */
A.SelectedTab:link {}

A.SelectedTab:visited {}

A.SelectedTab:hover {}

A.SelectedTab:active {}

/* text style for the unselected tabs */
.OtherTabs {}

/* hyperlink style for the unselected tabs */
A.OtherTabs:link {}

A.OtherTabs:visited {}

A.OtherTabs:hover {}

A.OtherTabs:active {}

/* GENERAL */
/* style for module titles */
.Head {}

/* style of item titles on edit and admin pages */
.SubHead {}

/* module title style used instead of Head for compact rendering by QuickLinks and Signin modules */
.SubSubHead {}

/* text style used for most text rendered by modules */
.Normal {}

/* text style used for textboxes in the admin and edit pages, for Nav compatibility */
.NormalTextBox {}

.NormalRed {}

.NormalBold {}

/* text style for buttons and link buttons used in the portal admin pages */
.CommandButton {}

/* hyperlink style for buttons and link buttons used in the portal admin pages */
A.CommandButton:link {}

A.CommandButton:visited {}

A.CommandButton:hover {}

A.CommandButton:active {}

/* button style for standard HTML buttons */
.StandardButton {}

/* GENERIC */
H1 {}

H2 {}

H3 {}

H4 {}

H5,
DT {}

H6 {}

TFOOT,
THEAD {}

TH {}

A:link {}

A:visited {}

A:hover {}

A:active {}

SMALL {}

BIG {}

BLOCKQUOTE,
PRE {}


UL LI {}

UL LI LI {}

UL LI LI LI {}

OL LI {}

OL OL LI {}

OL OL OL LI {}

OL UL LI {}

HR {}

/* MODULE-SPECIFIC */
/* text style for reading messages in Discussion */
.Message {}

/* style of item titles by Announcements and events */
.ItemTitle {}

/* Menu-Styles */
/* Module Title Menu */
.ModuleTitle_MenuContainer {}

.ModuleTitle_MenuBar {}

.ModuleTitle_MenuItem {}

.ModuleTitle_MenuIcon {}

.ModuleTitle_SubMenu {}

.ModuleTitle_MenuBreak {}

.ModuleTitle_MenuItemSel {}

.ModuleTitle_MenuArrow {}

.ModuleTitle_RootMenuArrow {}

/* Main Menu */

.MainMenu_MenuContainer {}

.MainMenu_MenuBar {}

.MainMenu_MenuItem {}

.MainMenu_MenuIcon {}

.MainMenu_SubMenu {}

.MainMenu_MenuBreak {}

.MainMenu_MenuItemSel {}

.MainMenu_MenuArrow {}

.MainMenu_RootMenuArrow {}

/* Login Styles */
.LoginPanel {}

.LoginTabGroup {}

.LoginTab {}

.LoginTabSelected {}

.LoginTabHover {}

.LoginContainerGroup {}

.LoginContainer {}

body {
    background-color: #fff;
}

.books {
    padding: 2rem 0;
}

.books .items {
    background: #e3ccb0 url(/Portals/0/BookShelf/wood.png) repeat;
    border-top: solid rgba(138, 74, 2, 0.651) 20px;
    border-left: solid rgba(138, 74, 2, 0.651) 20px;
    border-right: solid rgba(138, 74, 2, 0.651) 20px;
    border-bottom: solid rgba(138, 74, 2, 0.651) 20px;
    box-shadow: 30px 30px 30px -30px rgba(100, 59, 2, 0.45) inset, 20px 0px 10px -20px rgba(100, 59, 2, 0.45) inset;
}

.books .item {
    position: relative;
    text-align: center;
    padding: 4rem 2rem 1rem 2rem;
    border-bottom: 0;
}

/*.books .item:nth-child(-n+8){
	position: relative;	
	text-align: center;
	padding: 4rem 2rem 1rem 2rem;	
	border-bottom:solid rgba(138, 74, 2, 0.651) 20px;
}*/
@media (max-width:575px) {
    .books .item {
        border-bottom: solid rgba(138, 74, 2, 0.651) 20px;
    }

    .books .item:last-child {
        border-bottom: 0;
    }
}

@media (min-width:576px) and (max-width:991px) {
    .books .item:nth-child(-n+10) {
        border-bottom: solid rgba(138, 74, 2, 0.651) 20px;
    }
}

@media (min-width:992px) {
    .books .item:nth-child(-n+8) {
        border-bottom: solid rgba(138, 74, 2, 0.651) 20px;
    }
}

.books .item a {
    display: block !important;

}

.books .item img {
    box-shadow: 25px 8px 20px -20px rgba(0, 0, 0, 0.45);
    z-index: 4;
    height: 280px !important
}

.books .item .edit-area img {
    width: 20px !important;
    height: 20px !important;
}

@media (min-width:1002px) and (max-width:1190px) {
    .books .item img {
        height: auto !important
    }

    .books .item .edit-area img {
        width: 20px !important;
        height: 20px !important;
    }
}

.books .item img:hover {
    box-shadow: rgb(0, 0, 0) 0px 20px 30px -10px;
    z-index: 4;

}

.books .item .book-name {
    z-index: 5;
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff !important;
    font-size: 3rem;
    font-weight: 400;
    line-height: 1.5rem;
    background-color: rgba(0, 0, 0, 1);
    display: block !important;
    padding: 0.5rem;
    text-align: left;
    font-family: var(--mainFont) !important;
    opacity: 0;
}

.books .item:hover .book-name {
    z-index: 5;
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5rem;
    background-color: rgba(0, 0, 0, 1);
    display: block !important;
    padding: 0.5rem;
    text-align: left;
    font-family: var(--mainFont) !important;
    /*transition: all 0.5s linear;*/
    transition: transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
}

#dnn_dnnSearch_ClassicSearch {
    display: none
}

/*ebook detail*/
.box-detail .topic {
    color: #333;
    font: normal 400 24px / 34px var(--mainFont);
    margin-bottom: 10px
}

.box-detail span.date {
    font-size: 14px !important;
    color: #333;
    font-family: var(--mainFont);
    margin-bottom: 20px
}

/*custom*/
.porto .post-image {
    text-align: left !important;
}

.porto .post-image img.article-thumbnail {
    /*display: inline-block !important;*/
  display: block !important;
width:100% !important;
}

p {
    margin: 0 0 0px !important;
}

h2 {
    margin: 0 0 0px 0 !important;
}

.blog-posts article {
    margin-bottom: 40px !important;
   margin-top: 40px !important;
}

/*custom Y2024 M04 D25*/
/*divider*/
@media (min-width:1200px) {
    .wrap-divider {
        min-height: 643px;
    }
}

.wrap-divider {
    position: relative;
    background-size: cover !important;
    padding: 8rem 3rem !important;
}

.min-h-banner {
    min-height: 643px;
}

.wrap-divider h1 {
    font-size: 3rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
}

.wrap-divider .lead {
    line-height: 1.5 !important;
    font-weight: 400 !important;
}

.curve-divider-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.curve-divider-bottom svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 70px;
}

.curve-divider-bottom .shape-fill {
    fill: #FFFFFF;
}

.curve-divider-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.curve-divider-top svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 70px;
}

.curve-divider-top .shape-fill {
    fill: #FFFFFF;
}

.rot-180 svg {
    transform: rotate(180deg) !important;
}

.txt-shadow {
    text-shadow: 0px 0px 4px #000000;
}

/*image circle*/
.icon-circle {
    width: 98px !important;
    border-radius: 50% !important;
    display: block;
    margin: auto;
}

/*custom text in box home page*/
.box-home .restaurant .thumb-info-caption .thumb-info-caption-text,
.box-home .restaurant .thumb-info-caption p {
    padding: 5px !important
}

.box-home .restaurant .thumb-info-custom {
    border-radius: var(--nRadius) !important;
}

.height-area {
    line-height: 2.5rem !important;
    text-align: justify;
    font-size: 1.05rem !important;

}

p.height-area {
    padding: 6px !important;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .height-area {
        min-height: 280px
    }
}

@media (min-width: 1200px) {
    .height-area {
        min-height: 450px
    }
}

/*Custom  Title page and bread crumb */
.page-top {
    border-top: solid 2px var(--nPrimary) !important;
    border-bottom: solid 2px var(--nPrimary) !important;
    background: var(--nPrimary);
    background: linear-gradient(to left, var(--nLightBrown) 0%, var(--nPrimary) 30%);
}

section.page-top h1 {
    border-bottom: 0px !important;
    color: #fff !important;
    font-weight: 500;
}

html section.page-top .breadcrumb span {
    color: #fff !important;
    font-weight: 500;
}

/*footer*/
.body>#footer {
    background: rgb(144, 50, 55, 1) !important;
    /*background: radial-gradient(circle, rgba(186,168,116,1) 0%, rgba(144,50,55,1) 70%) !important;*/
    border-top-color: var(--nPrimary) !important;
    padding: 0 !important;
    margin-top: 0 !important
}

.body>#footer .footer-copyright {
    background: #661629 !important;
    border-top-color: var(--nPrimary) !important;
    margin-top: 0 !important
}

.body>#footer .copyright,
.body>#footer p {
    color: #fff !important;
}

/*custom mian*/
.main {
    padding-bottom: 60px
}

/*link color*/
.main a,
a:link,
{
color: var(--nPrimary) !important;
}

.main a:visited {
    color: var(--nPrimary) !important;
}

.main a:hover {
    color: #8c7751 !important
}

/*custom title news*/
.la-title {
    font-weight: 400 !important;
}

/*custom slide navigation*/
.ls-bottom-nav-wrapper {
    bottom: 80px;
}

/*rules-area*/
.rules-area li,
.rules-area p {
    color: #000 !important;
    font-size: 16px !important;
    line-height: 40px !important
}

.rules-area h2,
.rules-area h3 {
    margin-bottom: 15px !important;
    line-height: 40px !important
}

/*custom grid*/

@media (max-width: 576px) {
    .custom-container {
        margin: auto;
        width: 540px
    }
}

@media (min-width: 768px) {
    .custom-container {
        margin: auto;
        width: 960px
    }
}

@media (min-width: 992px) {
    .custom-container {
        margin: auto;
        width: 720px
    }
}

@media (min-width: 1200px) {
    .custom-container {
        margin: auto;
        width: 1140px
    }
}

@media (min-width: 1400px) {
    .custom-container {
        margin: auto;
        width: 1320px
    }
}

/*custom tab content*/
.wrap-tab .tab-content {
    border-radius: 0 0 4px 4px;
    box-shadow: 0;
    border: 0;
    padding: 0;
}

.wrap-tab .tab-content #item01 {
    background: url(/Portals/0/Images/bg/bg-tab01-2.png) right bottom repeat-x fixed;
    padding-bottom: 60px;
}

.wrap-tab .tab-content #item02 {
    background: url(/Portals/0/Images/bg/bg-tab02-5.png) right bottom repeat-x fixed;
    padding-bottom: 60px;
}

.wrap-tab .tab-content #item03 {
    background: url(/Portals/0/Images/bg/bg-tab03-6.png) right bottom repeat-x fixed;
    padding-bottom: 60px;
}

.wrap-tab .tab-content #item04 {
    background: url(/Portals/0/Images/bg/bg-tab04-2.png) right bottom repeat-x fixed;
    padding-bottom: 60px;
}

.wrap-tab .dxgvControl_MaterialCompact,
.wrap-tab .dxgvDisabled_MaterialCompact {
    background-color: transparent !important;
}

.wrap-tab .textgridheader {
    font-family: var(--mainFont) !important;
    font-size: 16px !important;
    color: #fff !important;
    background-color: var(--nPrimary) !important;
    font-weight: 500;
}

.wrap-tab .textgridcell {
    font-family: var(--mainFont) !important;
    color: #000 !important;
    font-size: 15px !important;
    line-height: 35px;
    font-weight: 400;
}

.wrap-tab .textdetail {
    font-family: var(--mainFont) !important;
    font-size: 16px !important;
    line-height: 35px;
    color: #000 !important;
    font-weight: 500;
}

.wrap-tab .dxpLite_MaterialCompact .dxp-current {
    background-color: var(--nPrimary) !important;
}

/*about us*/
.about-area p {
    font-size: 18px !important;
    color: #000 !important;
    line-height: 40px !important
}

/*icon edit for dnnArticle */
.icon-edit img {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
}

/*custom tab for dnnArticle*/
.jqx-tabs-header {
    height: 40px !important;
}

.jqx-item {
    height: 37px !important;
}

/*article list*/
.article-list {
    padding-top: 20px;
    padding-bottom: 20px;
}

.article-list .innner-zone {
    background-color: #eeeeee;
    padding: 0 15px;
}

.article-list .topic,
.article-list .topic a,
.article-list .topic a:link,
.article-list .topic:visited {
    font-size: 16px;
    line-height: 30px;
    color: var(--nPrimary);
    font-family: var(--mainFont);
    height: 120px;
    overflow: hidden;
    padding-bottom: 10px;
}

.article-list .date {
    font-size: 12px;
    color: #333;
}



.article-list .topic em {
    padding-right: 5px;
}

.article-list .topic-zone .price span {
    margin-left: 5px
}

.article-list .img-cover {

    width: 100%;
    padding: 15px;
    height: 450px;
    overflow: hidden;
    margin: auto;
    display: block;
    background-color: #f4f4f4;
    text-align: center;
    position: relative;

}

.article-list .img-cover a img,
.article-list .img-cover a img:link,
.article-list .img-cover a img:visited {
    box-shadow: 0px 0px 0px #7b4d0a
}

.article-list .img-cover a img:hover {
    box-shadow: 0px 0px 10px #7b4d0a
}

.article-list .img-cover a img:active {
    box-shadow: 0px 0px 15px #7b4d0a
}

.article-list .img-cover img {
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 400px;
    width: 80%;
}

.article-list .topic-zone {
    width: 100%;
    padding: 15px;
}

@media (max-width:992px) {

    .article-list .topic,
    .article-list .topic a,
    .article-list .topic a:link,
    .article-list .topic:visited {
        height: 60px;
    }

    .article-list .img-cover {
        height: 260px;
    }

    .article-list .img-cover img {
        width: auto;
        height: 220px;
    }
}

.article-list .author-zone {
    padding-top: 6px;
    padding-bottom: 6px;
    font-family: var(--mainFont);
    color: #333333;
    margin-bottom: 10px;
    font-style: italic;
}

/*article-detail*/
.article-detail {
    padding-bottom: 40px;
}

.article-detail .topic {
    color: #333;
    font: normal 400 24px/ 34px var(--mainFont) !important;
    margin-bottom: 10px
}

.article-detail span.date {
    font-size: 14px !important;
    color: #333;
}

.article-detail .content-zone {
    margin-top: 40px;
    margin-bottom: 40px;
}

.article-detail .content-zone-youtube {
    margin-top: 40px;
    margin-bottom: 0px;
}

.article-detail p {
    font-size: 16px;
    color: #555;
    line-height: 28px;
}

.article-detail a.text-download,
.article-detail a.text-download:link,
.article-detail a.text-download:visited,
.article-detail a.text-download:hover {
    color: #fff !important;
    text-decoration: none !important;
    padding-left: 10px;
}

.article-detail .topic em {
    padding-right: 5px;
}

.article-detail .author-zone {
    font-family: var(--mainFont);
    color: #333333;
    margin-bottom: 10px;
    font-style: italic;
    font-weight: 600;
}

/*btn*/
html .btn-primary {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #903237;
    border-color: #903237 #903237 #c29948;
}

html .btn-primary:hover {
    border-color: #8c7751 #8c7751 #8c7751 !important;
    background-color: #8c7751 !important;
}

html .btn-primary:active,
html .btn-primary:focus {
    border-color: #8c7751 #8c7751 #8c7751 !important;
    background-color: #8c7751 !important;
}

html .btn-primary.dropdown-toggle {
    border-left-color: #8c7751 !important;
}

html .btn-primary[disabled] {
    border-color: #999999 !important;
    background-color: #999999 !important;
}

html .btn-primary:hover {
    color: #FFF !important;
}

/*dnnArticle category*/
.cate-list img {
    display: none
}

.cate-list td {
    padding: 0;
}

a.cate-list::before {
    content: "-";
    padding-right: 10px;
    font-weight: 300 !important;
}

a.cate-list,
a.cate-list:link,
a.cate-list:visited,
a.cate-list:hover {
    text-decoration: none;
    font-size: 16px !important;
    line-height: 30px;
    padding: 1px 10px;
    display: block;
    border: solid 1px var(--nPrimary);
    margin: 5px 0;
    border-radius: 10px;
}

a.cate-list,
a.cate-list:link,
a.cate-list:visited {
    color: var(--nPrimary) !important;
}

a.cate-list:hover {
    color: #000
}

/*dnn button*/
.dnnPrimaryAction,
.dnnFormItem input[type="submit"],
a.dnnPrimaryAction {
    border-color: var(--nPrimary) !important;
    background: var(--nDarkRed) !important;
    text-shadow: none !important;
    color: #fff !important;
    text-decoration: none !important;
}

.dnnPrimaryAction:hover,
.dnnFormItem input[type="submit"]:hover,
a.dnnPrimaryAction:hover {
    border-color: #8c7751 #8c7751 #8c7751 !important;
    background-color: #8c7751 !important;
    text-shadow: none !important;
    color: #fff !important;
    text-decoration: none !important;
}

/*cookiemessage*/
.cookiemessage {
    font-size: 0.9rem;
    line-height: 1.5rem;
    font-weight: 300;
    color: #ccc !important;
}

a.Color_BannerText,
a.Color_BannerText:link,
a.Color_BannerText:visited {
    color: #ccc !important;
}

a.Color_BannerText:hover {
    color: #ff0 !important;
}

/*custom*/
.summary span.textheadertopic {
    color: var(--nPrimary) !important
}

.summary .product_meta {
    padding-top: 10px;
    padding-bottom: 10px;
}

#productDescription .dxflGroupCell {
    padding-top: 5px;
    padding-bottom: 5px;
}

#productDescription .dxflGroupCell .textdetail {
    line-height: 25px !important;
    color: #333333 !important;
}

.textcaption {
    line-height: 25px !important;
}

.summary span.textdetail {
    color: #333333 !important;
}

.nav-item .textdetail {
    color: var(--nPrimary) !important;
    font-size:0.938rem !important;
	font-weight:600 !important;
}

/*btn calendar*/
.dxeButtonEditButton_Material {

    background-color: #f4f4f4 !important;
    min-width: 30px !important;
}

.dxeButtonEditButtonHover_Material,
.dxeSpinIncButtonHover_Material,
.dxeSpinDecButtonHover_Material,
.dxeSpinLargeIncButtonHover_Material,
.dxeSpinLargeDecButtonHover_Material {
    background-color: #009688 !important;
    min-width: 30px !important;
}

.thumb-info img {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    transition: none !important;
}

/*grid table*/
.textgridheader {
    color: #ffffff !important;
    background-color: var(--nPrimary) !important;
}

/*hide social icon on header*/
header div.social-icons {
    display: none !important;
}

/*news custom*/
html p,
html blockquote p,
html .testimonial.testimonial-style-5 blockquote p,
html .testimonial.testimonial-style-4 blockquote p,
html .testimonial.testimonial-style-3 blockquote p {
    color: #333 !important;
}

article.post .post-meta {
    margin-top: 30px !important;
    color: #333 !important;
}

/*fixed color  btn*/
a.btn-primary:visited {
    color: #fff !important
}

/*iframe*/
.iframe-style {
    overflow: hidden !important;

}

/*custom font*/
td.textgridcell,
span.textdetail,
span.textcaption {
    font-family: var(--mainFont) !important;
}

td.textgridcell {
    color: #000 !important;
    font-size: 15px !important;
    line-height: 35px;
    font-weight: 400;
}

span.textdetail {
    font-size: 13px !important;
    color: #000 !important;
}

span.textcaption {
    font-size: 14px !important;
}

span.textheadertopic {
    font: 500 20px / 24px var(--mainFont) !important;
}

span.textheader {
    font: 500 17px / 24px var(--mainFont) !important;
    color: #2D2D86 !important;
    padding: 10px 0 10px 0 !important;
    display: inline-block;
}


/*custom form*/
.textdetail,
.thumb-info .dxh3,
.thumb-info .dxeTextBox_MaterialCompact,
.textdetail a.btnlink span,
.textcaption {
    font-family: var(--mainFont) !important;
}

span.textdetail {
    line-height: 24px !important;
}

.thumb-info .dxflGroupSys.dxflNoDefaultPaddings {
    padding: 8px !important;
}

.dxeBase_Youthful,
.thumb-info .textcaption {
    font-family: var(--mainFont) !important;
}

.thumb-info input[type=text] {
    font-size: 13px !important
}

label.textcapton,
span.textcapton {
    font-family: var(--mainFont) !important;
}

/*NLT_UserRequest01, NLT_UserRequest02 and NLT_UserRequest03*/
.textheadertopic {
    font: 500 20px/24px var(--mainFont) !important;
    color: #2D2D86 !important;
}

.textheader {
    font: 500 17px/24px var(--mainFont) !important;
    color: #2D2D86 !important;
}

.textcaption {
    font-family: var(--mainFont) !important;
    font-size: 0.833rem !important;
    color: var(--nBrown) !important;
}

.textdetail {
    font-family: var(--mainFont) !important;
    font-size: 0.833rem !important;
    color: #808080;
}

.textgridcell {
    font-family: var(--mainFont) !important;
    font-size: 0.75rem !important;
    color: #808080;
}

.textgridheader {
    font-family: var(--mainFont) !important;
    font-size: 0.833rem !important;
    color: #CCCCCC;
    background-color: #2D2D86;
}

.btntext {
    font-family: var(--mainFont) !important;
    font-size: 0.833rem !important;
    color: #FFFFFF !important;
    background-color: #2D2D86;
}

.boxshadow {
    box-shadow: 2px 2px 5px #CCCCCC;
}

.dxgvADDC {
    font-family: var(--mainFont) !important;
    font-size: 0.833rem !important;
    color: #808080 !important;
}

.dxgvADCC {
    font-family: var(--mainFont) !important;
    font-size: 0.833rem !important;
    color: #666666 !important;
}

.btncreate,
.btncreate:hover {
    font-size: 0.833rem !important;
    font-family: var(--mainFont) !important;
    background-color: var(--nIvory) !important;
    border-radius: var(--nRadius) !important;
    border: solid 1px var(--nDarkYellow) !important;
}

.btncreate:hover {
    background-color: #fdf8aa !important;
}

.btncreate span.dx-vam {
    color: #600 !important;
}

.btncancle,
.btncancle:hover {
    color: #600 !important;
    font-size: 0.833rem !important;
    font-family: var(--mainFont) !important;
    background-color: var(--nLightPink) !important;
    border-radius: var(--nRadius) !important;
    border: solid 1px var(--nDarkPink) !important;
}

.btncancle:hover {
    background-color: #fabbc9 !important;
}

a.btnlink,
a.btnlink:link,
.btnlink:hover {
    font-size: 0.833rem !important;
    font-family: var(--mainFont) !important;
    background-color: var(--nIvory) !important;
    border-radius: var(--nRadius) !important;
    border: solid 1px var(--nDarkYellow) !important;
    width: auto !important;
    padding: 8px 10px !important;
    color: #600 !important;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

a.btnlink:hover {
    background-color: #fdf8aa !important;
}

input[type=text] {
    font-size: 0.833rem !important
}
/*nav tab*/
html body .tabs .nav-tabs li.active a, html.dark body .tabs .nav-tabs li.active a {
  border-top-color: var(--nPrimary) !important;
    color: var(--nPrimary) !important;
}
html body .tabs .nav-tabs a, html.dark body .tabs .nav-tabs a {
	border-top-color: var(--nDarkYellow) !important;
    color: var(--nPrimary) !important;
}
 html body .tabs .nav-tabs a:hover, html.dark body .tabs .nav-tabs a:hover {
	border-top-color: var(--nDarkPink) !important;
    color: var(--nPrimary) !important;
}
/*custom button devexpress*/
 .dxbButton, .dxbButtonHover {
        background-image: none !important;
    }
/*radio button*/
.dxeRadioButtonList_Youthful .dxeBase_Youthful label, .dxeCheckBoxList_Youthful .dxeBase_Youthful label {
    font: 0.833rem var(--mainFont) !important;
}	
.dxeRadioButtonList_Youthful span.dxichCellSys.dxeTAR, .dxeCheckBoxList_Youthful span.dxichCellSys.dxeTAR {
    padding-right:20px;
}

/*custom checkbox*/
.dxeBase_Youthful td.dxichTextCellSys lebel.dx-wrap{
	font-size:13px !important;
}
/*panel header*/
.dxrpHeader_MaterialCompact{
	font-weight:500 !important;
	font-size:0.9rem !important;
	color: var(--nDarkRed) !important;
}
.dxrpControl_MaterialCompact td.dxrpHeader_MaterialCompact{
	background-color:#f4f4f4
}
/*tab content*/
.tab-content .dxflGroupCell{
	padding-bottom:1.25rem !important ;
}

/*text area*/
.tab-content textarea{
	line-height:1.8 !important;
}
/*tab*/
.tabs.tabs-simple .nav-tabs>li a, .tabs.tabs-simple .nav-tabs>li a:hover, .tabs.tabs-simple .nav-tabs>li a:focus{
padding:15px 15px !important
}
/*custom y2024 m08 d22*/
/*Stepper*/

.QuickFormHeader .bar-stepper  {
	width: 500px; 
	display: flex;
	align-items: center;
	margin:auto;  
}
.QuickFormHeader .bar-stepper .stepper {
	flex: 1;
	height: 70px;
	text-align:center;
	position:relative;
	padding:4px 0;
}
.QuickFormHeader .bar-stepper .topic{
	font-family:var(--mainFont) !important;
	font-size: 15px;
	font-weight: 400;
	line-height: 19px;
	text-align: center;
	cursor:pointer
}
.QuickFormHeader .bar-stepper a,.QuickFormHeader .bar-stepper a:link,.QuickFormHeader .bar-stepper a:visited{
	display:block;
	text-decoration:none !important;
	height:70px;
	color:var(--qPrimary)!important;
}
.QuickFormHeader .bar-stepper a:hover{
	display:block;
	text-decoration:none !important;
	height:70px;
	color:var(--qBlack);
}
.QuickFormHeader .bar-stepper .number{
	display:block !important;
	width:24px;
	height:24px;
	margin:auto;
	line-height:20px;
	font-size:16px;
	border-radius:50%;
	font-weight:600;
	text-decoration:none;
	cursor:pointer;
	margin-bottom:0.2rem;
}
/*custom width steper*/
.QuickFormHeader .full-width  {
	width: 100% !important; 
}
/*Steper all status*/
.QuickFormHeader .bar-stepper .normal .item-step,.QuickFormHeader .bar-stepper .active .item-step,.QuickFormHeader .bar-stepper .completed .item-step {
    border-radius: 10px;
    display: inline-block;
    padding: 10px 8px 0px 8px;
}
/*Steper normal status*/
.QuickFormHeader .bar-stepper .normal .item-step {
	background-color: var(--qWhite);
}
.QuickFormHeader .bar-stepper .normal .number{
	background-color:var(--qWhite) !important;
	border:solid 2px var(--qPrimary) !important;
	color:var(--qPrimary) !important
}
.QuickFormHeader .bar-stepper .normal:first-child::before{
	content: "";
    width: 22px;
    height: 50px;
    background:none!important;
    top: 20px;
    left: 0px;
    position: absolute;
    display: inline-block;
	overflow:hidden
}
.QuickFormHeader .bar-stepper .normal:last-child::after{
	content: "";
    width: 22px;
    height: 50px;
    background:none!important;
    top: 20px;
    right: 0px;
    position: absolute;
    display: inline-block;
	overflow:hidden
}
.QuickFormHeader .bar-stepper .normal::before {
    content: "";
    width: 22px;
    height: 50px;
    background:url(/portals/0/images/line-step-normal.png) no-repeat!important;
    top: 20px;
    left: 0px;
    position: absolute;
    display: inline-block;
	overflow:hidden
}
.QuickFormHeader .bar-stepper .normal::after {
    content: "";
    width: 22px;
    height: 50px;
    background:url(/portals/0/images/line-step-normal.png) no-repeat!important;
    top: 20px;
    right: 0px;
    position: absolute;
    display: inline-block;
	overflow:hidden
}
/*Steper active status*/

.QuickFormHeader .bar-stepper .active .item-step {
	background-color: var(--qLightBlue);
}
.QuickFormHeader .bar-stepper .active .number{
	background-color:var(--qGray) !important;
	border:solid 2px var(--qPrimary) !important;
	color:var(--qPrimary) !important
}
.QuickFormHeader .bar-stepper .active:first-child::before{
	content: "";
    width: 22px;
    height: 50px;
    background:none!important;
    top: 20px;
    left: 0px;
    position: absolute;
    display: inline-block;
	overflow:hidden
}
.QuickFormHeader .bar-stepper .active:last-child::after{
	content: "";
    width: 22px;
    height: 50px;
    background:none!important;
    top: 20px;
    right: 0px;
    position: absolute;
    display: inline-block;
	overflow:hidden
}
.QuickFormHeader .bar-stepper .active::before {
    content: "";
    width: 22px;
    height: 50px;
    background:url(/portals/0/images/line-step-active.png) no-repeat!important;
    top: 20px;
    left: 0px;
    position: absolute;
    display: inline-block;
	overflow:hidden
}
.QuickFormHeader .bar-stepper .active::after {
    content: "";
    width: 22px;
    height: 50px;
    background:url(/portals/0/images/line-step-active.png) no-repeat!important;
    top: 20px;
    right: 0px;
    position: absolute;
    display: inline-block;
	overflow:hidden
}
/*Steper completed status*/

.QuickFormHeader .bar-stepper .completed .item-step {
	background-color: var(--qWhite);
}
.QuickFormHeader .bar-stepper .completed .number{
	background-color:var(--qGreen)!important;
	border:solid 2px var(--qGreen)!important;
	color:var(--qWhite) !important

}
.QuickFormHeader .bar-stepper .completed:first-child::before{
	content: "";
    width: 22px;
    height: 50px;
    background:none!important;
    top: 20px;
    left: 0px;
    position: absolute;
    display: inline-block;
	overflow:hidden
}
.QuickFormHeader .bar-stepper .completed:last-child::after{
	content: "";
    width: 22px;
    height: 50px;
    background:none!important;
    top: 20px;
    right: 0px;
    position: absolute;
    display: inline-block;
	overflow:hidden
}
.QuickFormHeader .bar-stepper .completed::before {
    content: "";
    width: 22px;
    height: 50px;
    background:url(/portals/0/images/line-step-completed.png) no-repeat!important;
    top: 20px;
    left: 0px;
    position: absolute;
    display: inline-block;
	overflow:hidden
}
.QuickFormHeader .bar-stepper .completed::after {
    content: "";
    width: 22px;
    height: 50px;
    background:url(/portals/0/images/line-step-completed.png) no-repeat!important;
    top: 20px;
    right: 0px;
    position: absolute;
    display: inline-block;
	overflow:hidden
}
/*Steper open for editing status*/
.QuickFormHeader .bar-stepper .open-editing .item-step {
	background-color: var(--qWhite);
}
.QuickFormHeader .bar-stepper .open-editing .number{
	background-color:var(--qOrange) !important;
	border:solid 2px var(--qPrimary) !important;
	color:var(--qPrimary) !important
}
/*Steper editing in progress status*/
.QuickFormHeader .bar-stepper .editing-in-progress .item-step {
	background-color: var(--qLightBlue);
}
.QuickFormHeader .bar-stepper .editing-in-progress .number{
	background-color:var(--qOrange) !important;
	border:solid 2px var(--qPrimary) !important;
	color:var(--qPrimary) !important
}
/*Steper Completed and still status*/
.QuickFormHeader .bar-stepper .completed-still .item-step {
	background-color: var(--qLightBlue);
}
.QuickFormHeader .bar-stepper .completed-still .number{
	background-color:var(--qGreen) !important;
	border:solid 2px var(--qGreen) !important;
	color:var(--qWhite) !important
}
/*picture slide
.ModNLTPublicSearchC .card {
	height:320px;
    display: block;
    margin: auto;
}
.ModNLTPublicSearchC .img-fluid {
   
    max-height: 300px !important;
    width: auto !important;
    margin: auto;
}*/
/*picture slide*/
.ModNLTPublicSearchC .card {
	height:320px;
    margin: auto;
}
.ModNLTPublicSearchC .img-fluid {
   
    max-height: 300px !important;
    width: auto !important;
    margin: auto;
}
/*btn action*/
.dnnActions a.dnnPrimaryAction:link, .dnnActions a.dnnPrimaryAction:visited{
color:var( --qWhite) !important;
background-color:var(--nPrimary) !important;
}
.dnnActions a.dnnPrimaryAction:hover{
    border-color: #8c7751 #8c7751 #0077b3  !important;
    background-color: #8c7751  !important;
}
/*custom table*/
.DnnModule-NLT_PublicSearch .dxgvADR .dxgvADT .dxgvADDC {
text-align:center
}
/*fixed icon cleartext*/
.searchInputContainer a.dnnSearchBoxClearText {
    right: 40px;
}
/*custom article*/
article.post .post-meta {
    margin-bottom: 30px !important;
}
.porto .post-image img {
  display:inline !important;
}
/*custom theme for Live Article*/
/*list*/
.porto2 .blog-posts .post-image img.article-thumbnail {
width:100% !important
}
/*detail*/
.porto2 .single-post .owl-carousel .owl-stage-outer {
    overflow: visible !important;
    -webkit-transform: none !important;
	height:auto !important;
}
.porto2 .single-post .owl-carousel .owl-stage-outer .owl-stage {
    transform: none !important;
    transition: none !important;
    width:100% !important;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;

}
.porto2 .single-post .owl-carousel .owl-item{
      width:31% !important;
  align-self: center  !important;
  margin:1%;

}
.porto2 .single-post .owl-carousel .owl-nav{
  display:none !important
}
.porto2 .single-post .owl-carousel .owl-item div {
    padding: 10px;
    display: block;
  margin:auto;
}
.porto2 .single-post .owl-carousel .owl-item div img{
  max-height:200px !important;
  width:auto !important;
}
.porto2 .single-post .owl-carousel .owl-item .jackbox {
    background-color: #f4f4f4;
    display: flex;
    height: 280px;
    align-items: center;
}
/*article list knowledge*/
.article-list-kn {
    padding-top: 20px;
    padding-bottom: 20px;
}
.article-list-kn .innner-zone {
background-color: #eeeeee;
  padding:0 15px;
}
.article-list-kn .topic,
.article-list-kn .topic a,
.article-list-kn .topic a:link,
.article-list-kn .topic:visited {
    font-size: 1.25rem;
    line-height: 30px;
    color: var(--nPrimary);
    font-family: var(--mainFont);
    padding-bottom: 10px;
  height:90px;
  overflow:hidden;
}
.article-list-kn .date {
    font-size: 12px;
    color: #333;
}
.article-list-kn .topic em {
    padding-right: 5px;
}
.article-list-kn .topic-zone .price span {
    margin-left: 5px
}
.article-list-kn .img-cover {
    width: 100%;
    padding: 15px;
    height: 350px;
    overflow: hidden;
    margin: auto;
    display: block;
    background-color: #f4f4f4;
    text-align: center;
    position: relative;
}
.article-list-kn .img-cover a img,
.article-list-kn .img-cover a img:link,
.article-list-kn .img-cover a img:visited {
    box-shadow: 0px 0px 0px #7b4d0a
}
.article-list-kn .img-cover a img:hover {
    box-shadow: 0px 0px 10px #7b4d0a
}
.article-list-kn .img-cover a img:active {
    box-shadow: 0px 0px 15px #7b4d0a
}
.article-list-kn .img-cover img {
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 300px;

}
.article-list-kn .topic-zone {
    width: 100%;
    padding: 15px;
}
@media (max-width:992px) {
    .article-list-kn .topic,
    .article-list-kn .topic a,
    .article-list-kn .topic a:link,
    .article-list-kn .topic:visited {
        height: 60px;
    }
    .article-list-kn .img-cover {
        height: 260px;
    }
    .article-list-kn .img-cover img {
        width: auto;
        height: 220px;
    }
}
.article-list-kn .author-zone {
    font-family: var(--mainFont);
    color: #333333;
    font-style: italic;
}
.article-list-kn .discription-zone {
    font-family: var(--mainFont);
    line-height: 2;
    color: #333333;
    margin-bottom: 10px;
  font-size:1rem;
}
/*article detail knowledge*/
.article-detail-kn {
    padding-bottom: 40px;
}

.article-detail-kn .topic {
    color: var(--nDarkRed);
    font: normal 400 24px/ 34px var(--mainFont) !important;
    margin-bottom: 10px;
    font-size:1.2rem;
}

.article-detail-kn span.date {
    font-size: 14px !important;
    color: #333;
}

.article-detail-kn .content-zone {
    margin-top: 40px;
    margin-bottom: 40px;
}

.article-detail-kn .content-zone-youtube {
    margin-top: 40px;
    margin-bottom: 0px;
}

.article-detail-kn p {
    font-size: 16px;
    color: #555;
    line-height: 28px;
}
.article-detail-kn a.text-download,
.article-detail-kn a.text-download:link,
.article-detail-kn a.text-download:visited,
.article-detail-kn a.text-download:hover {
    color: #fff !important;
    text-decoration: none !important;
    padding-left: 10px;
}
.article-detail-kn .topic em {
    padding-right: 5px;
}
.article-detail-kn .author-zone {
    font-family: var(--mainFont);
    color:var(--nSecondary);
    margin-bottom: 10px;
    font-style: italic;
    font-weight: 600;
  font-size:1.125rem;
}
.article-detail-kn .row-box > div {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.article-detail-kn .row-box > div .img-size{
    width: 100%;
    padding: 2px;
    max-height: 195px;
    overflow: hidden;
    margin: auto;
    display: block;
    background-color: #f4f4f4;
    text-align: center;
    position: relative;
}
.article-detail-kn .row-box > div .img-size img {
    max-height: 100%;
    transform: translate(-50%, -50%);
    max-height: 193px;
    display: block;
    max-width: 100%;
    border-radius:6px;
    background-color: #fff;
    border: 1px solid #ddd;
    padding:3px;
    transform: translate3d(0, 0, 0);
    overflow: hidden;
    margin:auto;
}
  .article-detail-kn .row-box > div .img-size img:hover {
    max-height: 100%;
    transform: translate(-50%, -50%);
    max-height: 193px;
    display: block;
    max-width: 100%;
    height: auto;
    border-radius:6px;
    background-color: var(--nDarkYellow);
    border: 1px solid var(--nDarkYellow);
   padding:3px;
   transform: translate3d(0, 0, 0);
    overflow: hidden;
      margin:auto;
}
/*light box content popup*/
.pp_social .twitter, .pp_social .facebook{display:none !important}

/*article list document report*/
.article-list-doc {
    padding-top: 20px;
    padding-bottom: 20px;
}
.article-list-doc .innner-zone {
background-color: #eeeeee;
  padding:0 15px;
}
.article-list-doc .topic,
.article-list-doc .topic a,
.article-list-doc .topic a:link,
.article-list-doc .topic:visited {
    font-size: 1.125rem;
    line-height: 30px;
    color: var(--nPrimary);
    font-family: var(--mainFont);
    padding-bottom: 10px;
  height:120px;
  overflow:hidden;
}
.article-list-doc .date {
    font-size: 12px;
    color: #333;
}
.article-list-doc .topic em {
    padding-right: 5px;
}
.article-list-doc .topic-zone .price span {
    margin-left: 5px
}
.article-list-doc .img-cover {
    width: 100%;
    padding: 15px;
    height: 350px;
    overflow: hidden;
    margin: auto;
    display: block;
    background-color: #f4f4f4;
    text-align: center;
    position: relative;
}
.article-list-doc .img-cover a img,
.article-list-doc .img-cover a img:link,
.article-list-doc .img-cover a img:visited {
    box-shadow: 0px 0px 0px #7b4d0a
}
.article-list-doc .img-cover a img:hover {
    box-shadow: 0px 0px 10px #7b4d0a
}
.article-list-doc .img-cover a img:active {
    box-shadow: 0px 0px 15px #7b4d0a
}
.article-list-doc .img-cover img {
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 300px;

}
.article-list-doc .topic-zone {
    width: 100%;
    padding: 15px;
}
@media (max-width:992px) {
    .article-list-doc .topic,
    .article-list-doc .topic a,
    .article-list-doc .topic a:link,
    .article-list-doc .topic:visited {
        height: auto;
    }
    .article-list-doc .img-cover {
        height: 260px;
    }
    .article-list-doc .img-cover img {
        width: auto;
        height: 220px;
    }
}
.article-list-doc .author-zone {
    font-family: var(--mainFont);
    color: #333333;
    font-style: italic;
}
.article-list-doc .discription-zone {
    font-family: var(--mainFont);
    line-height: 2;
    color: #333333;
    margin-bottom: 10px;
  font-size:1rem;
}
/*article detail document report*/
.article-detail-doc {
    padding-bottom: 40px;
}

.article-detail-doc .topic {
    color: var(--nDarkRed);
    font: normal 400 24px/ 34px var(--mainFont) !important;
    margin-bottom: 10px;
    font-size:1.2rem;
}

.article-detail-doc span.date {
    font-size: 14px !important;
    color: #333;
}

.article-detail-doc .content-zone {
    margin-top: 40px;
    margin-bottom: 40px;
}

.article-detail-doc .content-zone-youtube {
    margin-top: 40px;
    margin-bottom: 0px;
}

.article-detail-doc p {
    font-size: 16px;
    color: #555;
    line-height: 28px;
}
.article-detail-doc a.text-download,
.article-detail-doc a.text-download:link,
.article-detail-doc a.text-download:visited,
.article-detail-doc a.text-download:hover {
    color: #fff !important;
    text-decoration: none !important;
    padding-left: 10px;
}
.article-detail-doc .topic em {
    padding-right: 5px;
}
.article-detail-doc .author-zone {
    font-family: var(--mainFont);
    color:var(--nSecondary);
    margin-bottom: 10px;
    font-style: italic;
    font-weight: 600;
  font-size:1.125rem;
}
.article-detail-doc .row-box > div {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.article-detail-doc .row-box > div .img-size{
    width: 100%;
    padding: 2px;
    max-height: 195px;
    overflow: hidden;
    margin: auto;
    display: block;
    background-color: #f4f4f4;
    text-align: center;
    position: relative;
}
.article-detail-doc .row-box > div .img-size img {
    max-height: 100%;
    transform: translate(-50%, -50%);
    max-height: 193px;
    display: block;
    max-width: 100%;
   border-radius:6px;
background-color: #fff;
    border: 1px solid #ddd;
  padding:3px;
  transform: translate3d(0, 0, 0);
    overflow: hidden;
  margin:auto;
}
  .article-detail-doc .row-box > div .img-size img:hover {
max-height: 100%;
    transform: translate(-50%, -50%);
    max-height: 193px;
   display: block;
    max-width: 100%;
    height: auto;
  border-radius:6px;
background-color: var(--nDarkYellow);
    border: 1px solid var(--nDarkYellow);
  padding:3px;
  transform: translate3d(0, 0, 0);
    overflow: hidden;
      margin:auto;
}
/*article list news*/
.article-list-news {
    padding-top: 20px;
    padding-bottom: 20px;
}
.article-list-news .innner-zone {
background-color: #eeeeee;
  padding:0 15px;
}
.article-list-news .topic,
.article-list-news .topic a,
.article-list-news .topic a:link,
.article-list-news .topic:visited {
    font-size: 1.125rem;
    line-height: 30px;
    color: var(--nPrimary);
    font-family: var(--mainFont);
    padding-bottom: 10px;
  height:120px;
  overflow:hidden;
}
.article-list-news .date {
    font-size: 12px;
    color: #333;
}
.article-list-news .topic em {
    padding-right: 5px;
}
.article-list-news .topic-zone .price span {
    margin-left: 5px
}
.article-list-news .img-cover {
    width: 100%;
    padding: 15px;
    height: 350px;
    overflow: hidden;
    margin: auto;
    display: block;
    background-color: #f4f4f4;
    text-align: center;
    position: relative;
}
.article-list-news .img-cover a img,
.article-list-news .img-cover a img:link,
.article-list-news .img-cover a img:visited {
    box-shadow: 0px 0px 0px #7b4d0a
}
.article-list-news .img-cover a img:hover {
    box-shadow: 0px 0px 10px #7b4d0a
}
.article-list-news .img-cover a img:active {
    box-shadow: 0px 0px 15px #7b4d0a
}
.article-list-news .img-cover img {
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 300px;

}
.article-list-news .topic-zone {
    width: 100%;
    padding: 15px;
}
@media (max-width:992px) {
    .article-list-news .topic,
    .article-list-news .topic a,
    .article-list-news .topic a:link,
    .article-list-news .topic:visited {
        height: auto;
    }
    .article-list-news .img-cover {
        height: 260px;
    }
    .article-list-news .img-cover img {
        width: auto;
        height: 220px;
    }
}
.article-list-news .author-zone {
    font-family: var(--mainFont);
    color: #333333;
    font-style: italic;
}
.article-list-news .discription-zone {
    font-family: var(--mainFont);
    line-height: 2;
    color: #333333;
    margin-bottom: 10px;
  font-size:1rem;
}
/*article detail news*/
.article-detail-news {
    padding-bottom: 40px;
}

.article-detail-news .topic {
    color: var(--nDarkRed);
    font: normal 400 24px/ 34px var(--mainFont) !important;
    margin-bottom: 10px;
    font-size:1.2rem;
}

.article-detail-news span.date {
    font-size: 14px !important;
    color: #333;
}

.article-detail-news .content-zone {
    margin-top: 40px;
    margin-bottom: 40px;
}

.article-detail-news .content-zone-youtube {
    margin-top: 40px;
    margin-bottom: 0px;
}

.article-detail-news p {
    font-size: 16px;
    color: #555;
    line-height: 28px;
}
.article-detail-news a.text-download,
.article-detail-news a.text-download:link,
.article-detail-news a.text-download:visited,
.article-detail-news a.text-download:hover {
    color: #fff !important;
    text-decoration: none !important;
    padding-left: 10px;
}
.article-detail-news .topic em {
    padding-right: 5px;
}
.article-detail-news .author-zone {
    font-family: var(--mainFont);
    color:var(--nSecondary);
    margin-bottom: 10px;
    font-style: italic;
    font-weight: 600;
  font-size:1.125rem;
}
.article-detail-news .row-box > div {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.article-detail-news .row-box > div .img-size{
    width: 100%;
    padding: 2px;
    max-height: 195px;
    overflow: hidden;
    margin: auto;
    display: block;
    background-color: #f4f4f4;
    text-align: center;
    position: relative;
}
.article-detail-news .row-box > div .img-size img {
    max-height: 100%;
    transform: translate(-50%, -50%);
    max-height: 193px;
    display: block;
    max-width: 100%;
   border-radius:6px;
background-color: #fff;
    border: 1px solid #ddd;
  padding:3px;
  transform: translate3d(0, 0, 0);
    overflow: hidden;
  margin:auto;
}
  .article-detail-news .row-box > div .img-size img:hover {
max-height: 100%;
    transform: translate(-50%, -50%);
    max-height: 193px;
   display: block;
    max-width: 100%;
    height: auto;
  border-radius:6px;
background-color: var(--nDarkYellow);
    border: 1px solid var(--nDarkYellow);
  padding:3px;
  transform: translate3d(0, 0, 0);
    overflow: hidden;
      margin:auto;
}
/*wp-youtube*/
.wp-youtube {
    margin-bottom: 20px;
}
    .wp-youtube .text {
        height: 135px;
        overflow: hidden;
    }
.wp-youtube .text  a,.wp-youtube .text  a:link,.wp-youtube .text  a:visited,.wp-youtube .text  a:active
{
   font-family: var(--mainFont);
  font-size:16px;
}
.wp-youtube .text  a:hover
{
   font-family: var(--mainFont);
  font-size:16px;
  color:#000
}
.wp-youtube em.fa
{
  font-size:30px;
  line-height:30px;
}
.size-icon {
    font-size: 50px !important;
}
.position-icon {
    margin-right: 10px;
}
/*DNN Article Box Detail*/
.box-detail {
    padding-bottom: 40px;
}
    .box-detail .topic {
        color:  var( --nPrimary);
        font: normal 400 24px/34px var(--mainFont);
    }
    .box-detail span.date {
        font-size: 12px !important;
        color: #333;
    }
    .box-detail .content-zone {
        margin-top: 40px;
        margin-bottom: 40px;
    }
    .box-detail .content-zone-youtube {
        margin-top: 40px;
        margin-bottom: 0px;
    }
    .box-detail p {
        font-size: 16px;
        color: #555;
        line-height: 28px;
    }
    .box-detail .topic em {
        padding-right: 5px;
    }
/*youtube size*/
@media (max-width: 576px) {
.box-detail .youtube-h{
  height:324px !important
}
}
@media (min-width: 577px) {
.box-detail .youtube-h{
  height:324px !important
}
}
@media (min-width: 768px) {
.box-detail .youtube-h{
  height:432px !important
}
}
@media (min-width: 992px) {
.box-detail .youtube-h{
  height:558px !important
}
}
@media (min-width: 1200px) {
.box-detail .youtube-h{
  height:675px !important
}
}
@media (min-width: 1400px) {
.box-detail .youtube-h{
  height:675px !important
}
}
/*FAQ*/
.FAQ-NLT span.question 
{
  color:var(--nPrimary)!important;
   font:400 20px/22px var(--mainFont);	
}
.FAQ-NLT em
{
  font-size:1em !important;
  color:var(--nPrimary)!important;
  font-weight:bold;
}
.FAQ-NLT span.question strong
{
  display:inline-block;
  margin-right:5px
}
.FAQ-NLT .pnlHead
{
  background-color:var(--qGray)!important;
  display:block 
}
.FAQ-NLT .toggle-content{
  padding:15px 30px;
  background-color:var(--qWhite)!important;
  border:solid 1px var(--nDarkYellow)!important;
  font-family: var(--mainFont) !important;
  margin-bottom:10px;
}
.FAQ-NLT .toggle-content p,.FAQ-NLT .toggle-content  li {
    font-family: var(--mainFont) !important;
  font-size:18px !important;
  line-height:40px;
  font-weight:300 !important
}
section.FAQ-NLT.toggle label {
    border-left-color: var(--nDarkYellow)!important;
}
section.FAQ-NLT.active > label {
    background-color: var(--nDarkYellow) !important;
    border-color: var(--nDarkYellow)!important;
}
section.FAQ-NLT.active>label:before, section.FAQ-NLT.active>.toggle-heading:before {
    border-top-color: var(--nPrimary)!important;
}
section.FAQ-NLT .image-zone img{
  display:block;
  margin:40px auto;
  max-width:200px;
  border-radius:10px;
      border: 1px solid var(--nDarkYellow)!important;
    padding: 6px;
}
.FAQ-NLT  .row-box > div {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.FAQ-NLT  .row-box > div .img-size{
    width: 100%;
    padding: 2px;
    max-height: 195px;
    overflow: hidden;
    margin: auto;
    display: block;
    background-color: #f4f4f4;
    text-align: center;
    position: relative;
}
.FAQ-NLT  .row-box > div .img-size img {
    max-height: 100%;
    transform: translate(-50%, -50%);
    max-height: 193px;
    display: block;
    max-width: 100%;
   border-radius:6px;
background-color: #fff;
    border: 1px solid #ddd;
  padding:3px;
  transform: translate3d(0, 0, 0);
    overflow: hidden;
  margin:auto;
}
.FAQ-NLT .row-box > div .img-size img:hover {
max-height: 100%;
    transform: translate(-50%, -50%);
    max-height: 193px;
   display: block;
    max-width: 100%;
    height: auto;
  border-radius:6px;
background-color: var(--nDarkYellow);
    border: 1px solid var(--nDarkYellow);
  padding:3px;
  transform: translate3d(0, 0, 0);
    overflow: hidden;
      margin:auto;
}

/* article picture left*/
.art-pic-left:nth-child(odd) {
    background-color: #fff;
}

.art-pic-left:nth-child(even) {
    background-color: #fafafa;
}

.art-pic-left {
    padding: 40px 0;
    border-bottom: solid 1px #eee;
    width: 100%;
}

    .art-pic-left .margin-bottom {
        margin-bottom: 20px;
    }

    .art-pic-left .topic {
        font: normal 300 22px/1.5 var(--mainFont) !important;
        color: var(--nPrimary) !important;
        width: 100%;
    }
  .art-pic-left .date, .art-pic-left .cat {
        font: normal 300 14px/1 var(--mainFont) !important;
    }
    .art-pic-left .des {
        font: normal 300 18px/1.5 var(--mainFont) !important;
        color: #222;
    }

    .art-pic-left .post-date2 {
        text-align: center;
        margin-right: 0 !important;
        box-shadow: none !important;
    }

.art-pic-left .post-date2 span.day {
    color: #fff;
    display: block;
    font-size: 22px;
    font-weight: bold;
    padding: 5px 0;
    background-color: #222;
    border-radius: 4px 4px 0 0;
}

.art-pic-left .post-date2 span.month {
    color: #000;
    display: block;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 0;
    background-color: #ddd;
    border-radius: 0 0 4px 4px;
}

@media (max-width: 992px) {
    .art-pic-left .post-date2 {
        width: 120px;
        margin-bottom: 10px !important;
    }
}
/*dnn Category custom*/
a.cate-list2,
a.cate-list2:link,
a.cate-list2:visited,
a.cate-list2:hover { 
    font-size: 16px !important;
}

/*y2024 m11 d27 custom background home page*/
.bg-zone-custom {
  background:url(/Portals/0/Images/bg/bg-home-list-doc.jpg)  center top no-repeat ;
}

/*y2024 m11 d28 add css for date*/
.article-list-doc .post-date2 {
    text-align: center;
    margin-right: 0 !important;
    box-shadow: none !important;
}

.article-list-doc .post-date2 span.day {
color: #fff;
display: block;
font-size: 22px;
font-weight: bold;
padding: 5px 0;
background-color: #222;
border-radius: 4px 4px 0 0;
}

.article-list-doc .post-date2 span.month {
color: #000;
display: block;
font-size: 12px;
font-weight: bold;
padding: 5px 0;
background-color: #ddd;
border-radius: 0 0 4px 4px;
}

@media (max-width: 992px) {
.article-list-doc .post-date2 {
    width: 120px;
    margin-bottom: 10px !important;
}
}
/*custom border video*/
.wrp-b video{
  border:solid 1px #ddd
}