@charset "utf-8";
/*1. Nút copy */
/*Chung: tooltip + button*/
.tooltip-wrapper { position: relative; }
.tooltip-wrapper::after {content: attr(data-tooltip);position: absolute;bottom: 10%;right:-5px;transform: translateX(-50%);background-color:#e9ecef;color: #212529;padding: 6px 10px;border-radius: 4px;font-size: 13px;white-space: nowrap;opacity: 0;visibility: hidden;transition: opacity 0.2s ease, visibility 0.2s ease;z-index: 10;}
.tooltip-wrapper:hover::after {opacity: 1;visibility: visible;}
.copy-button {padding: 8px;border-radius: 50%;background-color: transparent;border: none;cursor: pointer;transition: background-color 0.2s ease;position: relative;
overflow: hidden;}
.copy-button:hover { background-color: #e9ecef; }
.copy-button:focus, .copy-button:focus-visible { outline: none; box-shadow: none; }
.copy-button::before {content: '';position: absolute;top: 50%;left: 50%;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.1);border-radius: 50%;transform: translate(-50%, -50%) scale(0);opacity: 0;}
.copy-button.is-clicked::before {animation: pulse-effect 0.5s ease-out;}
@keyframes pulse-effect {from { transform: translate(-50%, -50%) scale(0); opacity: 0.8; }
to { transform: translate(-50%, -50%) scale(2); opacity: 0; }}
.copy-button svg { width: 18px; height: 18px; fill: #5f6368; display: block; }
.copy-button .icon-check { display: none; }
.copy-button.is-copied .icon-copy { display: none; }
.copy-button.is-copied .icon-check { display: block; fill: #0d6efd; }

/*Prompt*/
.prompt-container {
font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background-color: #ffffff;color: #212529;border: 1px solid #dee2e6;border-radius: 8px;margin: 25px 0px;}
.prompt-header {display: flex;justify-content: space-between;align-items: center;padding: 8px 16px;}
.prompt-title {font-weight: nomal;font-size: 16px;}
.prompt-text {border-top: 1px solid #dee2e6;padding: 16px;}
.prompt-text pre {margin: 0; white-space: pre-line !important;}
.prompt-text pre {padding-bottom: 15px;scrollbar-width: thin;scrollbar-color: #ced4da #e9ecef;}
.prompt-text pre::-webkit-scrollbar {width: 5px;height: 5px;}
.prompt-text pre::-webkit-scrollbar-track {background: #e9ecef;border-radius: 4px;}
.prompt-text pre::-webkit-scrollbar-thumb {background-color: #ced4da;border-radius: 4px;}
.prompt-text pre::-webkit-scrollbar-thumb:hover {background-color: #adb5bd;}
/*.prompt-block {font-family:roboto,arial,sans-serif;}*/
.prompt-short {overflow: auto;white-space: pre;}
.prompt-long {white-space: pre-line !important;overflow-wrap: break-word;max-height: 150px;  overflow-y: auto; }

/*Công thức - formula*/
.formula-container {
font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background-color: #ffffff;color: #212529;border: 1px solid #dee2e6;border-radius: 8px;margin: 25px 0px;}
.formula-header {display: flex;justify-content: space-between;align-items: center;padding: 8px 16px;}
.formula-title {font-weight: nomal;font-size: 16px;}
.formula-text {border-top: 1px solid #dee2e6;padding: 16px;}
.formula-text pre {margin: 0; }
.formula-text pre {padding-bottom: 15px;scrollbar-width: thin;scrollbar-color: #ced4da #e9ecef;}
.formula-text pre::-webkit-scrollbar {width: 5px;height: 5px;}
.formula-text pre::-webkit-scrollbar-track {background: #e9ecef;border-radius: 4px;}
.formula-text pre::-webkit-scrollbar-thumb {background-color: #ced4da;border-radius: 4px;}
.formula-text pre::-webkit-scrollbar-thumb:hover {background-color: #adb5bd;}
/*.formula-block {font-family:roboto,arial,sans-serif;}*/
.formula-short {overflow: auto;white-space: pre;}
.formula-long {white-space: pre-line !important;overflow-wrap: break-word;max-height: 150px;  overflow-y: auto; }


/*2. Table MTSP*/
/*Chung*/
a {text-decoration: none;}
.cttable { margin: 20px auto; border-radius: 10px;overflow: hidden;box-shadow: 0 4px 8px rgba(0,0,0,.08);border-collapse: collapse;}
.cttable tr{display:table-row;} 
.cttable td{display:table-cell; vertical-align:middle; }
.cttable tr:hover {background:#eff8fb !important;}
.cttable tr:hover td {background-color: #eff8fb !important;}
.cttable img{ display:block; max-width:70px; height:auto; margin:0 auto; }
.cttable .checkedv {color:darkgreen; text-align: center; font-weight: bold;}
.cttable .checkedx {color:#e74c3c; text-align: center; font-weight: bold;}
.cttable .canhtrai {text-align:left !important;}	
.cttable .canhphai {text-align:right !important;}	
.cttable .canhgiua {text-align:center !important;}

/*Canh lề cột*/
.cttable tr td:nth-child(2){text-align:center; }
.cttable tr td:nth-child(3) {text-align:center;}
.cttable tr td:nth-child(4) {text-align:center;}
.cttable tr td:nth-child(5) {text-align:center;}
.cttable tr td:nth-child(6) {text-align:center;}
.cttable tr td:nth-child(7) {text-align:center;}
.cttable tr td:nth-child(8) {text-align:center;}

/*Độ rộng bảng*/
.w1030 {max-width:1030px; width: 100%; min-width: 300px;}
.w900 {max-width:900px; width: 100%; min-width: 300px;}
.w850 {max-width:850px; width: 100%; min-width: 300px;}
.w800 {max-width:800px; width: 100%; min-width: 300px;}
.w750 {max-width:750px; width: 100%; min-width: 300px;}
.w700 {max-width:700px; width: 100%; min-width: 300px;}
.w650 {max-width:650px; width: 100%; min-width: 300px;}
.w640 {max-width:640px; width: 100%; min-width: 300px;}
.w600 {max-width:600px; width: 100%; min-width: 300px;}
.w550 {max-width:550px; width: 100%; min-width: 300px;}
.w500 {max-width:500px; width: 100%; min-width: 300px;}
.w450 {max-width:450px; width: 100%; min-width: 300px;}
.w400 {max-width:400px; width: 100%; min-width: 300px;}
.w350 {max-width:350px; width: 100%; min-width: 300px;}

/*Độ rộng cột*/
.rong-fixed {table-layout: fixed; } /*Cố định các cột bằng nhau*/
.rong-auto {table-layout: auto; } /* Tự động điều chỉnh độ rộng*/

/*MTSP*/
.cttbmtsp tr:first-child {background:#fff !important; border: 0px #fff solid;}
.cttbmtsp tr:first-child:hover {background: transparent;}
.cttbmtsp th {background: #fff !important;color: #333;text-align: center !important;font-weight: 600;letter-spacing: 0.3px;vertical-align:middle;line-height: 0.8;}
.cttbmtsp td {padding: 10px;font-size: 14px;text-align: center;}
.cttbmtsp, .cttbmtsp td, .cttbmtsp th { border: 1px solid #eef2f7;padding: 12px 7px; font-size: 14px; vertical-align: middle;}

/*Blog*/
.cttbblog th {background: #025CA6;color: #fff;text-align: center;padding: 14px 12px;font-size: 15px;font-weight: 600;letter-spacing: 0.3px;}
.cttbblog td {padding: 10px 7px;font-size: 14px;text-align: center;vertical-align: middle;}
.cttbblog td, .cttbblog th { border: 1px solid #eef2f7;}

/*Định dạnh cột đầu tiên trong bảng*/
.cttbmtsp tr td:first-child {text-align:left; font-weight: bold;}
.cttbblog tr td:first-child {text-align:center;}
/*	.cttbblog tr:nth-child(even) td {background-color: #eff8fb;}*/

	
/*3. So sánh trực quan 2 tấm hình*/
.ct-img-compare-wrapper { max-width: 600px; width: 100%; height: auto; margin: 0 auto; background: #000; } 
.ct-img-comparison { position: relative; width: 100%; max-width: 600px; height: auto; margin: 0 auto; user-select: none; border: 1px solid #ccc; overflow: hidden;} 
.ct-img-comparison .ct-img-before, .ct-img-comparison .ct-img-after { position: absolute; top: 0; left: 0; width: 100%; height: auto; object-fit: cover;} 
.ct-img-comparison .ct-img-after { clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); } 
.ct-img-comparison .ct-img-slider { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); cursor: ew-resize; transform: translateX(-50%); } 
.ct-img-comparison .ct-img-slider-button { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); cursor: ew-resize; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; } 
.ct-img-comparison .ct-img-slider-button::before, .ct-img-comparison .ct-img-slider-button::after { content: ''; position: absolute; border: solid rgba(0, 0, 0, 0.5); border-width: 0 2px 2px 0; display: inline-block; padding: 3px; } 
.ct-img-comparison .ct-img-slider-button::before { transform: rotate(135deg); margin-right: 10px; } 
.ct-img-comparison .ct-img-slider-button::after { transform: rotate(-45deg); margin-left: 10px; }

/*Nhúng video youtube*/
.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;}
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}