/*
================================================

Cyberhost Article Kit v1.0

================================================
*/

/* 01 Root */

:root{

--ch-primary:#1f6feb;

--ch-success:#16a34a;

--ch-warning:#d97706;

--ch-danger:#dc2626;

--ch-info:#0ea5e9;

--ch-dark:#1e293b;

--ch-text:#334155;

--ch-light:#f8fafc;

--ch-border:#e2e8f0;

--ch-radius:10px;

--ch-shadow:0 4px 15px rgba(0,0,0,.05);

}

/* 02 Article */

/* Container */

.ch-article{

width:100%;

margin:auto;

line-height:1.9;

color:var(--ch-text);

font-size:17px;

}

/* Heading */

.ch-article h1{

font-size:42px;

margin-bottom:25px;

line-height:1.3;

font-weight:700;

color:var(--ch-dark);

}

.ch-article h2{

margin-top:60px;

margin-bottom:20px;

font-size:32px;

color:var(--ch-dark);

padding-bottom:10px;

border-bottom:1px solid var(--ch-border);

}

.ch-article h3{

font-size:24px;

margin-top:40px;

margin-bottom:15px;

}

.ch-article h4{

font-size:20px;

margin-top:30px;

margin-bottom:10px;

}


/* Paragraph */

.ch-article p{

margin:20px 0;

}


/* List */

.ch-article ul,

.ch-article ol{

margin:20px 0 20px 25px;

}

.ch-article li{

margin:10px 0;

}

/* Link */

.ch-article a{

color:var(--ch-primary);

text-decoration:none;

font-weight:600;

transition:.3s;

}

/* Hover */

.ch-article a:hover{

text-decoration:underline;

}

/* Image */

.ch-image{

margin:40px 0;

text-align:center;

}

.ch-image img{

width:100%;

border-radius:12px;

box-shadow:var(--ch-shadow);

}

.ch-image figcaption{

font-size:14px;

margin-top:10px;

color:#64748b;

}


/* Alert */

.ch-alert{

padding:25px;

border-radius:12px;

margin:35px 0;

border-left:5px solid;

}

/* Info */

.ch-info{

background:#eff6ff;

border-color:var(--ch-info);

}


/* Success */

.ch-success{

background:#f0fdf4;

border-color:var(--ch-success);

}

/* Warning */

.ch-warning{

background:#fff7ed;

border-color:var(--ch-warning);

}


/* Danger */

.ch-danger{

background:#fef2f2;

border-color:var(--ch-danger);

}

/*==================================================
TABLE OF CONTENTS
==================================================*/

.ch-toc{

background:#fff;

border:1px solid var(--ch-border);

border-radius:12px;

padding:25px;

margin:40px 0;

box-shadow:var(--ch-shadow);

}

.ch-toc-title{

font-size:22px;

font-weight:700;

margin-bottom:20px;

color:var(--ch-dark);

}

.ch-toc{
font-size:16px;
}

.ch-toc li a{
font-size:16px !important;
}

.ch-cta h2{

font-size:20px;

line-height:1.3;

margin-bottom:20px;

}

.ch-toc ul{

list-style:none;

margin:0;

padding:0;

}

.ch-toc li{

margin:10px 0;

}

.ch-toc li a{

display:block;
padding:8px 12px;

font-size:16px;

font-weight:500;

line-height:1.5;

}


.ch-toc li a:hover{

background:#f1f5f9;

text-decoration:none;

}

.ch-toc ul ul{

margin-left:20px;

margin-top:10px;

}

/*==================================================
FAQ
==================================================*/

.ch-faq{

margin:50px 0;

}

.ch-faq-item{

border:1px solid var(--ch-border);

border-radius:10px;

margin-bottom:15px;

overflow:hidden;

background:#fff;

box-shadow:var(--ch-shadow);

}


/* FAQ Header */

.ch-faq-question{

width:100%;

padding:20px;

cursor:pointer;

font-size:18px;

font-weight:600;

background:#fff;

border:none;

display:flex;

justify-content:flex-start;

align-items:flex-start;

gap:12px;

text-align:left;

transition:.25s;

}

.ch-faq-question::after{

margin-left:auto;

flex-shrink:0;

}



/* FAQ Hover */

.ch-faq-question:hover{

background:#f8fafc;

}


/* FAQ Arrow */

.ch-faq-question::after{

content:"+";

font-size:24px;

transition:.3s;

}

