/**
	Theme Name:   IKnowledgeBase
	Author:       Wow-Company
	Author URI:   https://wow-estore.com
	Theme URI: 	  https://themes.wow-company.com/iknowledgebase/
	Description:  Easy, fast, minimalistic, responsive, and mobile-friendly WordPress Theme for creating Knowledge Base, Helpdesk, Wiki, and FAQ websites. Manage the display of categories on the main page of the site. Breadcrumbs for easy site navigation. Custom widget to display the current navigation in a category and in a separate post.
	Version:      1.4.3
	Tested up to: 6.8
	Requires PHP: 7.4
	License:      GPLv2 or later
	License URI:  http://www.gnu.org/licenses/gpl-2.0.html
	Text Domain:  iknowledgebase
	Domain Path:  /languages/
	Tags:         blog, education, entertainment, two-columns, right-sidebar, left-sidebar, custom-logo, custom-menu, theme-options, threaded-comments, translation-ready

	Note: The CSS files are loaded from assets/css/ folder.
*/
.panel-block-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* LEFT 80% */
.post-title {
    flex: 0 0 80%;
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* Không cho title đẩy nút */
.post-title-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* RIGHT 20% */
.download-action {
    flex: 0 0 20%;
    text-align: right;
}

.btn-download {
    display: inline-block;
    padding: 6px 12px;
    font-size: 13px;
    background: #ff3860;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
}

.btn-download:hover {
    background: #e72b53;
    color: #fff;
}

/* MOBILE */
@media (max-width: 768px) {
    .panel-block-wrapper {
        flex-wrap: wrap;
    }
    .post-title,
    .download-action {
        flex: 0 0 100%;
    }
    .download-action {
        text-align: left;
        margin-top: 6px;
    }
}

/* New Posts */
.doc-content.col-md-10.col-sm-9 {
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;
    border: 1px solid #ddd;
}
.doc-meta {
    display: flex;
    align-items: center;      /* canh giữa theo chiều dọc */
    gap: 8px;                 /* khoảng cách giữa các phần tử */
    flex-wrap: nowrap;        /* không xuống dòng */
    font-size: 14px;
}

.doc-meta img {
    display: inline-block;
    width: 16px;
    height: 16px;
}

.doc-meta .doc-download-button {
    margin-left: auto;        /* đẩy nút Download ra cuối hàng */
}
.doc-download-button {
    display: inline-block;
    background: #1e9bd7;       /* màu nền */
    color: #fff;               /* màu chữ */
    padding: 8px 16px;         /* kích thước nút */
    border-radius: 4px;        /* bo góc */
    text-decoration: none;     /* bỏ gạch chân */
    font-weight: 600;
    transition: 0.3s ease;     /* hiệu ứng hover mượt */
}

.doc-download-button:hover {
    background: #0c7db1;       /* màu khi hover */
    color: #ffffff;            /* đảm bảo chữ vẫn trắng */
    text-decoration: none;
    transform: translateY(-2px); /* nhích nhẹ lên khi hover */
}
.doc-download-button:hover {
    background: #0c7db1;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.content h2 {
    font-size: 20px;
    margin-bottom: 10px;
}

/* ==============================
   WRAPPER MENU
============================== */
.cus-menu {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

/* canh giữa logo + menu */
.cus-menu .e-con-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ==============================
   MENU LEVEL 1
============================== */
.cus-menu .elementor-nav-menu {
    display: flex;
    gap: 6px;
}

.cus-menu .elementor-nav-menu > li > a {
    padding: 10px 16px !important;
    border-radius: 10px;
    color: #0f172a;
    font-weight: 600;
    font-size: 15px;
    transition: all .25s ease;
}

/* hover menu */
.cus-menu .elementor-nav-menu > li > a:hover {
    background: #e8f0ff;
    color: #2563eb;
}

/* menu active */
.cus-menu .elementor-nav-menu > li.current-menu-item > a,
.cus-menu .elementor-nav-menu > li.current_page_item > a {
    background: #e8f0ff;
    color: #2563eb;
}

/* ==============================
   ICON CARET
============================== */
.cus-menu .sub-arrow {
    margin-left: 6px;
    font-size: 12px;
    transition: transform .25s ease;
}

.cus-menu .menu-item-has-children:hover .sub-arrow {
    transform: rotate(180deg);
}

/* ==============================
   SUB MENU (DROPDOWN)
============================== */
.cus-menu .elementor-nav-menu--dropdown {
    border-radius: 14px !important;
    padding: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12) !important;
    border: 1px solid #e5e7eb;
    min-width: 200px;
}

/* item trong submenu */
.cus-menu .elementor-nav-menu--dropdown li a {
    padding: 10px 14px !important;
    border-radius: 10px;
    color: #0f172a;
    font-weight: 500;
    font-size: 14px;
    transition: all .25s ease;
}

/* hover submenu */
.cus-menu .elementor-nav-menu--dropdown li a:hover {
    background: #f1f5ff;
    color: #2563eb;
}

/* ==============================
   ANIMATION DROPDOWN
============================== */
.cus-menu .elementor-nav-menu--dropdown {
    opacity: 0;
    transform: translateY(10px);
    transition: all .25s ease;
}

.cus-menu .menu-item-has-children:hover > .elementor-nav-menu--dropdown {
    opacity: 1;
    transform: translateY(0);
}

/* ==============================
   MOBILE TOGGLE (BURGER)
============================== */
.cus-menu .elementor-menu-toggle {
    background: #2563eb;
    border-radius: 10px;
    padding: 8px;
    color: #fff;
}

.cus-menu .elementor-menu-toggle svg {
    fill: #ffffff;
}

/* ==============================
   MOBILE MENU
============================== */
@media (max-width: 1024px) {

    .cus-menu {
        padding: 10px 14px;
    }

    .cus-menu .elementor-nav-menu {
        background: #ffffff;
        border-radius: 16px;
        padding: 12px;
        box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
    }

    .cus-menu .elementor-nav-menu li a {
        width: 100%;
        padding: 12px 14px !important;
        border-radius: 10px;
    }

}
/* ==============================
   END MENU
============================== */
/* ===============================
   CSS DANH MUC
================================ */
#content.panel {
    background: transparent;
    padding: 0;
}

