.container {
  margin-top:30px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Source Sans Pro';
  font-weight:700;
}

.fancyTab {
	text-align: center;
  padding:15px 0;
  background-color: #eee;
	box-shadow: 0 0 0 1px #ddd;
	top:15px;	
  transition: top .2s;
}

.fancyTab.active {
  top:0;
  transition:top .2s;
}

.whiteBlock {
  display:none;
}

.fancyTab.active .whiteBlock {
  display:block;
  height:2px;
  bottom:-2px;
  background-color:#fff;
  width:99%;
  position:absolute;
  z-index:1;
}

.fancyTab a {
	font-family: 'Source Sans Pro';
	font-size:1.65em;
	font-weight:300;
  transition:.2s;
  color:#333;
}

.fancyTab .hidden-xs {
  white-space:nowrap;
}

.fancyTabs {
	border-bottom:2px solid #ddd;
  margin: 15px 0 0;
}

li.fancyTab a {
  padding-top: 15px;
  top:-15px;
  padding-bottom:0;
}

li.fancyTab.active a {
  padding-top: inherit;
}

.fancyTab .fa {
  font-size: 40px;
	width:100%;
	padding: 15px 0 5px;
  color:#666;
}

.fancyTab.active .fa {
  color: #cfb87c;
}

.fancyTab a:focus {
	outline:none;
}

.fancyTabContent {
  border-color: transparent;
  box-shadow: 0 -2px 0 -1px #fff, 0 0 0 1px #ddd;
  padding: 30px 15px 15px;
  position:relative;
  background-color:#fff;
}

.nav-tabs > li.fancyTab.active > a, 
.nav-tabs > li.fancyTab.active > a:focus,
.nav-tabs > li.fancyTab.active > a:hover {
	border-width:0;
}

.nav-tabs > li.fancyTab:hover {
	background-color:#f9f9f9;
	box-shadow: 0 0 0 1px #ddd;
}

.nav-tabs > li.fancyTab.active:hover {
  background-color:#fff;
  box-shadow: 1px 1px 0 1px #fff, 0 0px 0 1px #ddd, -1px 1px 0 0px #ddd inset;
}

.nav-tabs > li.fancyTab:hover a {
	border-color:transparent;
}

.nav.nav-tabs .fancyTab a[data-toggle="tab"] {
  background-color:transparent;
  border-bottom:0;
}

.nav-tabs > li.fancyTab:hover a {
  border-right: 1px solid transparent;
}

.nav-tabs > li.fancyTab > a {
	margin-right:0;
	border-top:0;
  padding-bottom: 30px;
  margin-bottom: -30px;
}

.nav-tabs > li.fancyTab {
	margin-right:0;
	margin-bottom:0;
}

.nav-tabs > li.fancyTab:last-child a {
  border-right: 1px solid transparent;
}

.nav-tabs > li.fancyTab.active:last-child {
  border-right: 0px solid #ddd;
	box-shadow: 0px 2px 0 0px #fff, 0px 0px 0 1px #ddd;
}

.fancyTab:last-child {
  box-shadow: 0 0 0 1px #ddd;
}

.tabs .nav-tabs li.fancyTab.active a {
	box-shadow:none;
  top:0;
}


.fancyTab.active {
  background: #fff;
	box-shadow: 1px 1px 0 1px #fff, 0 0px 0 1px #ddd, -1px 1px 0 0px #ddd inset;
  padding-bottom:30px;
}

.arrow-down {
	display:none;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 22px solid #ddd;
  position: absolute;
  top: -1px;
  left: calc(50% - 20px);
}

.arrow-down-inner {
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 12px solid #fff;
  position: absolute;
  top: -22px;
  left: -18px;
}

.fancyTab.active .arrow-down {
  display: block;
}

@media (max-width: 1200px) {
  
  .fancyTab .fa {
  	font-size: 36px;
  }
  
  .fancyTab .hidden-xs {
    font-size:22px;
	}
		
}
	
	
@media (max-width: 992px) {
    
  .fancyTab .fa {
  	font-size: 33px;
  }
    
  .fancyTab .hidden-xs {
  	font-size:18px;
    font-weight:normal;
  }
		
}
	
	
@media (max-width: 768px) {
    
  .fancyTab > a {
    font-size:18px;
  }
    
  .nav > li.fancyTab > a {
    padding:15px 0;
    margin-bottom:inherit;
  }
    
  .fancyTab .fa {
    font-size:30px;
  }
    
  .nav-tabs > li.fancyTab > a {
    border-right:1px solid transparent;
    padding-bottom:0;
  }
    
  .fancyTab.active .fa {
    color: #333;
	}
		
}

