/*
 * Sổ tay kế toán.
 *
 * Bổ sung cho design system gc-*, không thay thế. Chỉ khai những thứ bộ style
 * dùng chung chưa có: lưới chuyên mục, card bài, khối ảnh minh hoạ, typography
 * thân bài và mục lục trong bài.
 *
 * Bẫy đã biết: có rule toàn cục
 *   .guide_page p, ul, li, a, span { font-size: 14px !important }
 * vế `span` áp cho MỌI thẻ span và có !important. Vì vậy mọi con số/nhãn cần
 * cỡ chữ riêng ở đây đều đặt trong <div>/<b>, không dùng <span>.
 */

/* ============ Hub: lưới chuyên mục ============ */

.stk-hero {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 20px 22px;
    margin-bottom: 22px;
    border: 1px solid #e3e8ef;
    border-radius: 14px;
    background: linear-gradient(135deg, #f7fbff 0%, #f4f9f4 100%);
}

.stk-hero-img {
    flex: 0 0 210px;
    max-width: 210px;
    border-radius: 10px;
    overflow: hidden;
}

.stk-hero-img img {
    display: block;
    width: 100%;
    height: auto;
}

.stk-hero-body {
    flex: 1 1 auto;
    min-width: 0;
}

.stk-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin-top: 12px;
}

.stk-stat-num {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    color: #0b6b3a;
}

.stk-stat-label {
    font-size: 13px;
    color: #5b6470;
}

.stk-topics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: 16px;
}

.stk-topic-card {
    display: flex;
    flex-direction: column;
    padding: 16px 18px;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color .18s, box-shadow .18s, transform .18s;
}

.stk-topic-card:hover {
    border-color: #1a73e8;
    box-shadow: 0 6px 18px rgba(26, 115, 232, .12);
    transform: translateY(-2px);
    text-decoration: none;
}

.stk-topic-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    border-radius: 10px;
    background: #eaf2fe;
    color: #1a73e8;
    font-size: 17px;
}

.stk-topic-name {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: #16233a;
}

.stk-topic-desc {
    margin-top: 6px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #5b6470;
}

.stk-topic-count {
    margin-top: 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: #0b6b3a;
}

/* ============ Danh sách bài trong chuyên mục ============ */

.stk-article-list {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stk-article-item {
    display: flex;
    gap: 14px;
    padding: 14px;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    background: #fff;
    transition: border-color .18s, box-shadow .18s;
}

.stk-article-item:hover {
    border-color: #1a73e8;
    box-shadow: 0 4px 14px rgba(26, 115, 232, .10);
}

.stk-article-thumb {
    flex: 0 0 132px;
    max-width: 132px;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f7fa;
}

.stk-article-thumb img {
    display: block;
    width: 100%;
    height: 92px;
    object-fit: cover;
}

.stk-article-body {
    flex: 1 1 auto;
    min-width: 0;
}

.stk-article-title {
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.45;
    margin: 0 0 5px;
}

.stk-article-title a {
    color: #16233a;
    text-decoration: none;
}

.stk-article-title a:hover {
    color: #1a73e8;
}

.stk-article-sum {
    font-size: 13.5px;
    line-height: 1.62;
    color: #5b6470;
    margin: 0;
}

.stk-article-no {
    flex: 0 0 30px;
    font-size: 14px;
    font-weight: 700;
    color: #b4bcc7;
    text-align: right;
}

/* ============ Thân bài ============ */

.stk-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0 0 16px;
    font-size: 13px;
    color: #5b6470;
}

.stk-cover {
    margin: 0 0 20px;
    border-radius: 12px;
    overflow: hidden;
}

.stk-cover img {
    display: block;
    width: 100%;
    height: auto;
}

/* Mục lục tự dựng từ các h2 của bài */
.stk-toc {
    padding: 14px 18px;
    margin: 0 0 22px;
    border: 1px solid #e3e8ef;
    border-left: 3px solid #1a73e8;
    border-radius: 10px;
    background: #f8fafc;
}

.stk-toc-title {
    font-size: 14px;
    font-weight: 700;
    color: #16233a;
    margin-bottom: 8px;
}

.stk-toc ol {
    margin: 0;
    padding-left: 20px;
}

.stk-toc li {
    margin: 4px 0;
    font-size: 14px;
    line-height: 1.55;
}

