/* Bo sung cho ban dung lai. Khong sua style.css goc de con doi chieu duoc.
   Moi so do o day lay tu ban luu Wayback 25/01/2021 cua chinh trang nay. */

/* --- Nen: anh troi lat gach, dat tren BODY chu khong chi tren header --- */
body {
    background-image: url('/wp-content/uploads/2014/05/bg.jpg');
    background-repeat: repeat;
    background-attachment: scroll;
}

/* --- KHONG dung ky thuat "sticky footer" 100vh o day ---
   Truoc do toi them:
       #page { display:flex; flex-direction:column; min-height:100vh }
   de footer khong bi treo khi trang ngan hon cua so. Nhung tren Edge cua chu
   site no sinh ra dung mot khung nhin troi xanh (~99vh) duoi chan trang, ma
   trinh duyet toi dung de kiem KHONG tai hien duoc o bat ky kich thuoc nao
   (1024/1200/1440/1512/1999 x 900/1000/2200/2896).
   Theme goc khong co doan nay va cung khong co loi do. Bo han, giu dung hanh vi
   goc. Phan chan trang van duoc bao ve boi background-size:cover + mau co
   #45973A o duoi, nen khong the ho ra troi ben trong footer. */

/* --- Hang header. Do tu ban goc: o logo 184px tai x=86, menu rong 836px tai
       x=270, o tim kiem dat tuyet doi tai x=907 trong header-line-1. --- */
#header-line-1 { position: relative; height: 0; }
#header-line-1 .wide { position: relative; }
/* O tim kiem: nut la icon sprite tren nen DO rgb(209,47,47), 24x24, dat tuyet
   doi trong o nhap — do tu ban goc, khong phai nut chu. */
#searchform { position: absolute; right: 0; top: 18px; width: 199px; height: 35px; z-index: 20; }
/* Ban goc: o nhap TRONG SUOT, khong vien, chu nam thang tren nen troi. */
#search-text {
    width: 100%; height: 35px; padding: 0 36px 0 12px;
    border: 0; border-radius: 6px; background: transparent;
    font: inherit; font-size: 13px; color: #333;
}
#search-text::placeholder { color: #5a6b72; opacity: 1; }
#search-text:focus { outline: none; background: rgba(255,255,255,.35); }
#search-submit {
    position: absolute; right: 5px; top: 5px;
    width: 24px; height: 24px; padding: 0; border: 0;
    background-color: rgb(209, 47, 47);
    background-image: url('/theme/img/sprites.png');
    background-repeat: no-repeat;
    background-position: 6px 6px;
    font-size: 0; line-height: 0; color: transparent;
    cursor: pointer;
}
#search-submit:hover { filter: brightness(1.1); }

#header-line-2 { padding: 30px 0; }
/* style.css goc dat .table { width: 100% } — phai ghi de, neu khong bang
   chiem tron 1020px va menu bi day xuong duoi logo. */
#header-line-2 .table { display: table; float: left; width: auto; }
#header-line-2 .tr { display: table-row; }
#header-line-2 .td { display: table-cell; vertical-align: middle; }
#header-line-2 .td-logo { width: 184px; }
.site-logo img { display: block; width: 160px; height: auto; }

/* --- Menu: nut bo tron. Mau do tung muc mang theo (theme goc gan bang JS) --- */
/* Noi canh o logo. Khong dung overflow:hidden de tao BFC vi se cat mat
   menu con do xuong. */
#nav-main-menu { height: 50px; margin-top: 20px; float: left; }
#nav-main-menu ul { list-style: none; margin: 0; padding: 0; }
/* margin-left 5px va width 100px la cua style.css goc — giu nguyen. */
#nav-main-menu > div > ul > li { position: relative; float: left; }
#nav-main-menu > div > ul > li > a {
    display: block;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    background: #7f8c8d;   /* du phong khi muc khong co mau rieng */
    white-space: nowrap;
}
#nav-main-menu > div > ul > li > a:hover { filter: brightness(1.08); }

/* Khong dat nen hay padding o day: style.css goc da to mau cho tung <a>
   (#36B3A7). Neu boc them nen trang + padding thi lo ra hai vach trang
   tren va duoi danh sach. */