.ch-faq-item.active .ch-faq-question::after{

content:"−";

}


/* FAQ Answer */

.ch-faq-answer{

display:none;

padding:0 20px 20px;

}

.ch-faq-item.active .ch-faq-answer{

display:block;

animation:fadeFaq .25s ease;

}


/* FAQ Animation */

@keyframes fadeFaq{

from{

opacity:0;

transform:translateY(-5px);

}

to{

opacity:1;

transform:none;

}

}

/*==================================================
CTA
==================================================*/

.ch-cta{
    background:linear-gradient(135deg,#0f172a,#1e293b);
    color:#fff;
    padding:40px;
    border-radius:14px;
    margin:60px 0;
    text-align:center;
}


/* CTA Title */

.ch-cta h2,
.ch-cta h2 *{
    color:#fff !important;
    border:none;
    margin-top:0;
}


/* CTA Paragraph */

.ch-cta p,
.ch-cta p *{
    color:#cbd5e1 !important;
    line-height:1.8;
}

/* CTA a Link */
.ch-cta a{
    color:#fff !important;
}


/* CTA Button */

.ch-btn{

display:inline-block;

margin-top:20px;

padding:14px 28px;

background:#1f6feb;

color:#fff;

border-radius:8px;

font-weight:700;

text-decoration:none;

transition:.25s;

}


/* CTA Button Hover */

.ch-btn:hover{

background:#0d5fd7;

text-decoration:none;

color:#fff;

}

/*==================================================
 AUTHOR BOX
==================================================*/

.ch-author{

display:flex;

gap:20px;

align-items:center;

padding:30px;

border-radius:12px;

background:#f8fafc;

margin:60px 0;

}


/* Author Avatar */

.ch-author img{

width:90px;

height:90px;

border-radius:50%;

object-fit:cover;

}


/* Author Name */

.ch-author h3{

margin:0;

}


/* Author Description */

.ch-author p{

margin:8px 0;

}


/*==================================================
 RELATED ARTICLES
==================================================*/

.ch-related{

margin:60px 0;

}

/* Related Grid */
.ch-related-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

gap:20px;

}


/* Related Card */

.ch-related-card{

border:1px solid var(--ch-border);

border-radius:10px;

padding:20px;

transition:.3s;

background:#fff;

}


/* Related Hover */

.ch-related-card:hover{

transform:translateY(-4px);

box-shadow:var(--ch-shadow);

}


/*==================================================
 TABLE
==================================================*/

.ch-article table{

width:100%;

border-collapse:collapse;

margin:30px 0;

}

.ch-article th{

background:#1f2937;

color:#fff;

padding:15px;

text-align:left;

}

.ch-article td{

padding:15px;

border:1px solid var(--ch-border);

}

.ch-article tr:nth-child(even){

background:#f8fafc;

}


/*==================================================
 CODE LINE
==================================================*/

.ch-article pre{

background:#0f172a;

color:#fff;

padding:20px;

overflow:auto;

border-radius:10px;

margin:30px 0;

position:relative;

}

.ch-article code{

font-family:Consolas,monospace;

}


/*==================================================
 MOBILE RESPONSIVE
==================================================*/
@media(max-width:768px){

.ch-article h1{

font-size:32px;

}

.ch-article h2{

font-size:28px;

}

.ch-author{

display:block;

text-align:center;

}

.ch-author img{

margin-bottom:20px;

}

.ch-cta{

padding:25px;

}

}


/* ==========================================
 Reading Progress
========================================== */

#ch-reading-progress{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:#0F62FE;

    z-index:99999;

    transition:width .08s linear;

}


/* Copy Code Button */
.ch-copy{

position:absolute;

right:10px;

top:10px;

background:#2563eb;

color:#fff;

border:none;

padding:6px 12px;

border-radius:6px;

cursor:pointer;

font-size:13px;

}


/* Back to Top */

#ch-top{

position:fixed;

right:25px;

bottom:25px;

width:50px;

height:50px;

border:none;

border-radius:50%;

background:#2563eb;

color:#fff;

display:none;

cursor:pointer;

z-index:999;

}


/* Active TOC */

.ch-toc a.active{

background:#dbeafe;

color:#1d4ed8;

font-weight:700;

}


/* Collapse TOC Mobile */

