/**
 * NukeViet Content Management System
 * @version 4.x
 * @author VINADES.,JSC <contact@vinades.vn>
 * @copyright (C) 2009-2021 VINADES.,JSC. All rights reserved
 * @license GNU/GPL version 2 or any later version
 * @see https://github.com/nukeviet The NukeViet CMS GitHub project
 */

/* Các tùy chỉnh CSS của giao diện nên để vào đây */

/* ===== SkyPearl: cầu nối giao diện FE cho markup module NukeViet ===== */
body { font-family: 'Be Vietnam Pro', sans-serif; background: var(--cream); color: var(--text); }
.nv-main { min-width: 0; }
.nv-main .panel, .nv-main .well { border: 1px solid var(--gold-line); border-radius: 12px; box-shadow: none; background: #fff; }
.nv-main .panel-default > .panel-heading { background: var(--cream-2); border-color: var(--gold-line); border-radius: 12px 12px 0 0; }
.nv-main .btn-primary, .nv-main .btn-info { background: var(--gold); border-color: var(--gold-dark); color: var(--title); }
.nv-main .btn-primary:hover, .nv-main .btn-info:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--title); }
.nv-main .form-control { border-radius: 8px; border-color: var(--gold-line); box-shadow: none; }
.nv-main .form-control:focus { border-color: var(--gold-dark); box-shadow: 0 0 0 3px rgba(228,193,103,.25); }
.nv-main a { color: var(--sea); }
.pagination > li > a, .pagination > li > span { color: var(--sea); border-color: var(--gold-line); }
.pagination > .active > a, .pagination > .active > span { background: var(--gold); border-color: var(--gold-dark); color: var(--title); }
.article-wrap { margin-bottom: 24px; }
.article-wrap .article-main { margin-top: 16px; }
.article-wrap .article-body img { max-width: 100%; height: auto; }
.cat-intro img { float: left; margin: 0 16px 8px 0; border-radius: 10px; max-width: 220px; }
.cat-block { margin-bottom: 40px; }
.cat-block .section-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-bottom: 16px; }
.cat-block .section-head__title { margin: 0; }
.cat-block .section-head__more { margin-left: auto; font-weight: 600; }
.section-sub { margin: 24px 0 8px; }
.post-numlist { list-style: none; padding: 0; margin: 0 0 24px; }
.post-numlist li a { display: block; padding: 12px 0; border-bottom: 1px solid var(--gold-line); font-weight: 600; color: var(--title); }
.post-numlist .badge { margin-right: 8px; }
.related.list-items { list-style: none; padding-left: 0; }
.related.list-items li { padding: 6px 0; }
.sidebar .panel { border: 1px solid var(--gold-line); border-radius: 12px; box-shadow: none; }

/* ===== Contact ===== */
.nv-contact-form .field-wrap { display: block; }
.nv-contact-form input[type=text], .nv-contact-form input[type=email], .nv-contact-form select, .nv-contact-form textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--gold-line); border-radius: 8px; background: #fff; font: inherit; }
.nv-contact-form textarea { min-height: 140px; }
.nv-contact-form input:focus, .nv-contact-form textarea:focus { outline: 0; border-color: var(--gold-dark); box-shadow: 0 0 0 3px rgba(228,193,103,.25); }
.nv-contact-form .form-group { margin-bottom: 14px; }
.nv-contact-form .form-actions { display: flex; gap: 10px; justify-content: flex-end; }
.nv-contact-form .has-error input, .nv-contact-form .has-error textarea { border-color: #b3261e; }
.contact-dep p { margin: 0 0 8px; }
.contact-dep a { color: var(--sea); }
.contact-result.alert { margin-top: 12px; }
.nv-contact-form textarea { display: block; width: 100%; min-height: 140px; resize: vertical; }
.nv-contact-form .check-line { display: flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
.nv-contact-form .check-line input { width: 18px; height: 18px; margin: 0; }
.nv-contact-form .captcha-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nv-contact-form .captcha-row .captchaImg { width: 150px; height: 40px; max-width: none; flex: none; object-fit: contain; border-radius: 6px; background: #f0f0f0; }
.nv-contact-form .captcha-row .fcode { width: 140px; flex: none; }
.nv-contact-form .captcha-row .fa-refresh { cursor: pointer; font-size: 18px; color: var(--sea); }