/* ===================================================================================
   RC9.125 — LỚP THIẾT KẾ TRANG LÀM VIỆC NỘI BỘ (thầy chỉ 28-07 "chuyển sang trang của
   chúng ta"). Cùng tông cờ Mỹ với trang đăng ký RC9.123 để cả web một mối.
   -----------------------------------------------------------------------------------
   ⚠️ CHỖ NÀY ĐẶC BIỆT: file style.css nạp SAU Bootstrap 3 nên đè được Bootstrap mà
   KHÔNG cần !important. Toàn bộ lớp này chỉ sửa CSS — KHÔNG đụng một dòng PHP/JS nào.

   ⚠️ ĐỪNG ĐỘNG VÀO: img, canvas, và mọi lớp .lg-* của phần bản luận. Ảnh lá số có lớp
   canvas vẽ ghi chú phủ đúng toạ độ lên trên; đổi kích thước hay vị trí ảnh là lệch
   nét vẽ của thầy. Phần luận giải cũng tự mang style riêng, không cần và không nên đè.

   ⚠️ Trang này còn ~330 chỗ màu viết THẲNG trong HTML — chúng THẮNG file CSS. Nên lớp
   này chỉ nắm được: bộ thẻ tab, nút bấm, ô nhập, bảng. Muốn đổi nốt mấy hộp màu vàng/
   cam viết tay thì phải sửa HTML, việc ấy để đợt sau.
   =================================================================================== */

:root{
  --nb-navy:#0A3161; --nb-navy-dam:#07254a; --nb-navy-nhat:#eaf0f8;
  --nb-do:#B31942; --nb-do-dam:#8C1530;
  --nb-vien:#d7dee8; --nb-muc:#16202e; --nb-muc-nhat:#5c6470;
  --nb-r:8px;
}

/* ---- khung rộng hơn trên màn hình lớn: bàn làm việc cần chỗ ---- */
@media (min-width:1400px){ .container{width:1340px;} }
.container{margin-top:16px;}

