body { font-family: 'Calibri','Carlito','Segoe UI',Arial,sans-serif; font-size: 17px; overflow-x: clip; background-color: #f7f6f2; color: #1c1917; }
.nav-link { position: relative; padding-bottom: 4px; }
.nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 0; background-color: #0a7a32; transition: width 0.3s; }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.nav-drop { display: none; } .nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop { display: block; }
.anchor { scroll-margin-top: 130px; }
html { scroll-behavior: smooth; }
@media (max-width: 1023px) {
    .nav-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; border-bottom: 1px solid #e7e5e4; padding: .25rem 0 !important; }
    .nav-item > a.nav-link { flex: 1; padding: .75rem 0; }
    .nav-drop, .nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop { display: none; position: static !important; padding-top: 0 !important; width: 100%; }
    .nav-item.open .nav-drop { display: block; }
    .nav-drop > div { box-shadow: none !important; border: 0 !important; border-left: 2px solid #0a7a32 !important; margin: 0 0 .5rem .25rem; }
    .nav-drop a { white-space: normal !important; }
    .nav-item.open > button i { transform: rotate(180deg); }
}
@media (max-width: 767px) {
    .expert-table, .expert-table tbody { display: block; width: 100%; }
    .expert-table thead { display: none; }
    .expert-table tr { display: block; padding: 1rem 0; }
    .expert-table td { display: block; padding: .3rem 1.25rem !important; text-align: left !important; }
    .expert-table td:nth-child(3)::before { content: 'Khu vực: '; color: #78716c; font-weight: 400; }
}
.page-fade { animation: fadeIn 0.5s ease-out; }
.hero-rise > * { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
.hero-rise > *:nth-child(2) { animation-delay: .12s; } .hero-rise > *:nth-child(3) { animation-delay: .24s; } .hero-rise > *:nth-child(4) { animation-delay: .36s; } .hero-rise > *:nth-child(5) { animation-delay: .48s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Ô nhập tối giản chỉ áp dụng cho form */
.custom-form input[type="text"], .custom-form input[type="email"], .custom-form input[type="tel"], .custom-form textarea, .custom-form select {
    background: transparent; border: none; border-bottom: 1px solid #d6d3d1; outline: none; padding: 0.75rem 0; width: 100%; font-family: inherit; border-radius: 0;
}
.custom-form input:focus, .custom-form textarea:focus, .custom-form select:focus { border-bottom-color: #0a7a32; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f7f6f2; }
::-webkit-scrollbar-thumb { background: #d6d3d1; }
::-webkit-scrollbar-thumb:hover { background: #0a7a32; }

.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

#connectModal.open, #videoModal.open { display: flex; }

/* Nội dung bài viết (soạn bằng trình soạn thảo) */
.rich { line-height: 1.75; color: #292524; overflow-wrap: anywhere; }
.rich h2 { font-size: 1.6rem; font-weight: 700; margin: 2rem 0 .75rem; color: #0a7a32; }
.rich h3 { font-size: 1.3rem; font-weight: 700; margin: 1.5rem 0 .5rem; }
.rich h4 { font-size: 1.1rem; font-weight: 700; margin: 1.25rem 0 .5rem; }
.rich p { margin: 0 0 1rem; }
.rich ul { list-style: disc; padding-left: 1.5rem; margin: 0 0 1rem; }
.rich ol { list-style: decimal; padding-left: 1.5rem; margin: 0 0 1rem; }
.rich a { color: #0a7a32; text-decoration: underline; }
.rich img { max-width: 100%; height: auto; margin: 1rem auto; display: block; }
.rich blockquote { border-left: 4px solid #0a7a32; padding: .25rem 1rem; margin: 1rem 0; color: #57534e; background: #fff; }
.rich table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
.rich td, .rich th { border: 1px solid #d6d3d1; padding: .5rem .75rem; }
.rich iframe { max-width: 100%; }
.rich .ql-align-center { text-align: center; } .rich .ql-align-right { text-align: right; } .rich .ql-align-justify { text-align: justify; }

/* ===== Chế độ sửa trực tiếp (chỉ khi đăng nhập quản trị) ===== */
#editBar { position: fixed; left: 16px; bottom: 16px; z-index: 65; display: flex; align-items: center; gap: .9rem; background: #1c1917; color: #fff; padding: .55rem 1rem; border-radius: 999px; font-size: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.35); }
body.edit-on #editBar { background: #0a7a32; }
body.edit-on [data-edit], body.edit-on [data-edit-s] { outline: 2px dashed #d97706; outline-offset: 2px; cursor: pointer !important; transition: background-color .15s; }
body.edit-on [data-edit]:hover, body.edit-on [data-edit-s]:hover { background-color: rgba(224,176,74,.28) !important; }
.edit-only { display: none !important; }
body.edit-on .edit-only { display: inline-flex !important; }

/* ===== Thêm / sửa / xóa mục ngay trên trang ===== */
.edit-block { display: none; }
body.edit-on .edit-block { display: block; }
.add-box { margin: 1rem 0; }
.add-box button { width: 100%; padding: .85rem 1rem; border: 2px dashed #0a7a32; color: #0a7a32; font-weight: 700; background: rgba(10,122,50,.05); border-radius: 6px; cursor: pointer; }
.add-box button:hover { background: rgba(10,122,50,.14); }
body.edit-on [data-item]:hover { outline: 2px dashed #2563eb; outline-offset: -2px; }
#itemBar { position: fixed; z-index: 66; display: none; gap: 4px; background: #1c1917; padding: 4px; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.4); }
#itemBar button { color: #fff; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 6px; cursor: pointer; }
#itemBar button:hover { background: #0a7a32; }
#itemBar button[data-a="del"]:hover { background: #dc2626; }
.edit-flat { scroll-margin-top: 120px; }
.edit-flat .ql-container { font-size: 16px; }