/* Quick Front Editor — style khối Code ở front-end (view).
   Nạp sau prism-tomorrow.min.css → nền navy thương hiệu #0F1B33, GIỮ token màu prism-tomorrow.
   Cấu trúc view (front-code.js dựng):
     <div.qfe-code-card> [ <div.qfe-code-head> nhãn + nút Sao chép ] [ <pre.wp-block-code> ] */

/* JetBrains Mono (self-host) — font lập trình cho khối Code. Tách subset latin / latin-ext / vietnamese. */
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/jbm-latin-400.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/jbm-latin-700.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/jbm-latinext-400.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/jbm-latinext-700.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/jbm-viet-400.woff2') format('woff2'); unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/jbm-viet-700.woff2') format('woff2'); unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }

/* Card bọc ngoài: nền navy + bo góc; cắt gọn header/code bên trong. */
.qfe-code-card{
	background: #0F1B33;
	border-radius: 10px;
	margin: 1.6em 0;
	overflow: hidden;
}

/* Thanh header: nhãn ngôn ngữ (trái) + nút Sao chép (phải) + đường ngăn dưới. */
.qfe-code-head{
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 30px;
	box-sizing: border-box;
	padding: 2px 8px 2px 16px;
	background: rgba( 255, 255, 255, .025 );
	border-bottom: 1px solid rgba( 255, 255, 255, .09 );
}

/* <pre> khối code. Liệt kê [class*=language-] để THẮNG specificity của prism-tomorrow. */
.wp-block-code,
.wp-block-code[class*="language-"]{
	position: relative;
	background: #0F1B33;
	color: #E6EBF2;
	border-radius: 10px;
	padding: 40px 16px 16px; /* fallback khi KHÔNG có header (nolabel + nocopy) */
	margin: 1.6em 0;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
/* Trong card: <pre> trong suốt, không bo, không margin, không padding trên (header lo phần đó). */
.qfe-code-card > .wp-block-code,
.qfe-code-card > .wp-block-code[class*="language-"]{
	background: transparent;
	border-radius: 0;
	margin: 0;
	padding: 14px 16px;
}

/* <code> bên trong trong suốt để lộ nền navy. */
.wp-block-code code,
.wp-block-code[class*="language-"] > code,
.wp-block-code > code[class*="language-"]{ background: transparent; }

.wp-block-code code,
.wp-block-code[class*="language-"]{
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: .875rem;
	line-height: 1.6;
	letter-spacing: 0;
	font-feature-settings: "liga" 1, "calt" 1; /* ligature lập trình (=> != >= …) */
	white-space: pre;
	tab-size: 4;
	-moz-tab-size: 4;
	hyphens: none;
	text-shadow: none;
}
.wp-block-code code{ display: block; }

/* Nhãn ngôn ngữ trong header (trái). */
.qfe-code-lang{
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .68rem; letter-spacing: .05em; text-transform: uppercase;
	color: #93A6C6; pointer-events: none; user-select: none;
}

/* Nút Sao chép trong header (phải). ".qfe-code-head …" thắng rule ".entry-content button" của theme. */
.qfe-code-head .qfe-code-copy{
	margin: 0 0 0 auto;
	display: inline-flex; align-items: center; gap: 5px;
	padding: 2px 6px;
	font-family: inherit; font-size: .7rem; line-height: 1; font-weight: 500;
	color: #8B9EBE; background: transparent;
	border: 0; border-radius: 6px;
	cursor: pointer; opacity: 1;
	user-select: none; -webkit-user-select: none; /* không dính clipboard khi bôi đen code */
	transition: opacity .15s ease, background .12s ease, color .12s ease;
	-webkit-appearance: none; appearance: none;
}
.qfe-code-head .qfe-code-copy svg{ display: block; flex: 0 0 auto; }
.qfe-code-head .qfe-code-copy:hover{ background: rgba( 255, 255, 255, .08 ); color: #EAF0FA; }
.qfe-code-head .qfe-code-copy:focus-visible{ outline: 2px solid #5B8DEF; outline-offset: 2px; }
.qfe-code-head .qfe-code-copy.is-copied{ background: transparent; color: #6EE7A0; }
.qfe-code-head .qfe-code-copy.is-failed{ background: transparent; color: #FCA5A5; }

/* Chỉ hiện nút Sao chép khi rê chuột vào code block (giữ hiện khi focus bàn phím & lúc báo Đã chép).
   Trên thiết bị cảm ứng (hover:none) thì luôn hiện — khối @media không áp dụng. */
@media (hover: hover){
	.qfe-code-head .qfe-code-copy{ opacity: 0; }
	.qfe-code-card:hover .qfe-code-copy,
	.qfe-code-head .qfe-code-copy:focus-visible,
	.qfe-code-head .qfe-code-copy.is-copied,
	.qfe-code-head .qfe-code-copy.is-failed{ opacity: 1; }
}

/* Vùng thông báo screen-reader — ẩn hình ảnh, trình đọc vẫn đọc. */
.qfe-code-sr{
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* RTL: nút sang trái. */
[dir="rtl"] .qfe-code-head .qfe-code-copy{ margin-left: 0; margin-right: auto; }

@media (max-width: 480px){
	.qfe-code-card > .wp-block-code{ font-size: .84rem; padding: 13px 14px; }
	.wp-block-code{ padding: 38px 14px 14px; font-size: .84rem; }
	.qfe-code-head{ min-height: 30px; }
}