@media(max-width:768px){

.ch-toc ul{

display:none;

}

.ch-toc.open ul{

display:block;

}

.ch-toc-title{

cursor:pointer;

}

}

/*==================================================
ARTICLE META
==================================================*/

.ch-meta{

display:flex;

flex-wrap:wrap;

gap:12px;

margin:20px 0 40px;

font-size:14px;

color:#64748b;

}


.ch-meta span{

background:#f1f5f9;

padding:8px 14px;

border-radius:20px;

display:inline-flex;

align-items:center;

gap:5px;

}



/*==================================================
CATEGORY BADGE
==================================================*/

.ch-category{

display:inline-block;

background:#dbeafe;

color:#1d4ed8;

padding:6px 14px;

border-radius:20px;

font-size:14px;

font-weight:600;

margin-bottom:15px;

}



/*==================================================
LAST UPDATED
==================================================*/

.ch-updated{

font-size:14px;

color:#64748b;

margin-top:15px;

}



/*==================================================
READING TIME
==================================================*/

.ch-reading-time{

font-size:14px;

color:#475569;

margin:15px 0;

display:flex;

align-items:center;

gap:8px;

}


/*==================================================
CYBERHOST BRAND NOTICE
==================================================*/

.ch-brand-notice{

background:#eff6ff;

border-left:5px solid #2563eb;

padding:25px;

border-radius:12px;

margin:40px 0;

}


.ch-brand-notice h3{

margin-top:0;

color:#1e40af;

}


.ch-brand-notice p{

margin-bottom:0;

}

/*==================================================
BACK TO TOC
==================================================*/

.ch-back-toc{

position:fixed;

right:25px;

bottom:25px;

display:flex;

align-items:center;

gap:10px;

padding:12px 18px;

border:none;

border-radius:999px;

background:#2563eb;

color:#fff;

font-size:14px;

font-weight:600;

cursor:pointer;

box-shadow:0 10px 30px rgba(0,0,0,.20);

opacity:0;

visibility:hidden;

transform:translateY(20px);

transition:.25s;

z-index:9999;

}

.ch-back-toc.show{

opacity:1;

visibility:visible;

transform:translateY(0);

}

.ch-back-toc:hover{

background:#1d4ed8;

transform:translateY(-2px);

}

.ch-back-toc span{

white-space:nowrap;

}

@media(max-width:768px){

.ch-back-toc{

right:16px;

bottom:16px;

padding:10px 14px;

font-size:13px;

}

}


/*==================================================
TOC COLLAPSE MOBILE
==================================================*/

@media(max-width:768px){

.ch-toc{

padding:18px;

}

.ch-toc-title{

display:flex;

justify-content:space-between;

align-items:center;

cursor:pointer;

margin-bottom:0;

}

.ch-toc-title::after{

content:'▾';

font-size:18px;

transition:.25s;

}

.ch-toc ul{

display:none;

margin-top:15px;

}

.ch-toc.open ul{

display:block;

}

.ch-toc.open .ch-toc-title::after{

transform:rotate(180deg);

}

}


/*==================================================
TABLE
==================================================*/

.ch-table{

    width:100%;

    overflow-x:auto;

    margin:32px 0;

    border:1px solid #E5E7EB;

    border-radius:12px;

    background:#fff;

    -webkit-overflow-scrolling:touch;

}

.ch-table table{

    width:100%;

    min-width:700px;

    border-collapse:collapse;

}

.ch-table th{

    background:#0F62FE;

    color:#fff;

    font-weight:600;

    padding:16px 18px;

    text-align:left;

    white-space:nowrap;

}

.ch-table td{

    padding:14px 18px;

    border-top:1px solid #E5E7EB;

    vertical-align:top;

}

.ch-table tbody tr:nth-child(even){

    background:#F8FAFC;

}

.ch-table tbody tr:hover{

    background:#EEF4FF;

}

.ch-table::-webkit-scrollbar{

    height:8px;

}

.ch-table::-webkit-scrollbar-thumb{

    background:#BFC7D5;

    border-radius:50px;

}

@media(max-width:768px){

    .ch-table{

        border-radius:10px;

    }

}


.ch-table{

    position:relative;

}

.ch-table-hint{

    display:none;

    padding:10px 16px;

    font-size:13px;

    color:#64748B;

    background:#F8FAFC;

    border-bottom:1px solid #E5E7EB;

}

@media(max-width:768px){

    .ch-table-hint{

        display:block;

    }

}