/* ENCOLAWS - layout rebuilt from the old Joomla template (templates/encovietnam) */
html, body, form, fieldset { margin: 0; padding: 0; }
html, body { overflow-x: hidden; }
* { box-sizing: border-box; }
body#bd {
    font-family: Arial, Tahoma, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 22px;
    color: #3c3c3c;
    background: #eee;
}
img { border: 0; max-width: 100%; height: auto; }
a, a:link, a:visited { color: #961C1C; text-decoration: none; outline: none; }
a:hover, a:active, a:focus { text-decoration: underline; }
p, pre, blockquote, ul, ol, h1, h2, h3, h4, h5, h6 { margin: 4px 0; padding: 0; }
p { text-align: justify; }
ul { list-style: none; }
.clearfix::after, .clearfix { clear: both; }
.clearfix::after { content: ""; display: table; }

.inner { width: 960px; margin: 0 auto; position: relative; }
#wrapper { background: #eee; width: 100%; overflow: hidden; }

/* ---------- header ---------- */
#header { width: 100%; height: 90px; background: #eee; }
#header .inner { height: 90px; }
#logo { margin: 0; height: 90px; background: url(/theme/images/logo.jpg) no-repeat 0 0; }
#logo a { display: block; height: 90px; width: 100%; }
#logo a span { display: none; }
#language { position: absolute; right: 5px; top: 9px; z-index: 5; }
#language img { border: 1px solid #ccc; display: block; }

/* ---------- main menu (ARI ext menu look) ---------- */
#mainmenu { width: 100%; height: 35px; background: #66261d; border-top: 1px solid #ccc; position: relative; z-index: 999; }
#mainmenu .inner { height: 35px; background: #66261d; }
#menu-toggle { display: none; }
.ux-menu, .ux-menu ul { list-style: none; margin: 0; padding: 0; line-height: 1; }
.ux-menu { position: relative; z-index: 999; }
.ux-menu li { position: relative; float: left; background: none; padding: 0; }
.ux-menu a {
    display: block; position: relative; text-decoration: none; color: #fff;
    background: url(/theme/menu/menu-item-bg.jpg) repeat-y;
    font-size: 12px; line-height: 12px; padding: 11px 10px; text-transform: uppercase; white-space: nowrap;
}
.ux-menu a:hover, .ux-menu a:focus, .ux-menu li:hover > a {
    background: url(/theme/menu/menu-item-bg-over.png) repeat; color: #3c3c3c; text-decoration: none;
}
.ux-menu a.current { background: url(/theme/menu/menu-item-bg-current.jpg) repeat-x; color: #fff; }
.ux-menu a.current:hover { color: #000; background: url(/theme/menu/menu-item-bg-over.png) repeat; }
.ux-menu a.ux-menu-link-parent { padding-right: 24px; }
.ux-menu-arrow { display: block; width: 8px; height: 6px; right: 9px; top: 15px; position: absolute; background: url(/theme/menu/menu-arrow-down.png) no-repeat; }
.ux-menu-sub { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; z-index: 1000; border: 1px solid #e3dad1; border-top: 0; background: #fff; }
.ux-menu-sub li { float: none; border-bottom: 1px dotted #ccc; }
.ux-menu-sub a { background: #fff; color: #3c3c3c; text-transform: none; line-height: 16px; white-space: normal; padding: 8px 14px; }
.ux-menu-sub a:hover, .ux-menu-sub li:hover > a { background: #f3efec; color: #961C1C; }
.ux-menu-sub .ux-menu-sub { top: -1px; left: 100%; border-top: 1px solid #e3dad1; }
.ux-menu-sub .ux-menu-arrow { width: 6px; height: 8px; top: 12px; background: url(/theme/menu/menu-arrow-right.png) no-repeat; }
.ux-menu li:hover > .ux-menu-sub, .ux-menu li.open > .ux-menu-sub { display: block; }

/* ---------- slideshow ---------- */
#slideshow .inner { background: #fff; padding-top: 10px; }
.blueberry { position: relative; margin: 0 auto; width: 960px; max-width: 100%; }
.blueberry .slides { position: relative; overflow: hidden; margin: 0; }
.blueberry .slides li { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transition: opacity .8s; background: none; padding: 0; }
.blueberry .slides li.active { position: relative; opacity: 1; }
.blueberry .slides img { display: block; width: 100%; }

/* ---------- columns ---------- */
#columns { background: none; }
#columns .inner { padding: 2px 10px 0; background: url(/theme/images/bg-column-top.jpg) no-repeat top center, url(/theme/images/bg-column-center.jpg) repeat-y center; background-color: #fff; overflow: hidden; }
#component { float: left; width: 624px; padding: 10px 0 0; }
#col3 { float: right; width: 306px; padding-top: 10px; }
#col3 > div { margin-bottom: 12px; }

/* ---------- modules ---------- */
div.moduletable, div.moduletable_home, div.moduletable-blank { clear: both; margin: 0 0 12px; position: relative; overflow: hidden; }
div.moduletable h3 {
    margin: 0; width: 100%; font-size: 14px; line-height: 29px; text-indent: 5px; color: #fff; font-weight: bold;
    text-transform: uppercase; background: url(/theme/images/bg-left-moduletitle.jpg) repeat-x center bottom #c30204;
}
div.moduletable h3 a { color: #fff; }
div.moduletable_home h3 {
    text-transform: uppercase; font-size: 15px; line-height: 26px; color: #872620; font-weight: bold;
    padding-bottom: 3px; border-bottom: 3px solid #ccc; padding-left: 5px; background: none; margin: 0 0 6px;
}
div.moduletable_home h3 a { color: #872620; }
div.modulecontent { padding: 5px; overflow: hidden; }
div.moduletable_home { margin-right: 5px; }

/* home: intro / banner / services / news */
.intro-box { margin-right: 5px; }
.intro-box h3 { background: none; color: #872620; border-bottom: 3px solid #ccc; text-indent: 5px; font-size: 15px; }
.banner-img { text-align: center; margin: 4px 5px 10px 0; }
.banner-img img { width: 620px; }
.enco-cols { display: flex; gap: 12px; }
.enco-category { flex: 1 1 50%; min-width: 0; padding-left: 5px; }
.enco-category .cat-title { font-size: 13px; font-weight: bold; text-transform: uppercase; margin: 4px 0 6px; }
.enco-article { overflow: hidden; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px dotted #d8d8d8; }
.enco-article .thumb { float: left; margin: 0 8px 4px 0; }
.enco-article .thumb img { width: 90px; height: 70px; object-fit: cover; border: 1px solid #ccc; padding: 2px; display: block; }
.enco-article h5 { font-size: 13px; margin: 0 0 2px; }
.enco-article p { font-size: 12px; line-height: 17px; margin: 0; }
.more-links li { background: url(/theme/images/bullet.png) no-repeat 6px 9px; padding-left: 18px; }
.news-block { margin-right: 5px; }
.aidanews { padding: 6px 0; border-bottom: 1px dotted #c3c3c3; }
.aidanews .title a { font-weight: bold; font-size: 105%; }
.aidanews .intro { padding-top: 3px; }
.aidanews .bottom { margin-top: 2px; font-size: 12px; }
.aidanews .readmore { font-weight: bold; }
.aidanews .hits { color: #888; margin-left: 10px; }

/* right column */
.search-box form { overflow: hidden; }
.inputbox { color: #444; background: #fff; padding: 5px; border: 1px solid #dedede; font: inherit; max-width: 100%; }
.search-box .inputbox { width: 215px; height: 26px; float: left; margin-right: 5px; }
input.button {
    height: 26px; padding: 1px 10px 2px; color: #fff; cursor: pointer; font-size: 12px; text-transform: uppercase;
    border: none; background: url(/theme/images/bg-left-moduletitle.jpg) repeat-x center bottom #c30204; font-family: inherit;
}
.moduletable-blank h3 { margin: 0 0 4px; font-size: 14px; color: #872620; text-transform: uppercase; }
.videoframe { position: relative; width: 100%; padding-top: 78%; }
.videoframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.promo p { text-align: center; }
.promo img { width: 100%; }
ul.menu { margin: 0 0 0 6px; }
ul.menu li { padding: 4px 0 4px 20px; border-bottom: 1px solid #f1f1f1; background: url(/theme/images/arrow5.png) no-repeat 0 8px; }
ul.menu ul { margin: 0; }
ul.menu ul li { border-bottom: 0; margin-left: 0; }
.side-menu > ul.menu > li > a, .side-menu > ul.menu > li > span { font-weight: bold; }
ul.ads_top { margin: 5px 0 0; overflow: hidden; }
ul.ads_top li { float: left; width: 152px; padding: 0 0 6px; background: none; }
ul.ads_top li img { border: 1px solid #e1e1e1; display: block; width: 140px; height: 140px; object-fit: contain; background: #fff; }

/* inner pages */
.breadcrumbs { font-size: 12px; color: #888; margin: 0 0 6px; }
.componentheading, h1.componentheading {
    border-bottom: 4px solid #A13737; color: #A13737; font-size: 14px; font-weight: bold; line-height: 30px;
    margin: 0 0 10px; text-transform: uppercase;
}
.contentheading { margin: 0; padding: 12px 0 5px; line-height: normal; border-bottom: 2px solid #ccc; font-size: 120%; }
#page .contentheading { font-size: 130%; padding-top: 6px; }
.contentheading a { color: #961C1C; }
.iteminfo { margin: 4px 0; color: #777; font-size: 92%; }
.blog-item { padding-bottom: 8px; }
.blog-thumb { float: left; margin: 2px 10px 4px 0; width: 120px; height: 90px; object-fit: cover; border: 1px solid #ccc; padding: 2px; }
a.readon { padding: 5px 0 0 13px; background: url(/theme/images/note.jpg) no-repeat center left; float: right; margin-left: 9px; }
.subcats { overflow: hidden; margin: 6px 0 10px; }
.subcats li { float: left; margin: 0 6px 6px 0; }
.subcats a { display: block; padding: 3px 10px; background: #f3efec; border: 1px solid #e3dad1; }
.article-text { overflow-wrap: anywhere; line-height: 22px; }
.article-text img { max-width: 100%; height: auto; }
.article-text ul { list-style: disc; padding-left: 20px; margin: 6px 0; }
.article-text ol { padding-left: 24px; }
.article-text ul li { background: none; }
.article-text table { max-width: 100%; border-collapse: collapse; }
.article-text td, .article-text th { padding: 3px 6px; line-height: 20px; }
.related { margin-top: 18px; }
ul.pagination { overflow: hidden; clear: both; margin: 10px auto 0; padding: 10px 0 0; text-align: center; }
ul.pagination li { display: inline-block; margin: 0 2px; padding: 0; background: none; }
ul.pagination li span span {
    cursor: pointer; padding: 1px 10px; display: inline-block; background: url(/theme/images/paging.jpg) repeat-x 0 0;
    border-left: 1px solid #dadada; border-right: 1px solid #dadada; color: #8a8a8a;
}
ul.pagination a span span { color: #000; font-weight: bold; }
ul.pagination li:hover span span, ul.pagination li.current span span {
    color: #fff; background: url(/theme/images/paging-hover.jpg) repeat-x 0 0; border-left: 1px solid #5c5c5c; border-right: 1px solid #5c5c5c;
}
.counter { text-align: center; color: #888; margin: 2px 0 10px; }
.search-form { overflow: hidden; margin-bottom: 10px; }
.search-form .inputbox { width: 360px; margin-right: 6px; float: left; }
.meta { color: #777; }
.contact-form label { display: block; margin: 8px 0 2px; font-weight: bold; }
.contact-form .inputbox { width: 100%; }
.contact-form .button { margin-top: 12px; padding: 0 18px; height: 30px; }
.contact-form .hp { position: absolute; left: -9999px; }
.error { color: #c30204; font-size: 12px; }
.message.success { background: #eaf6e6; border: 1px solid #b7dbb0; color: #2d6a23; padding: 8px 12px; margin-bottom: 10px; }
.contact-info { margin-top: 18px; }

/* ---------- clients scroller ---------- */
#clients .inner { background: #fff; padding: 8px 10px 14px; border-top: 1px solid #e5e5e5; }
#clients h3 { margin: 0 0 6px; font-size: 15px; text-transform: uppercase; color: #872620; border-bottom: 3px solid #ccc; padding: 0 0 3px 5px; }
.scroll-img { height: 160px; overflow: hidden; white-space: nowrap; position: relative; }
.scroll-img ul { margin: 0; display: inline-block; font-size: 0; }
.scroll-img li { display: inline-block; vertical-align: middle; margin-right: 14px; background: none; padding: 0; }
.scroll-img img { height: 150px; width: auto; max-width: none; border: 1px solid #e5e5e5; }

/* ---------- footer ---------- */
#footer { width: 100%; background: url(/theme/images/footer.jpg) no-repeat top center #8b2621; color: #fff; border-top: 1px solid #e3e3e3; padding: 12px 0; min-height: 120px; }
#footer a { color: #fff; }
#copyright { float: left; width: 49%; padding: 10px 0 10px 10px; }
#footer-text { float: right; width: 49%; text-align: right; line-height: 20px; padding-right: 10px; }

/* ---------- floating contact buttons ---------- */
.ssc-block { position: fixed; bottom: 20px; left: 20px; z-index: 9999; }
.ssc-block * { box-sizing: border-box; }
.ssc-block__list { margin: 0; padding: 0; list-style: none; transition: transform .4s, opacity .4s; }
.ssc-block__item { display: flex; margin-bottom: 1em; background: none; padding: 0; }
.ssc-block__url { display: flex; align-items: center; flex-direction: row-reverse; text-decoration: none !important; }
.ssc-block__text {
    display: inline-block; margin-left: .5em; padding: 4px 8px; background: #777; color: #fff; font-size: 13px; line-height: 18px;
    border: 2px solid #fefefe; border-radius: 12px; opacity: 0; transform: translateY(4px); pointer-events: none; transition: all .4s; white-space: nowrap;
}
.ssc-block__item:hover .ssc-block__text { opacity: 1; transform: none; }
.ssc-block__icon {
    display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 6px; background: #333;
    border-radius: 50%; border: 3px solid #fff; animation: ring 1s linear infinite; color: #fff;
}
.ssc-block__icon svg { fill: #fff; }
.zalo-txt { font-size: 13px; }
.is-zalo .ssc-block__icon, .is-zalo:hover .ssc-block__text { background: #0091ff; }
.is-messenger .ssc-block__icon, .is-messenger:hover .ssc-block__text { background: #1877f2; }
.is-phone .ssc-block__icon, .is-phone:hover .ssc-block__text { background: #ff6a00; }
.ssc-block__toggle-button {
    position: relative; width: 48px; height: 48px; background: #333; color: #fff; border: 2px solid #fefefe; border-radius: 50%;
    cursor: pointer; overflow: hidden; font-size: 24px; line-height: 44px; padding: 0; transition: all .5s;
}
.ssc-block__toggle-button span { position: absolute; inset: 0; transition: transform .5s; }
.ssc-block .open-icon { transform: translateY(150%); }
.ssc-block.is-hidden .open-icon { transform: none; }
.ssc-block.is-hidden .close-icon { transform: translateY(150%); }
.ssc-block.is-hidden .ssc-block__list { opacity: 0; transform: translateY(15px); pointer-events: none; }
.ssc-block.is-hidden .ssc-block__toggle-button { background: #dc3545; }
@keyframes ring {
    0% { transform: scale3d(1, 1, 1); }
    10%, 20% { transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); }
    30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
    40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
    100% { transform: scale3d(1, 1, 1); }
}

/* ---------- small screens (the old site had a separate mobile version) ---------- */
@media (max-width: 980px) {
    .inner { width: 100%; }
    #header, #header .inner, #logo, #logo a { height: 60px; }
    #logo { background-size: auto 60px; background-position: left top; }
    #language { top: 4px; }
    #mainmenu, #mainmenu .inner { height: auto; }
    #menu-toggle { display: block; width: 100%; padding: 10px; background: #66261d; color: #fff; border: 0; text-align: left; font-size: 14px; cursor: pointer; }
    #menu-list { display: none; }
    #menu-list.open { display: block; }
    .ux-menu li { float: none; }
    .ux-menu a { white-space: normal; border-top: 1px solid rgba(255,255,255,.15); }
    .ux-menu-sub, .ux-menu-sub .ux-menu-sub { display: block; position: static; border: 0; min-width: 0; }
    .ux-menu-sub a { padding-left: 28px; }
    .ux-menu-sub .ux-menu-sub a { padding-left: 44px; }
    .ux-menu-arrow { display: none; }
    #columns .inner { padding: 8px; background-image: none; }
    #component, #col3 { float: none; width: 100%; }
    .banner-img img { width: 100%; }
    .enco-cols { flex-direction: column; }
    .search-box .inputbox, .search-form .inputbox { width: 70%; }
    #copyright, #footer-text { float: none; width: 100%; text-align: left; padding: 6px 10px; }
    div.moduletable_home, .intro-box, .news-block { margin-right: 0; }
    .ssc-block { left: 10px; bottom: 10px; }
}

/* home: practice block with ready made link lists */
.enco-category.raw ul { margin: 0 0 0 4px; padding: 0; list-style: none; }
.enco-category.raw li { background: url(/theme/images/bullet.png) no-repeat 6px 9px; padding: 3px 0 3px 18px; }