#nav-main-menu ul.sub-menu {
    position: absolute;
    left: 0; top: 50px;
    display: none;
    min-width: 190px;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,.15);
    padding: 0;
    z-index: 999;
}
#nav-main-menu > div > ul > li:hover > ul.sub-menu,
#nav-main-menu > div > ul > li:focus-within > ul.sub-menu { display: block; }
#nav-main-menu ul.sub-menu li { float: none; }
#nav-main-menu ul.sub-menu a { white-space: nowrap; }
#nav-main-menu ul.sub-menu a:hover { filter: brightness(1.08); }

/* --- O tim kiem --- */
/* --- Bo cuc chinh: 1020px = 700 noi dung + 20 khoang cach + 300 cot phai --- */
#primary.page-content { margin: 0 auto 40px; }
#content.site-content { width: 700px; float: left; }
#side { width: 300px; float: right; }

/* --- Cot phai --- */
#right-sidebar .widget { background: #fff; border-radius: 10px; margin-bottom: 20px; overflow: hidden; }
#right-sidebar .impression-item { position: relative; }
#right-sidebar .impression-item .item-thumbnail { display: block; height: 190px; overflow: hidden; }
#right-sidebar .impression-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
#right-sidebar .impression-item .title { margin: 0; padding: 12px 14px 4px; font-size: 15px; line-height: 1.35; }
#right-sidebar .impression-item .title a { color: #222; text-decoration: none; }
#right-sidebar .impression-item .meta { padding: 0 14px 12px; font-size: 12px; color: #888; }
#right-sidebar .widget-title { margin: 0; padding: 12px 14px; font-size: 15px; background: #f2f3f0; }
#right-sidebar .widget-list ul { list-style: none; margin: 0; padding: 6px 0; }
#right-sidebar .widget-list li a {
    display: block; padding: 7px 14px; color: #333; font-size: 14px;
    line-height: 1.35; text-decoration: none;
}
#right-sidebar .widget-list li a:hover { background: #f2f3f0; }