/* mỗi item */
.panel-block-wrapper {
    background: #ffffff;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
    transition: all .25s ease;
}

.panel-block-wrapper:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10);
}

/* ===============================
   LINK CHÍNH (tiêu đề tài liệu)
================================ */
.panel-block {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none !important;
    color: #0f172a;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.5;
    flex: 1;
    padding: 0 !important;
    border: none !important;
}

.panel-block span:last-child {
    color: #0f172a;
    transition: color .2s ease;
}

.panel-block:hover span:last-child {
    color: #2563eb;
}

/* ===============================
   ICON SÁCH
================================ */
.panel-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 12px;
    background: #e8f0ff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    font-size: 18px;
}

/* nếu icon-book là font icon */
.icon-book {
    font-size: 18px;
}

/* ===============================
   NÚT DOWNLOAD
================================ */
.download-action a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    background: #2563eb;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none !important;
    transition: all .25s ease;
    white-space: nowrap;
}

.download-action a:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);
}

/* icon mũi tên */
.download-action img.emoji {
    width: 16px;
    height: 16px;
}

/* ===============================
   MOBILE RESPONSIVE
================================ */
@media (max-width: 768px) {
    .panel-block-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .download-action {
        width: 100%;
    }

    .download-action a {
        width: 100%;
        justify-content: center;
    }
}
/* ===============================
   END CSS DANH MUC
================================ */

/* ===============================
   CSS BAI POST - THUVIENDETHI
================================ */
#content {
    padding: 0 10px;
}

