/*
Theme Name: HOC Blog – Dr Hưng
Theme URI: https://hocdental.com
Description: Giao diện bài viết Blog đồng bộ với website HOC (Happy Orthodontists Club). Chỉ đổi trang đọc bài (single post), giữ nguyên hệ thống học viên & các trang khác.
Author: HOC – Dr Hưng Dental Center
Template: twentyseventeen
Version: 1.0
*/

/* ================================================================
   CHỈ áp dụng cho trang bài viết (body.hoc-single) — không rò rỉ
   sang trang LMS / trang khác.
   Màu theo logo HOC: navy #2E3356 · cam #F2913D · cyan #45BEE8
================================================================= */
.hoc-single{
  --navy:#2E3356; --navy-2:#23273f;
  --gold:#F2913D; --gold-2:#f6a95f;
  --blue-2:#45BEE8; --bg-soft:#f6fafd;
  --ink:#33384d; --muted:#6b7180; --line:#e7ebf2;
  margin:0; background:#fff; color:var(--ink);
  font-family:'Be Vietnam Pro',-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
.hoc-single *{box-sizing:border-box}
.hoc-single img{max-width:100%;height:auto}
.hoc-single a{color:var(--blue-2);text-decoration:none}
.hoc-single a:hover{text-decoration:underline}
.hoc-container{width:100%;max-width:1180px;margin:0 auto;padding:0 22px}

/* ---------- HEADER (giống trang chủ) ---------- */
.hoc-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 2px 14px rgba(20,30,60,.06)}
.hoc-hrow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:12px 0}
.hoc-hotline{font-size:15px;color:var(--muted);white-space:nowrap}
.hoc-hotline b{color:var(--navy);font-weight:800}
.hoc-hotline .sep{margin:0 8px;color:var(--line)}
.hoc-logo{justify-self:center;display:flex;align-items:center}
.hoc-logo img{height:70px;width:auto;display:block}
.hoc-hright{justify-self:end;display:flex;align-items:center;gap:18px}
.hoc-login{color:var(--navy);font-weight:700;font-size:14.5px;white-space:nowrap}
.hoc-login:hover{color:var(--blue-2);text-decoration:none}
.hoc-cta{background:var(--navy);color:#fff;font-weight:800;font-size:14px;letter-spacing:.5px;padding:12px 24px;border-radius:50px;text-transform:uppercase;white-space:nowrap;box-shadow:0 8px 20px rgba(18,58,134,.22);transition:.25s}
.hoc-cta:hover{background:var(--navy-2);transform:translateY(-2px);color:#fff;text-decoration:none}

/* ---------- BREADCRUMB ---------- */
.hoc-crumb{font-size:13.5px;color:var(--muted);padding:20px 0 4px}
.hoc-crumb a{color:var(--muted)}
.hoc-crumb a:hover{color:var(--gold)}
.hoc-crumb span{color:var(--navy);font-weight:600}

/* ---------- TIÊU ĐỀ BÀI ---------- */
.hoc-post-head{text-align:center;padding:14px 0 26px}
.hoc-eyebrow{display:inline-block;color:var(--gold);font-weight:800;font-size:13px;letter-spacing:2px;text-transform:uppercase;margin-bottom:14px}
.hoc-post-head h1{font-size:40px;line-height:1.25;color:var(--navy);font-weight:800;margin:0 auto;max-width:900px}
.hoc-post-head h1::after{content:"";display:block;width:70px;height:4px;background:var(--gold);border-radius:4px;margin:20px auto 0}
.hoc-meta{margin-top:16px;font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.hoc-meta b{color:var(--navy)}

/* ---------- ẢNH ĐẠI DIỆN ---------- */
.hoc-feat{max-width:1000px;margin:8px auto 0;padding:0 22px}
.hoc-feat img{width:100%;max-height:520px;object-fit:cover;border-radius:18px;box-shadow:0 20px 50px rgba(20,30,60,.16)}

/* ---------- NỘI DUNG BÀI ---------- */
.hoc-wrap{max-width:760px;margin:0 auto;padding:40px 22px 10px}
.hoc-content{font-size:18px;line-height:1.85;color:#2f3444}
.hoc-content p{margin:0 0 22px}
.hoc-content h2{font-size:27px;color:var(--navy);font-weight:800;margin:40px 0 16px;line-height:1.3}
.hoc-content h3{font-size:22px;color:var(--navy);font-weight:700;margin:32px 0 14px}
.hoc-content h2::before{content:"";display:inline-block;width:8px;height:22px;background:var(--gold);border-radius:3px;vertical-align:-3px;margin-right:12px}
.hoc-content a{color:#1f86b8;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.hoc-content ul,.hoc-content ol{margin:0 0 22px;padding-left:26px}
.hoc-content li{margin:0 0 10px}
.hoc-content ul li::marker{color:var(--gold)}
.hoc-content img{border-radius:14px;box-shadow:0 12px 30px rgba(20,30,60,.12);margin:14px 0}
.hoc-content blockquote{margin:28px 0;padding:20px 26px;background:var(--bg-soft);border-left:5px solid var(--gold);border-radius:0 14px 14px 0;font-style:italic;color:var(--navy);font-size:19px}
.hoc-content blockquote p:last-child{margin:0}
.hoc-content strong,.hoc-content b{color:var(--navy);font-weight:700}
.hoc-content figure{margin:24px 0}
.hoc-content figcaption{text-align:center;font-size:14px;color:var(--muted);margin-top:8px}
.hoc-content hr{border:none;border-top:1px solid var(--line);margin:34px 0}

/* ---------- HÀNG NÚT CHIA SẺ ---------- */
.hoc-share{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:34px 0 6px;padding-top:26px;border-top:1px solid var(--line)}
.hoc-share-label{font-weight:700;color:var(--navy);font-size:15px;margin-right:4px}
.hoc-share .hsbtn{display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;font-family:inherit;font-size:14.5px;font-weight:700;color:#fff;padding:10px 18px;border-radius:50px;transition:.2s;line-height:1;text-decoration:none}
.hoc-share .hsbtn svg{width:17px;height:17px;fill:currentColor}
.hoc-share .hsbtn:hover{transform:translateY(-2px);text-decoration:none;box-shadow:0 8px 18px rgba(20,30,60,.18)}
.hoc-share .hsbtn.fb{background:#1877F2}
.hoc-share .hsbtn.zl{background:#0068FF}
.hoc-share .hsbtn.cp{background:var(--navy)}
.hoc-share .hsbtn.cp.ok{background:#2E7D32}

/* ---------- KHỐI CHỐT CTA CUỐI BÀI ---------- */
.hoc-endcta{max-width:760px;margin:26px auto 0;padding:0 22px}
.hoc-endcta-box{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;border-radius:20px;padding:34px 32px;text-align:center;box-shadow:0 20px 50px rgba(18,58,134,.28)}
.hoc-endcta-box h3{font-size:24px;font-weight:800;margin:0 0 8px;color:#fff}
.hoc-endcta-box p{margin:0 0 20px;color:#d8ddf0;font-size:16px}
.hoc-zalo-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:6px}
.hoc-endcta-box .b-gold{display:inline-block;background:var(--gold);color:#3a2a05;font-weight:800;padding:14px 28px;border-radius:50px;letter-spacing:.3px;transition:.25s}
.hoc-endcta-box .b-gold:hover{background:var(--gold-2);transform:translateY(-2px);text-decoration:none;color:#3a2a05}
.hoc-endcta-box .b-hotline{display:block;margin-top:16px;color:#fff;font-weight:700;font-size:18px}
.hoc-endcta-box .b-hotline:hover{color:var(--blue-2);text-decoration:none}

/* ---------- FOOTER (giống trang chủ) ---------- */
.hoc-footer{background:var(--navy);color:#c9cde3;margin-top:60px;padding:52px 0 0;font-size:15px}
.hoc-fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:36px}
.hoc-fbrand img{height:64px;margin-bottom:16px}
.hoc-fbrand p{line-height:1.7;color:#aab0cf;font-size:14.5px}
.hoc-fsocial{display:flex;gap:12px;margin-top:16px}
.hoc-fsocial a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;transition:.25s}
.hoc-fsocial a:hover{background:var(--gold);transform:translateY(-2px)}
.hoc-fsocial svg{width:19px;height:19px;fill:#fff}
.hoc-footer h4{color:#fff;font-size:16px;font-weight:700;margin:0 0 16px}
.hoc-footer ul{list-style:none;margin:0;padding:0}
.hoc-footer ul li{margin:0 0 11px}
.hoc-footer ul li a{color:#aab0cf}
.hoc-footer ul li a:hover{color:var(--gold);text-decoration:none}
.hoc-fcontact li{display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.hoc-fcontact svg{width:17px;height:17px;fill:var(--gold);flex:none;margin-top:3px}
.hoc-fbottom{border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding:20px 0;text-align:center;font-size:13.5px;color:#9298b8}
.hoc-fbottom span{color:#fff;font-weight:700}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .hoc-fgrid{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:720px){
  .hoc-hrow{grid-template-columns:auto 1fr;gap:10px}
  .hoc-hotline{display:none}
  .hoc-logo{justify-self:start}
  .hoc-logo img{height:52px}
  .hoc-login{display:none}
  .hoc-cta{padding:10px 18px;font-size:12.5px}
  .hoc-post-head h1{font-size:28px}
  .hoc-content{font-size:17px}
  .hoc-content h2{font-size:23px}
  .hoc-feat img{max-height:300px;border-radius:12px}
  .hoc-fgrid{grid-template-columns:1fr;gap:26px;text-align:center}
  .hoc-fsocial{justify-content:center}
  .hoc-fcontact li{justify-content:center}
}

/* Ẩn thanh admin bar đè lên header sticky khi đăng nhập */
.hoc-single.admin-bar .hoc-header{top:32px}
@media(max-width:782px){.hoc-single.admin-bar .hoc-header{top:46px}}