/* --- Khoi tin --- */
.news-box .item { background: #fff; border-radius: 10px; overflow: hidden; }
.news-box .item .title a { color: #222; text-decoration: none; }
.news-box .meta { font-size: 12px; padding: 0 10px 10px; }
.news-box .meta a.cate {
    display: inline-block; padding: 2px 7px; border-radius: 3px;
    color: #fff; text-decoration: none; margin-right: 6px;
}
.news-box .meta .date { color: #888; }
.news-box.tabs { background: #fff; border-radius: 10px; overflow: hidden; }
.news-box.tabs .tabs-content-outer { display: none; }
.news-box.tabs .tabs-content-outer.active { display: block; }
.news-box.tabs ul.tabs-header { margin: 0; padding: 0; list-style: none; display: flex; }
.news-box.tabs .tab-header a {
    display: block; padding: 10px 18px; color: #fff;
    font-weight: 700; font-size: 14px; text-decoration: none;
}
.news-box.tabs ul.tabs-content { margin: 0; padding: 0; list-style: none; }

/* --- Trang bai viet / trang tinh --- */
.single-content { background: #fff; border-radius: 10px; padding: 24px 28px; }
.single-content h1.title { font-family: Oswald, "Be Vietnam Pro", sans-serif; font-size: 28px; line-height: 1.25; margin: 0 0 10px; }
.single-content .meta { font-size: 13px; color: #888; margin-bottom: 18px; }
.single-content .meta a.cate { display: inline-block; padding: 2px 8px; border-radius: 3px; background: #00aeef; color: #fff; text-decoration: none; margin-right: 8px; }
.entry-content img, .single-content img { max-width: 100%; height: auto; }
.top-index-page-index-title {
    font-family: Oswald, "Be Vietnam Pro", sans-serif;
    background: #fff; border-radius: 10px; margin: 0 0 16px; padding: 14px 20px; font-size: 22px;
}

/* --- Chan trang --- */

/* --- Khung giu cho anh da mat. Chu site chon giu cho thay vi go the <img>,
       de con doi chieu ve sau — duong dan goc nam trong data-anh-goc. --- */
.anh-mat {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 120px; min-height: 90px; padding: 12px 16px;
    border: 1px dashed #c3c8bf; border-radius: 3px;
    background: repeating-linear-gradient(45deg, #f2f3f0, #f2f3f0 8px, #eaece7 8px, #eaece7 16px);
    color: #6d766f; font-size: 13px; font-style: italic; text-align: center; vertical-align: middle;
}
.anh-mat-ngoai { border-style: dotted; }
.item-thumbnail .anh-mat { width: 100%; height: 100%; min-height: 0; border: 0; border-radius: 0; }

/* --- Shortcode da chuyen sang HTML --- */
.su-row { display: flex; flex-wrap: wrap; gap: 16px; }
.su-col-1-2 { flex: 1 1 calc(50% - 8px); min-width: 220px; }
.su-col-1-3 { flex: 1 1 calc(33.333% - 11px); min-width: 180px; }
.su-col-2-3 { flex: 1 1 calc(66.666% - 6px); min-width: 260px; }
.su-col-1-4 { flex: 1 1 calc(25% - 12px); min-width: 160px; }
.su-note { background: var(--note-bg, #f2f3f0); padding: 12px 16px; border-radius: 6px; margin: 12px 0; }
.su-divider { border: 0; border-top: 1px solid #ddd; margin: 20px 0; }
.su-box { border: 1px solid #e2e2e2; border-radius: 6px; margin: 16px 0; }
.su-box-title { margin: 0; padding: 10px 14px; background: #f2f3f0; font-size: 15px; }
.su-box-body { padding: 12px 14px; }
.su-table { overflow-x: auto; }
.su-table table { width: 100%; border-collapse: collapse; }
.wp-gallery, .su-carousel { display: flex; flex-wrap: wrap; gap: 10px; }
.wp-gallery figure, .su-carousel figure { margin: 0; }
figure.wp-caption { margin: 12px 0; }
figure.wp-caption img { max-width: 100%; height: auto; }
.wp-caption-text { font-size: 13px; color: #777; padding-top: 6px; }
details.expand, details.tab { margin: 10px 0; border: 1px solid #e2e2e2; border-radius: 6px; padding: 8px 12px; }
details summary { cursor: pointer; font-weight: 600; }

.pagination-index { margin: 20px 0; display: flex; gap: 6px; flex-wrap: wrap; }
.pagination-index a, .pagination-index span {
    padding: 7px 12px; background: #fff; border-radius: 6px; text-decoration: none; color: #333; font-size: 14px;
}
.pagination-index [aria-current] { background: #333; color: #fff; }

@media (max-width: 1060px) {
    #content.site-content, #side { width: 100%; float: none; }
    #header-line-2 .table, #header-line-2 .tr, #header-line-2 .td { display: block; float: none; width: auto; }
    #searchform { position: static; width: 100%; margin-top: 12px; }
    #header-line-1 { height: auto; }
    #nav-main-menu { height: auto; }
    #nav-main-menu > div > ul > li { margin-bottom: 8px; }
}

/* --- Chan trang: dung theo ban goc --- */
#footer .footer-line-2 .footer-column-1 img { display: block; max-width: 200px; height: auto; }
#footer .blog-footer-description { margin: 8px 0 0; font-size: 14px; color: #4a5b52; }
#footer .footer-line-2 .footer-column-2 .owner { font-size: 13px; }
#footer .footer-line-2 .footer-column-2 .owner a { color: #fff; }

/* --- Chan trang khong bao gio duoc ho ra troi ---
   style.css goc dat height:310px CO DINH va no-repeat. Hai he qua:
   (1) noi dung cao hon 310px thi TRAN ra ngoai, day tai lieu dai hon #page
       -> phan du hien nen body = troi xanh;
   (2) neu vi ly do gi footer cao hon 375px (chieu cao anh) thi phan duoi anh
       hien mau nen #AFEEEE, cung ra mot dai xanh nhat.
   Sua ca hai: chieu cao tu gian (min-height thay vi height), anh PHU KIN
   (background-size: cover) neo o day, va mau nen lay dung mau co o mep duoi
   anh (#45973A) de neu con ho thi cung lien mach. */
#footer .footer-line-2 {
    height: auto;
    min-height: 310px;
    background-size: cover;
    background-position: center bottom;
    background-color: #45973A;
}

/* --- Thanh cuon: to theo mau troi de khong con dai trang ben phai ---
   Mac dinh tren Windows thanh cuon co nen trang, thanh mot vach trang chay doc
   met phai. #97DBF1 la mau trung binh cua chinh anh nen bg.jpg. */
html {
    scrollbar-width: thin;
    scrollbar-color: #5FBCDE #97DBF1;
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #97DBF1; }
::-webkit-scrollbar-thumb { background: #5FBCDE; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #45A6CB; }
::-webkit-scrollbar-corner { background: #97DBF1; }