#content article .box {
    background: #ffffff;
    border-radius: 18px;
    padding: 28px 26px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

/* ===============================
   TITLE
================================ */
#content .entry-header .title {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.3;
    color: #2C3892;
    margin-bottom: 16px;
	font-family: 'Roboto', sans-serif;
}

/* ===============================
   META
================================ */
#content .entry-meta {
    border-color: #e5e7eb !important;
    color: #64748b;
}

#content .entry-meta a {
    color: #2563eb;
    font-weight: 600;
}

#content .entry-meta .icon {
    color: #2563eb;
}

/* ===============================
   CONTENT BODY
================================ */
#content .content {
    font-size: 16px;
    line-height: 1.8;
    color: #1e293b;
}

/* heading trong content */
#content .content h2,
#content .content h3 {
    margin-top: 28px;
    margin-bottom: 12px;
    font-weight: 800;
    color: #0f172a;
    position: relative;
    padding-left: 12px;
	font-family: 'Roboto', sans-serif;
}

#content .content h2::before,
#content .content h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 4px;
    height: 20px;
    background: #2563eb;
    border-radius: 99px;
}

/* ảnh trong bài */
#content .content img {
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

/* ===============================
   DOWNLOAD IMAGE (đầu bài)
================================ */
#content .content p a img {
    transition: all .25s ease;
}

#content .content p a img:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 26px rgba(37, 99, 235, 0.25);
}

/* ===============================
   PANEL PREVIEW
================================ */
#content .panel {
    border-radius: 16px;
    border: none;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

#content .panel-body {
    padding: 20px;
}

/* iframe preview */
#content .doc-preview iframe {
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

/* ===============================
   DOC META (bên phải)
================================ */
#content .doc-meta {
    background: #f8fafc;
    border-radius: 14px;
    padding: 16px;
    margin-top: 16px;
    text-align: center;
    font-size: 14px;
}

#content .doc-meta img {
    margin: 6px 0;
}

/* nút download */
#content .doc-download-button {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 18px;
    background: #2563eb;
    color: #fff !important;
    border-radius: 10px;
    font-weight: 700;
    transition: all .25s ease;
}

#content .doc-download-button:hover {
    background: #1d4ed8;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
}

/* ===============================
   DOC NOTE
================================ */
#content .doc-note {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #e8f0ff;
    color: #1e40af;
    font-size: 14px;
    font-weight: 600;
}

/* ===============================
   PRE / BẢNG NỘI DUNG DÀI
================================ */
#content pre {
    background: #0f172a;
    color: #e5e7eb;
    padding: 18px;
    border-radius: 14px;
    overflow-x: auto;
    font-size: 14px;
    line-height: 1.6;
}

/* ===============================
   FILE ĐÍNH KÈM
================================ */
#content .doc-files {
    margin-top: 20px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 14px;
}

#content .doc-files ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#content .doc-files li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

/* ===============================
   COMMENTS
================================ */
#comments {
    margin-top: 40px;
}

#comments .comment-respond {
    background: #ffffff;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

#comments textarea,
#comments input.input {
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    padding: 10px 12px;
    transition: all .2s ease;
}

#comments textarea:focus,
#comments input.input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* nút gửi comment */
#comments .button.is-primary {
    background: #2563eb;
    border-radius: 10px;
    font-weight: 700;
    transition: all .25s ease;
}

#comments .button.is-primary:hover {
    background: #1d4ed8;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
}

/* ===============================
   MOBILE
================================ */
@media (max-width: 768px) {
    #content article .box {
        padding: 20px 16px;
    }

    #content .entry-header .title {
        font-size: 22px;
		font-family: 'Roboto', sans-serif;
    }

    #content .doc-meta {
        margin-top: 20px;
    }
}
/* ===============================
   END CSS BAI POST - THUVIENDETHI
================================ */
/* ===============================
   MENU CON DẠNG ĐỨNG - MENU-CON
================================ */