.stk-toc a {
    color: #1a5fb4;
    text-decoration: none;
}

.stk-toc a:hover {
    text-decoration: underline;
}

.stk-prose {
    font-size: 15.5px;
    line-height: 1.78;
    color: #22303f;
}

.stk-prose h2 {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.4;
    color: #16233a;
    margin: 30px 0 12px;
    padding-top: 6px;
    scroll-margin-top: 90px;
}

.stk-prose h3 {
    font-size: 17.5px;
    font-weight: 600;
    line-height: 1.45;
    color: #16233a;
    margin: 22px 0 10px;
    scroll-margin-top: 90px;
}

.stk-prose p {
    margin: 0 0 14px;
}

.stk-prose ul,
.stk-prose ol {
    margin: 0 0 16px;
    padding-left: 24px;
}

.stk-prose li {
    margin: 6px 0;
    line-height: 1.72;
}

.stk-prose a {
    color: #1a5fb4;
}

.stk-prose strong {
    color: #16233a;
}

/* Bảng: bọc trong .stk-table-wrap để cuộn ngang trong khung, không đẩy cả trang */
.stk-table-wrap {
    overflow-x: auto;
    margin: 0 0 18px;
    border: 1px solid #e3e8ef;
    border-radius: 10px;
}

.stk-prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: #fff;
}

.stk-prose th,
.stk-prose td {
    padding: 9px 12px;
    border: 1px solid #e6eaf0;
    text-align: left;
    vertical-align: top;
    line-height: 1.6;
}

.stk-prose thead th {
    background: #f2f6fb;
    font-weight: 600;
    color: #16233a;
}

/* Ảnh minh hoạ trong bài */
.stk-figure {
    margin: 20px 0;
    text-align: center;
}

.stk-figure img {
    max-width: 100%;
    height: auto;
    border: 1px solid #e6eaf0;
    border-radius: 10px;
}

.stk-figure figcaption {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.55;
    color: #6b7480;
    font-style: italic;
}

/* Dãy ảnh chụp màn hình xếp ngang, cuộn được trên mobile */
.stk-screens {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin: 20px 0;
}

.stk-screens figure {
    margin: 0;
    text-align: center;
}

.stk-screens img {
    width: 100%;
    height: auto;
    border: 1px solid #e6eaf0;
    border-radius: 10px;
}

.stk-screens figcaption {
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #6b7480;
}

/* Khối ghi chú / lưu ý trong bài */
.stk-note {
    padding: 13px 16px;
    margin: 0 0 18px;
    border-radius: 10px;
    border-left: 3px solid #1a73e8;
    background: #f2f7fe;
    font-size: 14.5px;
    line-height: 1.72;
}

.stk-note-warn {
    border-left-color: #e8710a;
    background: #fff7ed;
}

.stk-note-title {
    font-weight: 700;
    color: #16233a;
    margin-bottom: 4px;
}

/* ============ Khối cuối bài ============ */

.stk-block {
    padding: 16px 18px;
    margin-top: 24px;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    background: #fff;
}

.stk-block-title {
    font-size: 16px;
    font-weight: 700;
    color: #16233a;
    margin-bottom: 12px;
}

.stk-source {
    font-size: 13.5px;
    line-height: 1.7;
    color: #5b6470;
    background: #f8fafc;
}

.stk-nav {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.stk-nav a {
    flex: 1 1 0;
    padding: 12px 14px;
    border: 1px solid #e3e8ef;
    border-radius: 10px;
    text-decoration: none;
    color: #16233a;
    background: #fff;
    transition: border-color .18s;
}

.stk-nav a:hover {
    border-color: #1a73e8;
}

.stk-nav-dir {
    font-size: 12px;
    color: #6b7480;
    display: block;
    margin-bottom: 3px;
}

.stk-nav-next {
    text-align: right;
}

@media (max-width: 640px) {
    .stk-hero { flex-direction: column; align-items: flex-start; }
    .stk-hero-img { flex-basis: auto; max-width: 100%; width: 100%; }
    .stk-article-item { flex-direction: column; }
    .stk-article-thumb { flex-basis: auto; max-width: 100%; }
    .stk-article-thumb img { height: 150px; }
    .stk-article-no { display: none; }
    .stk-nav { flex-direction: column; }
}