/* ============= ARTICLE LIST ============= */
.article-hero{position:relative;background:#fff;border-bottom:1px solid var(--line);padding:48px 0 36px;overflow:hidden;}
.article-hero::before{content:"";position:absolute;top:-100px;right:-100px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle, rgba(25,118,237,.06) 0%, transparent 70%);pointer-events:none;}
.article-hero::after{content:"";position:absolute;bottom:-150px;left:-100px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle, rgba(245,184,31,.05) 0%, transparent 70%);pointer-events:none;}
.article-hero-inner{max-width:1280px;margin:0 auto;padding:0 24px;position:relative;z-index:1;text-align:center;}
.article-hero .en{font-family:var(--font-en);font-size:11px;font-weight:700;color:var(--blue);letter-spacing:.3em;display:inline-flex;align-items:center;gap:12px;margin-bottom:14px;}
.article-hero .en::before, .article-hero .en::after{content:"";width:30px;height:1px;background:var(--blue);}
.article-hero h1{font-size:36px;font-weight:900;color:var(--navy);letter-spacing:-.01em;line-height:1.35;margin-bottom:14px;}
.article-hero p{font-size:13.5px;color:var(--text-sub);line-height:1.85;max-width:680px;margin:0 auto;}

.article-main{max-width:1280px;margin:32px auto 60px;padding:0 24px;}

.article-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;background:#fff;border-radius:12px;box-shadow:0 4px 16px rgba(30,42,82,.04);flex-wrap:wrap;margin-bottom:24px;}
.cat-pills{display:flex;gap:6px;flex-wrap:wrap;}
.cat-pill{padding:7px 14px;font-size:12px;font-weight:700;border-radius:99px;background:var(--bg);color:var(--text-sub);transition:all .2s;border:1.5px solid transparent;letter-spacing:.04em;display:inline-flex;align-items:center;gap:5px;}
.cat-pill:hover{background:#fff;border-color:var(--line);color:var(--navy);}
.cat-pill.is-active{background:var(--navy);color:#fff;}
.cat-pill .cnt{font-family:var(--font-en);font-size:10px;font-weight:800;opacity:.6;letter-spacing:0;}
.cat-pill.is-active .cnt{opacity:.85;}
.article-toolbar .meta{font-size:12px;color:var(--text-sub);}
.article-toolbar .meta strong{color:var(--navy);font-family:var(--font-en);font-weight:800;}

.tag-filter-bar{display:flex;align-items:center;gap:10px;margin-bottom:18px;padding:10px 14px;background:rgba(25,118,237,.06);border-radius:10px;font-size:12.5px;color:var(--navy);}
.tag-filter-bar .clear{margin-left:auto;color:var(--text-sub);text-decoration:underline;font-size:11px;}

.article-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:22px;}
.article-card{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 4px 16px rgba(30,42,82,.04);display:flex;flex-direction:column;transition:transform .3s ease, box-shadow .3s ease;}
.article-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(30,42,82,.12);}
.article-card .thumb{aspect-ratio:16/10;background:linear-gradient(180deg, var(--img-from), var(--img-to));position:relative;overflow:hidden;}
.article-card .thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.article-card .body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1;}
.article-card .cat{display:inline-block;padding:3px 9px;font-size:10px;font-weight:800;letter-spacing:.04em;border-radius:4px;color:#fff;background:linear-gradient(135deg, var(--blue), var(--blue-light));margin-bottom:8px;align-self:flex-start;}
.article-card h3{font-size:14.5px;font-weight:800;color:var(--navy);line-height:1.5;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.article-card p{font-size:12px;color:var(--text-sub);line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:12px;}
.article-card .meta{margin-top:auto;display:flex;align-items:center;gap:10px;font-family:var(--font-en);font-size:11px;font-weight:700;color:var(--text-mute);letter-spacing:.04em;}
.article-card .meta .dot{width:3px;height:3px;border-radius:50%;background:var(--text-mute);}

.article-empty{background:#fff;border-radius:14px;padding:60px 24px;text-align:center;color:var(--text-sub);}
.article-empty .ico{width:64px;height:64px;border-radius:50%;background:var(--bg);display:inline-grid;place-items:center;margin-bottom:14px;}
.article-empty h3{font-size:16px;color:var(--navy);margin-bottom:6px;}
.article-empty p{font-size:13px;margin-bottom:18px;}
.article-empty .btn-primary{display:inline-block;padding:16px 24px;background:linear-gradient(135deg, var(--navy-deep), var(--navy));color:#fff;border-radius:12px;font-size:14.5px;font-weight:700;}

/* ============= ARTICLE DETAIL ============= */
/* Banner: full-bleed image strip behind the title card.
   Only rendered when the article has an image. */
.article-banner{position:relative;height:400px;overflow:hidden;background:linear-gradient(180deg, var(--img-from), var(--img-to));}
.article-banner img{width:100%;height:100%;object-fit:cover;display:block;}
.article-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.95) 100%);pointer-events:none;}

/* Head card. Always a card with top corners rounded only; its bottom edge is
   welded onto the body card via the hairline divider below. */
.article-head{position:relative;max-width:820px;margin:32px auto 0;padding:0 24px;}
.article-head-inner{background:#fff;border:1px solid var(--line);border-bottom:0;border-radius:14px 14px 0 0;box-shadow:0 -2px 12px rgba(30,42,82,.04);padding:28px 36px 22px;text-align:center;}
.article-head .cat{display:inline-block;padding:4px 11px;font-size:11px;font-weight:800;letter-spacing:.04em;border-radius:4px;color:#fff;background:linear-gradient(135deg, var(--blue), var(--blue-light));margin-bottom:12px;}
.article-head h1{font-size:28px;font-weight:900;color:var(--navy);letter-spacing:-.01em;line-height:1.4;margin-bottom:12px;}
.article-head .head-lead{font-size:14px;color:var(--text-sub);line-height:1.85;max-width:680px;margin:0 auto 14px;}
.article-head .meta{font-family:var(--font-en);font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--text-mute);display:inline-flex;align-items:center;gap:10px;}
.article-head .meta .dot{width:3px;height:3px;border-radius:50%;background:var(--text-mute);}

/* When a banner is present: lift the head card into it. */
.article-head.has-banner{margin-top:-150px;position:relative;z-index:2;}

.article-body{max-width:820px;margin:0 auto;padding:0 24px;}
.article-body-card{position:relative;background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px;padding:32px 40px 36px;box-shadow:0 8px 24px rgba(30,42,82,.06);}
/* Hairline divider between head and body, inset from the card edges. */
.article-body-card::before{content:"";position:absolute;top:0;left:36px;right:36px;height:1px;background:linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent);}

.article-meta-bottom{max-width:820px;margin:24px auto 0;padding:0 24px;display:flex;align-items:center;flex-wrap:wrap;gap:16px;}
.article-tags{display:flex;flex-wrap:wrap;gap:6px;}
.article-tags a{padding:5px 11px;background:#fff;border:1px solid var(--line);border-radius:99px;font-size:11.5px;color:var(--text-sub);transition:all .15s;}
.article-tags a:hover{border-color:var(--navy);color:var(--navy);}
.article-share{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text-sub);}
.article-share button, .article-share a{width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--navy);display:grid;place-items:center;transition:all .15s;cursor:pointer;padding:0;}
.article-share button:hover, .article-share a:hover{border-color:var(--navy);background:var(--navy);color:#fff;}
.article-share svg{width:15px;height:15px;}

.article-section{max-width:1280px;margin:60px auto 0;padding:0 24px;}
.article-section .sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:20px;}
.article-section .sec-head h2{font-size:22px;font-weight:900;color:var(--navy);letter-spacing:-.01em;}
.article-section .sec-head .en{font-family:var(--font-en);font-size:11px;font-weight:700;color:var(--text-mute);letter-spacing:.25em;}