/* khung menu */
.menu-con {
    background: #ffffff;
    border-radius: 18px;
    padding: 16px 12px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    font-family: 'Roboto', sans-serif;
}

/* bỏ border mặc định */
.menu-con .elementor-nav-menu--main {
    border: none;
}

/* list */
.menu-con ul.elementor-nav-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* item */
.menu-con ul.elementor-nav-menu > li {
    position: relative;
}

/* link chính */
.menu-con .elementor-nav-menu > li > a.elementor-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f8fafc;
    color: #0f172a;
    font-weight: 600;
    transition: all .25s ease;
}

/* hover */
.menu-con .elementor-nav-menu > li > a.elementor-item:hover {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: #ffffff;
    transform: translateX(4px);
}

/* icon mũi tên */
.menu-con .elementor-nav-menu > li > a .sub-arrow {
    margin-left: auto;
    transition: all .25s ease;
}

.menu-con .elementor-nav-menu > li > a:hover .sub-arrow {
    transform: rotate(180deg);
}

/* item active */
.menu-con .elementor-nav-menu > li.current-menu-item > a,
.menu-con .elementor-nav-menu > li.current-cat > a {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: #ffffff!important;
    font-weight: 700;
}

/* ===============================
   SUB MENU (menu con xổ ngang)
================================ */

.menu-con .elementor-nav-menu .sub-menu {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 12px;
    background: #ffffff;
    border-radius: 14px;
    padding: 10px;
    min-width: 220px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all .25s ease;
    z-index: 99;
}

/* show submenu */
.menu-con .elementor-nav-menu li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* item submenu */
.menu-con .sub-menu li a {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    font-weight: 500;
    transition: all .2s ease;
}

/* hover submenu */
.menu-con .sub-menu li a:hover {
    background: #eff6ff;
    color: #2563eb;
    padding-left: 16px;
}

/* ===============================
   MOBILE
================================ */
@media (max-width: 768px) {
    .menu-con {
        padding: 12px 10px;
        border-radius: 14px;
    }

    .menu-con .elementor-nav-menu > li > a.elementor-item {
        padding: 10px 12px;
        font-size: 15px;
    }

    /* submenu mobile xổ xuống */
    .menu-con .elementor-nav-menu .sub-menu {
        position: static;
        margin-left: 0;
        margin-top: 6px;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: #f1f5f9;
    }
}
/* ===============================
   END MENU CON DẠNG ĐỨNG - MENU-CON
================================ */
.mon-hoc-lop-1 {
  display: flex;
  gap: 5px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; /* tự xuống dòng trên mobile */
  margin: 20px 0;
}

.mon-hoc-lop-1 .mon-item {
  display: inline-block;
  padding: 14px 22px;
  background: linear-gradient(135deg, #1e90ff, #007bff);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.25);
  transition: all 0.3s ease;
  white-space: nowrap;
font-family: 'Roboto';
}

.mon-hoc-lop-1 .mon-item:hover {
  background: linear-gradient(135deg, #0056b3, #003f8a);
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0, 86, 179, 0.35);
}
.title-cate {
	font-size: 32px;
    font-weight: 700;
    color: #1f2933;
    margin: 0 0 20px 0;
    padding: 12px 16px;
    background: linear-gradient(90deg, #e0f2fe, #f0f9ff);
    border-left: 6px solid #2563eb;
    border-radius: 8px;
    line-height: 1.3;
}
.related-posts {
    margin-top: 40px;
    padding: 20px 24px;
}

.related-post-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.related-post-item {
    padding: 12px 16px;
    border-radius: 8px;
    background: #f8fafc;
    border-left: 4px solid #2563eb;
    transition: all 0.25s ease;
}

.related-post-item:hover {
    background: #eef2ff;
    transform: translateX(4px);
}

.related-post-item a {
    color: #0f172a;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.5;
}

.related-post-item a:hover {
    color: #2563eb;
}