/* ---- BỘ THẺ TAB: về tông cờ, thẻ đang mở màu navy ---- */
.fancyTabs{border-bottom:2px solid var(--nb-navy);}
.fancyTab{background-color:#eef2f7;box-shadow:0 0 0 1px var(--nb-vien);}
.fancyTab a{color:var(--nb-muc);font-family:inherit;font-weight:600;font-size:1.25em;}
.fancyTab .fa{color:var(--nb-muc-nhat);font-size:30px;padding:12px 0 4px;}
.fancyTab.active{background:#fff;box-shadow:1px 1px 0 1px #fff,0 0 0 1px var(--nb-navy),-1px 1px 0 0 var(--nb-vien) inset;}
.fancyTab.active .fa{color:var(--nb-do);}
.fancyTab.active a{color:var(--nb-navy);}
.nav-tabs>li.fancyTab:hover{background-color:#e3ebf5;box-shadow:0 0 0 1px var(--nb-vien);}
.fancyTabContent{box-shadow:0 -2px 0 -1px #fff,0 0 0 1px var(--nb-vien);border-radius:0 0 var(--nb-r) var(--nb-r);}

/* ---- CHỮ: một thang bậc rõ ràng, hết cảnh mỗi chỗ một cỡ ---- */
.fancyTabContent{color:var(--nb-muc);font-size:14.5px;line-height:1.55;}
.fancyTabContent h1,.fancyTabContent h2,.fancyTabContent h3{
  font-family:'Times New Roman',Cambria,Constantia,serif;color:var(--nb-navy);}
.fancyTabContent h1,.fancyTabContent h2{font-size:25px;margin:0 0 6px;padding-bottom:8px;
  border-bottom:2px solid var(--nb-vien);}
.fancyTabContent h1::after,.fancyTabContent h2::after{
  content:"";display:block;width:64px;height:3px;margin-top:8px;background:var(--nb-do);}

/* ---- HAI NÚT LẬP LÁ SỐ ----
   ⚠️ Chúng là <input type=submit> mang style VIẾT THẲNG trong HTML (nền xám #868686,
   viền vàng #ffeb00, height 48px !important). Style nội tuyến thường THUA !important của
   file CSS, nên đây là cách duy nhất nắm được chúng mà KHÔNG phải sửa HTML.
   Nút chính (lá màu) = navy; nút phụ (đen trắng) = viền nhạt. */
.fancyTabContent input[type=submit]{
  background:var(--nb-navy)!important;background-image:none!important;color:#fff!important;
  border:1px solid var(--nb-navy-dam)!important;border-radius:6px!important;
  padding:9px 18px!important;height:auto!important;min-height:42px!important;
  font-size:15px!important;font-weight:700!important;font-family:inherit!important;
  width:auto!important;box-shadow:0 1px 2px rgba(0,0,0,.12),0 4px 12px -4px rgba(10,49,97,.5)!important;
  cursor:pointer;transition:filter .15s;
}
.fancyTabContent input[type=submit]:hover{filter:brightness(1.12);}
/* nút "đen trắng" là việc phụ -> để dáng nhạt hơn, khỏi tranh mắt với nút chính */
.fancyTabContent input[type=submit][value*="đen trắng"]{
  background:#fff!important;color:var(--nb-navy)!important;border-color:#b3c0d1!important;
  box-shadow:none!important;font-weight:600!important;
}
.fancyTabContent input[type=submit][value*="đen trắng"]:hover{background:var(--nb-navy-nhat)!important;}

/* ---- Ô NHẬP: cùng một dáng, có vòng focus (trước đây không có) ---- */
.fancyTabContent input[type=text],.fancyTabContent input[type=number],
.fancyTabContent input[type=email],.fancyTabContent input[type=tel],
.fancyTabContent input[type=date],.fancyTabContent select,.fancyTabContent textarea{
  border:1px solid #b3c0d1;border-radius:6px;padding:6px 9px;min-height:34px;
  font-size:14.5px;font-family:inherit;color:var(--nb-muc);background:#fcfdff;
  transition:border-color .15s,box-shadow .15s;
}
.fancyTabContent input:hover,.fancyTabContent select:hover,.fancyTabContent textarea:hover{border-color:var(--nb-navy);}
.fancyTabContent input:focus,.fancyTabContent select:focus,.fancyTabContent textarea:focus{
  outline:none;border-color:var(--nb-navy);box-shadow:0 0 0 3px rgba(10,49,97,.16);}
/* ⚠️ nguyên tắc số 1: không bao giờ bỏ vòng focus — người dùng bàn phím sẽ lạc */
.fancyTabContent a:focus-visible,.fancyTabContent button:focus-visible,
.fancyTabContent .btn:focus-visible,.fancyTabContent summary:focus-visible{
  outline:2px solid var(--nb-do);outline-offset:2px;}

/* ---- NÚT: cùng một khuôn, phân biệt bằng màu theo VIỆC chứ không tuỳ hứng ---- */
.fancyTabContent .btn{
  border-radius:6px;font-weight:600;font-family:inherit;border:1px solid transparent;
  padding:6px 13px;transition:filter .15s,transform .06s;text-shadow:none;background-image:none;
}
.fancyTabContent .btn:hover{filter:brightness(1.08);}
.fancyTabContent .btn:active{transform:translateY(1px);}
.fancyTabContent .btn-xs{padding:3px 8px;font-size:12px;}
.fancyTabContent .btn-sm{padding:5px 11px;font-size:13px;}
/* việc chính = navy · việc nguy hiểm = đỏ cờ · việc phụ = viền nhạt */
.fancyTabContent .btn-primary{background:var(--nb-navy);color:#fff;}
.fancyTabContent .btn-info{background:#1d5b96;color:#fff;}
.fancyTabContent .btn-success{background:#12592c;color:#fff;}
.fancyTabContent .btn-warning{background:#8a5600;color:#fff;}
.fancyTabContent .btn-danger{background:var(--nb-do);color:#fff;}
.fancyTabContent .btn-default{background:#fff;color:var(--nb-navy);border-color:#b3c0d1;}
.fancyTabContent .btn-default:hover{background:var(--nb-navy-nhat);border-color:var(--nb-navy);}

/* ---- BẢNG (bảng đơn của thẻ Quản trị/Sales) ---- */
.fancyTabContent table{font-variant-numeric:tabular-nums;}
.fancyTabContent table th{color:var(--nb-navy);font-weight:700;}

/* máy bật chế độ giảm chuyển động thì tắt hết hiệu ứng */
@media (prefers-reduced-motion:reduce){.fancyTabContent *{transition:none!important;}}