.related-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:22px;}
.article-section .related-grid .product-card-name{min-height:0;}

.article-back{max-width:1280px;margin:48px auto 60px;padding:0 24px;text-align:center;}
.article-back .btn-outline{display:inline-flex;align-items:center;gap:8px;padding:16px 24px;background:#fff;border:1.5px solid var(--line);color:var(--navy);border-radius:12px;font-size:14.5px;font-weight:700;transition:all .15s;}
.article-back .btn-outline:hover{border-color:var(--navy);background:var(--navy);color:#fff;}

/* ============= RESPONSIVE ============= */
@media (max-width: 1100px){
  .article-grid{grid-template-columns:repeat(2, 1fr);}
  .related-grid{grid-template-columns:repeat(2, 1fr);}
  .article-head h1{font-size:26px;}
}
@media (max-width: 760px){
  .article-hero{padding:32px 0 28px;}
  .article-hero h1{font-size:26px;}
  .article-hero p{font-size:12.5px;}
  .article-hero-inner{padding:0 16px;}
  .article-main{padding:0 16px;margin:24px auto 40px;}
  .article-toolbar{padding:12px 14px;}
  .article-grid{grid-template-columns:1fr;}
  .article-banner{height:240px;}
  .article-head{margin-top:22px;padding:0 16px;}
  .article-head-inner{padding:22px 20px 18px;border-radius:10px 10px 0 0;}
  .article-head h1{font-size:22px;}
  .article-head .meta{font-size:11px;}
  .article-head .head-lead{font-size:13px;}
  .article-head.has-banner{margin-top:-110px;}
  .article-body{padding:0 16px;}
  .article-body-card{padding:22px 20px 26px;border-radius:0 0 10px 10px;}
  .article-body-card::before{left:20px;right:20px;}
  .article-meta-bottom{padding:0 16px;}
  .article-section{padding:0 16px;margin-top:40px;}
  .article-section .sec-head h2{font-size:19px;}
  .related-grid{grid-template-columns:1fr;}
}