:root {
  --blog-navy: #0f2162;
  --blog-navy-deep: #08194a;
  --blog-ink: #182846;
  --blog-muted: #586476;
  --blog-gold: #f4c21d;
  --blog-orange: #dc741d;
  --blog-paper: #f5f6f8;
  --blog-line: #e4e8ee;
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--blog-ink);
  background: var(--blog-paper);
  line-height: 1.6;
}

* { box-sizing: border-box; }
body.ds-blog-page { margin: 0; background: var(--blog-paper); }
.ds-blog-page a { color: #164c8e; }
.ds-blog-page a:hover { color: #b95a12; }
.ds-blog-page a:focus-visible { outline: 3px solid var(--blog-gold); outline-offset: 3px; border-radius: 3px; }
.ds-blog-container { width: min(100% - 2.5rem, 1180px); margin-inline: auto; }
.ds-blog-main { min-height: 55vh; }

.ds-blog-header { background: var(--blog-navy); border-bottom: 3px solid #d7a711; }
.ds-blog-header-inner { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.ds-blog-brand { display: inline-flex; flex: 0 0 auto; align-items: center; color: white !important; font-weight: 700; text-decoration: none; }
.ds-blog-brand img { display: block; width: 158px; max-height: 64px; object-fit: contain; }
.ds-blog-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .35rem 1.35rem; }
.ds-blog-nav a { color: #fff; font-size: .88rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ds-blog-nav a:hover, .ds-blog-nav a[aria-current="page"] { color: var(--blog-gold); }
.ds-blog-nav .ds-blog-nav-contact { display: inline-flex; align-items: center; gap: .35rem; margin-left: .25rem; padding: .55rem .95rem; border-radius: 5px; color: #182333; background: var(--blog-gold); }
.ds-blog-nav .ds-blog-nav-contact:hover { color: #182333; background: #ffda48; }
.ds-blog-mobile-menu { display: none; }

.ds-blog-breadcrumbs { padding: 1.15rem 0; }
.ds-blog-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; margin: 0; font-size: .83rem; color: var(--blog-muted); }
.ds-blog-breadcrumbs li + li::before { content: "›"; color: #a2aab4; margin-right: .35rem; }
.ds-blog-breadcrumbs a { color: #52637b; text-decoration: none; }
.ds-blog-breadcrumbs a:hover { color: var(--blog-orange); text-decoration: underline; }

.ds-blog-hero { position: relative; display: flex; align-items: center; min-height: 350px; overflow: hidden; margin: .4rem 0 2.8rem; border-radius: 16px; color: #fff; background: linear-gradient(90deg, rgba(8, 24, 69, .9), rgba(10, 28, 77, .65)), url('/assets/image/home/hero-my.webp') center 42% / cover, var(--blog-navy); box-shadow: 0 18px 40px rgba(15, 33, 98, .16); }
.ds-blog-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 5px; background: linear-gradient(90deg, var(--blog-orange), var(--blog-gold)); }
.ds-blog-hero-content { position: relative; z-index: 1; width: min(100%, 800px); padding: clamp(2rem, 5vw, 4rem); }
.ds-blog-eyebrow, .ds-blog-section-kicker, .ds-blog-cta-kicker { margin: 0 0 .65rem; color: var(--blog-gold); font-size: .74rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.ds-blog-hero h1 { margin: 0 0 .85rem; color: white; font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1.18; letter-spacing: -.035em; }
.ds-blog-hero p:not(.ds-blog-eyebrow) { max-width: 690px; margin: 0 0 1.4rem; color: #f0f3fb; font-size: 1rem; }
.ds-blog-button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; padding: .68rem 1.1rem; border-radius: 6px; color: #132337 !important; background: var(--blog-gold); font-size: .85rem; font-weight: 800; text-decoration: none; box-shadow: 0 5px 14px rgba(0, 0, 0, .12); }
.ds-blog-button:hover { color: #132337 !important; background: #ffda48; transform: translateY(-1px); }

.ds-blog-section-heading { margin: 0 0 1.35rem; }
.ds-blog-section-kicker { color: var(--blog-orange); }
.ds-blog-section-heading h2, .ds-blog-related > h2 { margin: 0; color: var(--blog-ink); font-size: clamp(1.45rem, 2.5vw, 2rem); line-height: 1.25; }
.ds-blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.45rem; margin: 0 0 3rem; }
.ds-blog-card { display: flex; flex-direction: column; overflow: hidden; min-width: 0; border: 1px solid var(--blog-line); border-radius: 12px; background: #fff; box-shadow: 0 7px 20px rgba(13, 33, 74, .07); transition: transform .2s ease, box-shadow .2s ease; }
.ds-blog-card:hover { transform: translateY(-4px); box-shadow: 0 15px 28px rgba(13, 33, 74, .13); }
.ds-blog-card-image, .ds-blog-card-fallback { position: relative; display: block; height: 205px; overflow: hidden; background: #dbe4ec; }
.ds-blog-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.ds-blog-card:hover .ds-blog-card-image img { transform: scale(1.04); }
.ds-blog-card-fallback { background: linear-gradient(90deg, rgba(9, 33, 82, .56), rgba(15, 33, 98, .17)), url('/assets/image/home/hero-my.webp') center / cover, #2b426b; }
.ds-blog-card-image-label { position: absolute; left: 1rem; bottom: 1rem; display: inline-block; padding: .35rem .6rem; border-radius: 4px; color: #fff; background: rgba(8, 25, 74, .88); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ds-blog-card-body { display: flex; flex: 1; flex-direction: column; padding: 1.2rem 1.25rem 1.3rem; }
.ds-blog-card-meta, .ds-blog-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: 0; color: var(--blog-muted); font-size: .76rem; }
.ds-blog-card-meta a, .ds-blog-article-meta a { color: #b65b16; font-weight: 700; text-decoration: none; }
.ds-blog-card-meta a:hover, .ds-blog-article-meta a:hover { text-decoration: underline; }
.ds-blog-card h2 { margin: .6rem 0 .45rem; font-size: 1.15rem; line-height: 1.35; }
.ds-blog-card h2 a { color: var(--blog-ink); text-decoration: none; }
.ds-blog-card h2 a:hover { color: #bd5e13; }
.ds-blog-card-excerpt { flex: 1; margin: 0 0 1rem; color: #4d5a67; font-size: .86rem; }
.ds-blog-readmore { display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start; color: #b6570f !important; font-size: .83rem; font-weight: 800; text-decoration: none; }
.ds-blog-readmore:hover { text-decoration: underline; }
.ds-blog-pagination { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0 3rem; color: var(--blog-muted); font-size: .85rem; }
.ds-blog-pagination a { padding: .55rem .85rem; border: 1px solid #ccd3dd; border-radius: 6px; background: #fff; color: var(--blog-navy); text-decoration: none; font-weight: 700; }
.ds-blog-pagination a:hover { border-color: var(--blog-orange); }
.ds-blog-empty { margin: 1.5rem 0 3rem; padding: 2rem; border: 1px solid var(--blog-line); border-radius: 12px; background: #fff; }

.ds-blog-article { overflow: hidden; margin: .4rem 0 3rem; border: 1px solid var(--blog-line); border-radius: 14px; background: #fff; box-shadow: 0 10px 28px rgba(13, 33, 74, .07); }
.ds-blog-article-header { padding: clamp(1.5rem, 4vw, 3rem); border-bottom: 1px solid #f0e5ca; background: linear-gradient(115deg, #fffdf7, #fff9eb); }
.ds-blog-article-header .ds-blog-eyebrow { color: #bd5c10; }
.ds-blog-article h1 { max-width: 850px; margin: 0 0 .9rem; color: var(--blog-ink); font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.18; letter-spacing: -.035em; }
.ds-blog-article-summary { max-width: 760px; margin: 0 0 1rem; color: #47576a; font-size: 1rem; }
.ds-blog-article-image { display: block; width: calc(100% - clamp(3rem, 8vw, 6rem)); max-height: 530px; margin: clamp(1.5rem, 3vw, 2.5rem) auto 0; border-radius: 10px; object-fit: cover; }
.ds-blog-article-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(235px, 300px); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; padding: clamp(1.5rem, 4vw, 3rem); }
.ds-blog-article-layout:has(.ds-blog-article-content > :only-child) { grid-template-columns: 1fr; }
.ds-blog-article-content { min-width: 0; overflow-wrap: anywhere; color: #293644; font-size: .96rem; line-height: 1.85; }
.ds-blog-article-content > :first-child { margin-top: 0; }
.ds-blog-article-content h2, .ds-blog-article-content h3, .ds-blog-article-content h4 { margin: 1.7rem 0 .7rem; color: var(--blog-ink); line-height: 1.3; }
.ds-blog-article-content h2 { font-size: 1.55rem; }
.ds-blog-article-content h3 { font-size: 1.25rem; }
.ds-blog-article-content a { color: #a74e0b; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ds-blog-article-content ul, .ds-blog-article-content ol { padding-left: 1.45rem; }
.ds-blog-article-content li { margin: .4rem 0; }
.ds-blog-article-content blockquote { margin: 1.5rem 0; padding: .4rem 1.15rem; border-left: 4px solid var(--blog-gold); background: #fffaf0; }
.ds-blog-article-content img { max-width: 100%; height: auto; }
.ds-blog-article-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.ds-blog-article-content th, .ds-blog-article-content td { padding: .5rem .7rem; border: 1px solid var(--blog-line); }
.ds-blog-cta { padding: 1.5rem; border-radius: 10px; color: #fff; background: linear-gradient(145deg, #122d76, #0b1e53); box-shadow: 0 10px 22px rgba(14, 36, 93, .15); }
.ds-blog-cta h2 { margin: .3rem 0 .8rem; color: #fff; font-size: 1.25rem; line-height: 1.35; }
.ds-blog-cta p { margin: 0 0 1.1rem; color: #e1e8f5; font-size: .84rem; }
.ds-blog-cta .ds-blog-button { width: 100%; }
.ds-blog-cta small { display: block; margin-top: 1rem; color: #c5d3ee; font-size: .7rem; line-height: 1.5; }
.ds-blog-related { margin: 0 0 3rem; }
.ds-blog-related > h2 { margin: 0 0 1.3rem; }
.ds-blog-related .ds-blog-grid { margin-bottom: 0; }

.ds-blog-footer { padding: 0 0 1.5rem; color: #e8edf9; background: #081431; }
.ds-blog-footer a { color: #e8edf9; text-decoration: none; }
.ds-blog-footer a:hover { color: var(--blog-gold); }
.ds-blog-footer-contact { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; padding: 2rem 0; border-bottom: 1px solid rgba(255,255,255,.13); }
.ds-blog-footer-contact div { min-width: 0; }
.ds-blog-footer-contact span { display: block; margin-bottom: .25rem; color: var(--blog-gold); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.ds-blog-footer-contact a { overflow-wrap: anywhere; font-size: .78rem; }
.ds-blog-footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; padding: 2.4rem 0; }
.ds-blog-footer-grid h2 { margin: 0 0 .85rem; color: var(--blog-gold); font-size: .9rem; }
.ds-blog-footer-grid p { max-width: 300px; margin: 0 0 1rem; color: #ccd4e5; font-size: .78rem; }
.ds-blog-footer-grid ul { list-style: none; padding: 0; margin: 0; }
.ds-blog-footer-grid li { margin: .45rem 0; font-size: .76rem; }
.ds-blog-footer-cta { color: var(--blog-gold) !important; font-size: .78rem; font-weight: 700; }
.ds-blog-footer-bottom { display: flex; justify-content: space-between; gap: 1rem 2rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.13); }
.ds-blog-footer-bottom p { max-width: 570px; margin: 0; color: #aeb9d0; font-size: .69rem; }

@media (max-width: 970px) {
  .ds-blog-nav { gap: .35rem .75rem; }
  .ds-blog-nav a { font-size: .78rem; }
  .ds-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-blog-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .ds-blog-container { width: min(100% - 2rem, 1180px); }
  .ds-blog-header-inner { position: relative; align-items: center; flex-direction: row; gap: 1rem; min-height: 70px; padding: .5rem 0; }
  .ds-blog-brand img { width: 135px; max-height: 55px; }
  .ds-blog-nav { display: none; }
  .ds-blog-mobile-menu { display: block; margin-left: auto; }
  .ds-blog-mobile-menu summary { display: flex; align-items: center; gap: .5rem; padding: .45rem .7rem; border: 1px solid rgba(255,255,255,.38); border-radius: 5px; color: #fff; font-size: .8rem; font-weight: 700; cursor: pointer; list-style: none; }
  .ds-blog-mobile-menu summary::-webkit-details-marker { display: none; }
  .ds-blog-mobile-menu summary:focus-visible { outline: 3px solid var(--blog-gold); outline-offset: 3px; }
  .ds-blog-mobile-menu nav { position: absolute; z-index: 10; top: calc(100% + 3px); right: 0; display: flex; flex-direction: column; gap: 0; width: min(300px, calc(100vw - 2rem)); padding: .4rem; border: 1px solid rgba(255,255,255,.2); border-radius: 0 0 9px 9px; background: var(--blog-navy-deep); box-shadow: 0 14px 24px rgba(0,0,0,.22); }
  .ds-blog-mobile-menu nav a { display: block; padding: .65rem .75rem; color: #fff; font-size: .84rem; font-weight: 600; text-decoration: none; }
  .ds-blog-mobile-menu nav a:hover, .ds-blog-mobile-menu nav a[aria-current="page"] { color: var(--blog-gold); }
  .ds-blog-mobile-menu nav .ds-blog-nav-contact { margin: .3rem; border-radius: 5px; color: #182333; background: var(--blog-gold); }
  .ds-blog-mobile-menu nav .ds-blog-nav-contact:hover { color: #182333; background: #ffda48; }
  .ds-blog-hero { min-height: 310px; margin-bottom: 2rem; }
  .ds-blog-hero-content { padding: 1.6rem; }
  .ds-blog-article-layout { grid-template-columns: 1fr; }
  .ds-blog-article-image { width: calc(100% - 3rem); }
  .ds-blog-footer-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-blog-footer-bottom { flex-direction: column; }
}

@media (max-width: 520px) {
  .ds-blog-grid, .ds-blog-footer-grid { grid-template-columns: 1fr; }
  .ds-blog-card-image, .ds-blog-card-fallback { height: 210px; }
  .ds-blog-footer-contact { grid-template-columns: 1fr; gap: .8rem; }
  .ds-blog-article-image { width: calc(100% - 2rem); }
  .ds-blog-article-layout { padding: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-blog-card, .ds-blog-card-image img, .ds-blog-button { transition: none; }
  .ds-blog-card:hover, .ds-blog-card:hover .ds-blog-card-image img, .ds-blog-button:hover { transform: none; }
}