/* HTP Blog Archive + Single Post */
body.blog #page, body.archive #page, body.single-post #page,
body.blog .site.grid-container, body.archive .site.grid-container, body.single-post .site.grid-container,
body.blog .container.grid-container, body.archive .container.grid-container, body.single-post .container.grid-container,
body.blog .site-content, body.archive .site-content, body.single-post .site-content,
body.blog .content-area, body.archive .content-area, body.single-post .content-area { width:100%; max-width:none; margin:0; padding:0; }
body.single-post { overflow-x:hidden; }
.htp-single-post, .htp-single-post * { box-sizing:border-box; }
.htp-single-post { width:100%; max-width:100%; overflow:hidden; }
.htp-blog-container { width:min(1320px, calc(100% - 48px)); margin-inline:auto; }
.htp-blog-hero { position:relative; min-height:230px; display:flex; align-items:center; color:#fff; background:linear-gradient(90deg,rgba(3,7,12,.92),rgba(3,7,12,.75)), var(--blog-hero-bg) center/cover no-repeat; overflow:hidden; }
.htp-blog-hero:after { content:""; position:absolute; inset:auto -60px 0 auto; width:430px; height:100%; background:linear-gradient(135deg,transparent 15%,rgba(237,28,36,.75) 16%,rgba(237,28,36,.75) 45%,transparent 46%); transform:skewX(-12deg); opacity:.9; }
.htp-blog-hero .htp-blog-container { position:relative; z-index:1; }
.htp-blog-hero h1 { margin:0 0 18px; color:#fff; font-family:Anton,Arial,sans-serif; font-size:clamp(42px,5vw,72px); font-weight:400; line-height:1; text-transform:uppercase; letter-spacing:.01em; }
.htp-blog-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	max-width: 100%;
	color: #fff;
	font: 700 15px/1.4 Lato, Arial, sans-serif;
	opacity: .95;
	overflow-wrap: anywhere;
}

.htp-blog-breadcrumb a,
.htp-blog-breadcrumb span {
	display: inline-flex;
	align-items: center;
	min-width: 0;
	color: #fff;
	text-decoration: none;
}

.htp-blog-breadcrumb span:last-child {
	flex: 1 1 auto;
	min-width: 220px;
}
.htp-blog-hero::after { pointer-events:none; }
.htp-blog-breadcrumb { position:relative; z-index:5; }
.htp-blog-breadcrumb a { position:relative; z-index:6; pointer-events:auto; }
.htp-blog-breadcrumb a:hover { color:#ff4b4b; }
.htp-blog-body, .htp-single-post-body { background:#fff; padding:56px 0 70px; }
.htp-blog-layout { display:grid; grid-template-columns:280px minmax(0,1fr); gap:42px; align-items:start; }
.htp-blog-sidebar { position:sticky; top:90px; display:grid; gap:24px; }
.htp-blog-widget, .htp-blog-cta { border:1px solid #e2e6ea; border-radius: 5px; background:#fff; box-shadow:0 16px 42px rgba(17,24,39,.05); }
.htp-blog-widget { padding:20px; }
.htp-blog-widget h2 { margin:0 0 16px; color:#111318; font:400 24px/1.1 Anton,Arial,sans-serif; text-transform:uppercase; }
.htp-blog-widget h2:before { content:""; display:inline-block; width:4px; height:20px; margin-right:8px; background:#ed1c24; vertical-align:-3px; }
.htp-blog-cat-list { list-style:none; margin:0; padding:0; display:grid; }
.htp-blog-cat-list a { display:flex; min-height:46px; align-items:center; padding:0 14px; border-bottom:1px solid #eef1f4; color:#222; text-decoration:none; font:700 15px/1.2 Lato,Arial,sans-serif; }
.htp-blog-cat-list li.is-active a, .htp-blog-cat-list a:hover { color:#ed1c24; background:#fff4f4; }
.htp-blog-cta { padding:28px; background:#fff7f7; border-color:#ffcaca; }
.htp-blog-cta svg { width:58px; height:58px; padding:12px; border:2px solid #ed1c24; border-radius:50%; stroke:#ed1c24; stroke-width:2.2; }
.htp-blog-cta h3 { margin:16px 0 10px; color:#ed1c24; font:400 26px/1.15 Anton,Arial,sans-serif; text-transform:uppercase; }
.htp-blog-cta p { margin:0 0 18px; color:#444; font:500 16px/1.6 Lato,Arial,sans-serif; }
.htp-blog-cta a { display:flex; align-items:center; justify-content:center; min-height:52px; border-radius: 5px; background:#e81720; color:#fff; text-decoration:none; font:400 19px/1 Anton,Arial,sans-serif; text-transform:uppercase; }
.htp-blog-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 28px; }
.htp-blog-head h2 { margin:0; color:#111318; font:400 32px/1.1 Anton,Arial,sans-serif; text-transform:uppercase; }
.htp-blog-head h2 span { color:#ed1c24; font:500 16px/1 Lato,Arial,sans-serif; text-transform:none; }
.htp-blog-head select { min-width:180px; min-height:46px; border:1px solid #d9dee5; border-radius: 5px; padding:0 14px; background:#fff; }
.htp-blog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; align-items:stretch; }
.htp-post-card { display:flex; flex-direction:column; height:100%; min-width:0; overflow:hidden; border:1px solid #e1e5ea; border-radius:5px; background:#fff; box-shadow:0 18px 42px rgba(17,24,39,.06); }
.htp-post-card__thumb { position:relative; display:block; overflow:hidden; aspect-ratio:1.42/1; background:#f4f5f7; }
.htp-post-card__thumb img { width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.htp-post-card:hover .htp-post-card__thumb img { transform:scale(1.04); }
.htp-post-card__thumb time { position:absolute; top:12px; left:12px; width:42px; min-height:52px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius: 5px; background:#e81720; color:#fff; font:400 20px/1 Anton,Arial,sans-serif; text-transform:uppercase; }
.htp-post-card__thumb time small { margin-top:3px; font:700 12px/1 Lato,Arial,sans-serif; }
.htp-post-card__body { display:flex; flex:1 1 auto; flex-direction:column; min-width:0; padding:22px 24px 24px; }
.htp-post-card h3 { min-height:58px; margin:0 0 16px; color:#111318; font:700 18px/1.35 Lato,Arial,sans-serif; letter-spacing:-.01em; overflow-wrap:anywhere; }
.htp-post-card h3 a { color:#111318; text-decoration:none; }
.htp-post-card p { min-height:84px; margin:0 0 22px; color:#555; font:500 18px/1.6 Lato,Arial,sans-serif; overflow-wrap:anywhere; }
.htp-post-more { display:inline-flex; align-items:center; gap:7px; width:max-content; margin-top:auto; color:#ed1c24; text-decoration:none; font:400 18px/1 Anton,Arial,sans-serif; letter-spacing:.02em; text-transform:uppercase; transition:color .18s ease, transform .18s ease; }
.htp-post-more:hover { color:#c91519; transform:translateX(3px); }
body.blog .htp-post-card h3,
body.archive .htp-post-card h3,
body.blog .htp-post-card h3 a,
body.archive .htp-post-card h3 a {
	font-weight: 700;
}

body.blog .htp-post-card p,
body.archive .htp-post-card p,
body.blog .htp-post-card__body span,
body.archive .htp-post-card__body span {
	font-weight: 500;
}

body.blog .htp-post-card h3,
body.archive .htp-post-card h3,
body.blog .htp-post-card h3 a,
body.archive .htp-post-card h3 a {
	font-size: 18px;
	line-height: 1.35;
}

body.blog .htp-post-card p,
body.archive .htp-post-card p,
body.blog .htp-post-card__body span,
body.archive .htp-post-card__body span {
	font-size: 18px;
	line-height: 1.55;
}

.htp-blog-pagination { margin-top:34px; text-align:center; }
.htp-blog-pagination .page-numbers { display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; margin:0 3px; border:1px solid #e1e5ea; border-radius: 5px; color:#111; text-decoration:none; font-weight:700; }
.htp-blog-pagination .current { background:#ed1c24; color:#fff; border-color:#ed1c24; }
.htp-single-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:54px; align-items:start; }
.htp-article,
.htp-article-content { min-width:0; max-width:100%; overflow-wrap:anywhere; }
.htp-article-content > *,
.htp-article-content figure,
.htp-article-content .wp-block-image,
.htp-article-content .wp-block-gallery,
.htp-article-content .wp-block-table { max-width:100%; }
.htp-article-content img,
.htp-article-content figure img,
.htp-article-content .wp-block-image img { display:block; width:100%; max-width:100%; height:auto; margin:22px auto; border-radius:5px; }
.htp-article-content figure { margin:24px 0; }
.htp-article-content figcaption { margin-top:8px; color:#666; font:400 14px/1.5 Lato,Arial,sans-serif; text-align:center; }
.htp-article-content iframe,
.htp-article-content video,
.htp-article-content embed,
.htp-article-content object { display:block; max-width:100%; margin:22px auto; }
.htp-article-content .wp-block-table { overflow-x:auto; }
.htp-article-content p,
.htp-article-content li { max-width:100%; font-weight:500; overflow-wrap:anywhere; word-break:normal; }
.htp-article-content a { color:#ed1c24; overflow-wrap:anywhere; }
.htp-article h1 { margin:0 0 18px; color:#111318; font:700 clamp(30px,3vw,44px)/1.18 Lato,Arial,sans-serif; letter-spacing:-.02em; }
.htp-article-cat { display:inline-flex; margin:0 0 16px; padding:7px 12px; border-radius:5px; background:#ffe8e9; color:#ed1c24; font:700 13px/1 Lato,Arial,sans-serif; text-transform:uppercase; }
.htp-article-meta { display:flex; flex-wrap:wrap; gap:20px; margin:0 0 22px; color:#555; font:700 15px/1.3 Lato,Arial,sans-serif; }
.htp-article-meta span { display:inline-flex; align-items:center; gap:8px; }
.htp-article-meta svg { width:18px; height:18px; stroke:#111; }
.htp-article-thumb { overflow:hidden; margin:0 0 26px; border-radius: 5px; }
.htp-article-thumb img { width:100%; height:auto; display:block; }
.htp-article-content { color:#222; font:500 18px/1.75 Lato,Arial,sans-serif; }
.htp-article-content h2, .htp-article-content h3, .htp-article-content h4 { color:#111; font-family:Lato,Arial,sans-serif; font-weight:700; line-height:1.3; overflow-wrap:anywhere; }
.htp-article-content h2 { margin:34px 0 16px; font-size:clamp(26px,2.4vw,36px); }
.htp-article-content h3 { margin:28px 0 14px; font-size:clamp(22px,2vw,28px); }
.htp-article-content h4 { margin:24px 0 12px; font-size:20px; }
.htp-article-content table { width:100%; border-collapse:collapse; margin:22px 0; }
.htp-article-content th, .htp-article-content td { padding:13px; border:1px solid #e1e5ea; }
.htp-article-toc { position:relative; width:100%; margin:0 0 28px; border:1px solid #e7ebf1; border-radius:12px; background:#fbfcfd; box-shadow:0 14px 32px rgba(17,24,39,.05); overflow:hidden; }
.htp-article-toc > summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:54px; padding:0 18px; color:#111827; font:700 15px/1.2 Lato,Arial,sans-serif; text-transform:uppercase; cursor:pointer; list-style:none; }
.htp-article-toc > summary::-webkit-details-marker { display:none; }
.htp-article-toc > summary span { display:inline-flex; align-items:center; gap:10px; }
.htp-article-toc > summary span::before { content:""; display:inline-block; flex:0 0 auto; width:22px; height:22px; background:url("https://hungthinhpack.com/wp-content/themes/htp-child-theme/assets/icons/nav.svg") center/contain no-repeat; }
.htp-article-toc > summary::after { content:"+"; flex:0 0 auto; color:#ed1c24; font-size:22px; font-weight:400; line-height:1; }
.htp-article-toc[open] > summary::after { content:"−"; }
.htp-article-toc__panel { display:grid; gap:9px; padding:0 14px 14px; }
.htp-article-toc__link { display:flex; align-items:center; gap:10px; min-height:40px; padding:9px 12px; border:1px solid #edf0f5; border-radius:9px; background:#fff; color:#48515e; font:700 13px/1.35 Lato,Arial,sans-serif; text-decoration:none; }
.htp-article-toc__link:hover { border-color:rgba(237,28,36,.28); background:rgba(237,28,36,.05); color:#ed1c24; }
.htp-article-toc__link span { flex:0 0 auto; color:#ed1c24; font-size:12px; font-weight:700; letter-spacing:.02em; }
.htp-article-toc__link strong { min-width:0; color:inherit; font-size:inherit; font-weight:700; line-height:1.35; overflow-wrap:anywhere; }
.htp-article-toc__link--level-3 { margin-left:14px; }
.htp-article-toc__link--level-4 { margin-left:28px; }
.htp-article-share { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:30px; padding:14px; border:1px solid #e1e5ea; border-radius:5px; }
.htp-article-share strong { color:#111318; font:700 18px/1.3 Lato,Arial,sans-serif; }
.htp-article-share a { display:flex; width:40px; height:40px; align-items:center; justify-content:center; border:0; border-radius:0; background:transparent; color:inherit; text-decoration:none; transition:transform .18s ease, opacity .18s ease; }
.htp-article-share a img { display:block; width:32px; height:32px; object-fit:contain; filter:none; }
.htp-article-share a:hover { background:transparent; opacity:.9; transform:translateY(-1px); }
.htp-single-sidebar { position:sticky; top:90px; display:grid; gap:24px; }
.htp-related-posts { display:grid; gap:16px; }
.htp-related-post { display:grid; grid-template-columns:96px 1fr; gap:14px; align-items:center; text-decoration:none; }
.htp-related-post img { width:96px; height:72px; object-fit:cover; border-radius: 5px; }
.htp-related-post b { display:block; color:#111; font:700 15px/1.35 Lato,Arial,sans-serif; }
.htp-related-post small { display:block; margin-top:7px; color:#777; font-weight:700; }
@media (max-width:1024px){.htp-blog-layout,.htp-single-layout{grid-template-columns:1fr}.htp-blog-sidebar,.htp-single-sidebar{position:static}.htp-blog-grid{grid-template-columns:repeat(2,1fr)}.htp-post-card h3{font-size:18px}.htp-post-card p,.htp-post-card__body span{font-size:18px}}
@media (max-width:768px){.htp-blog-container{width:100%;max-width:100%;padding-left:14px;padding-right:14px}.htp-blog-hero{min-height:170px}.htp-blog-hero h1{font-size:42px}.htp-blog-body,.htp-single-post-body{padding:34px 0 46px;overflow:hidden}.htp-blog-sidebar{order:2}.htp-blog-grid{grid-template-columns:1fr;gap:16px}.htp-blog-head{align-items:flex-start;flex-direction:column}.htp-blog-head select{width:100%}.htp-post-card{display:grid;grid-template-columns:128px 1fr;height:auto}.htp-post-card__thumb{height:100%;aspect-ratio:auto}.htp-post-card__body{display:flex;min-height:100%;padding:12px}.htp-post-card h3{min-height:0;margin-bottom:10px;font-size:16px;line-height:1.35}.htp-post-card p{display:none;font-size:16px;line-height:1.55}.htp-post-card__body span{font-size:16px;line-height:1.55}.htp-post-more{margin-top:auto;font-size:15px}.htp-single-layout{display:block}.htp-article{width:100%;max-width:100%;overflow:hidden}.htp-article h1{font-size:28px;line-height:1.28;overflow-wrap:anywhere}.htp-article-content{width:100%;max-width:100%;overflow:hidden;font-size:16px;font-weight:500;line-height:1.7}.htp-article-content p,.htp-article-content li{font-size:16px;font-weight:500;line-height:1.7;overflow-wrap:anywhere}.htp-article-content h2{font-size:24px;line-height:1.28}.htp-article-content h3{font-size:20px;line-height:1.3}.htp-article-content h4{font-size:18px}.htp-article-content img,.htp-article-content figure img,.htp-article-content .wp-block-image img{width:100%;max-width:100%;height:auto;margin:18px auto}.htp-article-content figure,.htp-article-content .wp-block-image{width:100%;max-width:100%;margin:18px 0;overflow:hidden}.htp-article-content table{min-width:620px}.htp-single-sidebar{grid-row:auto;margin-top:28px}.htp-related-post{grid-template-columns:88px 1fr}}
@media (max-width:480px){.htp-blog-container{padding-left:12px;padding-right:12px}.htp-post-card{grid-template-columns:112px 1fr}.htp-post-more{font-size:14px}.htp-blog-cta{padding:20px}.htp-blog-cta h3{font-size:22px}.htp-article h1{font-size:26px}.htp-article-content h2{font-size:22px}}

/* Blog breadcrumb mobile fix v26 */

@media (max-width: 767px) {
	.htp-blog-hero {
		min-height: 174px;
		padding: 30px 0 26px;
	}

	.htp-blog-hero h1 {
		margin-bottom: 14px;
		font-size: 44px;
		line-height: 1;
	}

	.htp-blog-breadcrumb {
		display: grid;
		grid-template-columns: auto 12px auto 12px minmax(0, 1fr);
		column-gap: 8px;
		row-gap: 6px;
		align-items: start;
		font-size: 15px;
		line-height: 1.35;
	}

	.htp-blog-breadcrumb a,
	.htp-blog-breadcrumb span {
		line-height: 1.35;
		white-space: normal;
	}

	.htp-blog-breadcrumb span:last-child {
		grid-column: 5;
		min-width: 0;
		max-width: 100%;
	}
}

@media (max-width: 430px) {
	.htp-blog-breadcrumb {
		grid-template-columns: auto 10px auto 10px minmax(0, 1fr);
		column-gap: 6px;
		font-size: 14px;
	}

	.htp-blog-breadcrumb span:last-child {
		display: block;
	}
}